是否可以在 slimbox 中显示的图像中添加链接?

发布于 2024-12-15 22:36:08 字数 358 浏览 3 评论 0原文

我有一个图片库,我在其中使用 slimbox。我想知道是否可以在单击/悬停图库中的图像后显示的图像中添加链接,因为我能够在标题/说明中添加链接。

<a rel='slimbox' href="images/img2.jpg" title="&lt;a href=&quot;http://www.google.com&quot; &gt;Google&lt;/a&gt;">
   <img class="cloudcarousel" src="images/img1.jpg" width="128" height="164" alt=""  />
</a>   

I have an image gallery and I'm using slimbox in it. I want to know if it's possible to add a link in the image that shows up after clicking/hovering an image in the gallery, because I was able to add a link in the title/caption.

<a rel='slimbox' href="images/img2.jpg" title="<a href="http://www.google.com" >Google</a>">
   <img class="cloudcarousel" src="images/img1.jpg" width="128" height="164" alt=""  />
</a>   

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

森罗 2024-12-22 22:36:08

是的。您可以为每个图像添加标题/说明文字。但您不能直接添加图像链接。尝试在标题中添加链接,如 Slimbox 演示 中所示。请检查来源。您可以获得一些定制的想法。

<script type="text/javascript">//<![CDATA[
    window.addEvent("domready", function() {
        if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            $("a[href^=http://www.flickr.com/photos/] > img:first-child[src]").getParent().slimbox({
                loop: true,
                initialWidth: 1024,
                initialHeight: 768,
                overlayOpacity: 0.6,
                overlayFadeDuration: 200,
                resizeDuration: 1000,
                resizeTransition: Fx.Transitions.Elastic.easeOut,
                counterText: "This is image <strong>{x}</strong> on a total of <strong>{y}</strong> in this fabulous Flickr image gallery",
                previousKeys: [37, 80, 16],
                nextKeys: [39, 78, 17],
            }, function(el) {
                return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
                    (el.title || el.firstChild.alt) + '<br />Visit the <a href="' + el.href + '">Flickr page</a> for this picture.'];
            });
        }
        try {
            _gat._getTracker("UA-760577-1")._trackPageview();
        } catch(e) {}
    });
//]]></script>

<h2>Customization</h2>

    <p>You can change every parameter of Slimbox and make it work with any kind of link or element.<br />

    Below is an example of integration with Flickr links and custom options.</p>

    <p><a href="http://www.flickr.com/photos/14516334@N00/345009210/"><img src="http://farm1.static.flickr.com/159/345009210_1f826cd5a1_t.jpg" alt="A nice bee." /></a><a href="http://www.flickr.com/photos/alphageek/233472093/" title="Keyboard navigation is also customized here so you can use the Shift and Ctrl keys to navigate between images. Also, navigating to the next image will bring you back to the first one (loop option)."><img src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_t.jpg" alt="Flowers" /></a></p>

Yes. You can add the title/caption to each image. But you can not add a link to image directly. Try to add link in caption as in Slimbox demo. Please check the source. You can get some idea to customize.

<script type="text/javascript">//<![CDATA[
    window.addEvent("domready", function() {
        if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            $("a[href^=http://www.flickr.com/photos/] > img:first-child[src]").getParent().slimbox({
                loop: true,
                initialWidth: 1024,
                initialHeight: 768,
                overlayOpacity: 0.6,
                overlayFadeDuration: 200,
                resizeDuration: 1000,
                resizeTransition: Fx.Transitions.Elastic.easeOut,
                counterText: "This is image <strong>{x}</strong> on a total of <strong>{y}</strong> in this fabulous Flickr image gallery",
                previousKeys: [37, 80, 16],
                nextKeys: [39, 78, 17],
            }, function(el) {
                return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
                    (el.title || el.firstChild.alt) + '<br />Visit the <a href="' + el.href + '">Flickr page</a> for this picture.'];
            });
        }
        try {
            _gat._getTracker("UA-760577-1")._trackPageview();
        } catch(e) {}
    });
//]]></script>

<h2>Customization</h2>

    <p>You can change every parameter of Slimbox and make it work with any kind of link or element.<br />

    Below is an example of integration with Flickr links and custom options.</p>

    <p><a href="http://www.flickr.com/photos/14516334@N00/345009210/"><img src="http://farm1.static.flickr.com/159/345009210_1f826cd5a1_t.jpg" alt="A nice bee." /></a><a href="http://www.flickr.com/photos/alphageek/233472093/" title="Keyboard navigation is also customized here so you can use the Shift and Ctrl keys to navigate between images. Also, navigating to the next image will bring you back to the first one (loop option)."><img src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_t.jpg" alt="Flowers" /></a></p>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文