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

标签 javascript jquery image href slimbox

我有一个图片库,我在其中使用 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>   

最佳答案

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

<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>

关于javascript - 是否可以在 slimbox 中显示的图像中添加链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8125781/

相关文章:

javascript - js,在页尾包含真的更好吗?

javascript - jQuery加载文本文件数据

javascript - 向 HTML 表格添加过滤

javascript - 倒计时结束后可以自动更换图片来源吗?

javascript - 使切换功能仅适用于单击打开的框而不是所有框?

javascript - 在 THREE.js 中为顶点生成网格面

ios - 将图像设置为用蓝色填充的 UIButton

jquery - .each() 在一次迭代后停止?

php imagecopyresampled 不工作

javascript - Php Javascript 图片上传和编辑