Question

我想将一些图片点击到Fancybox2中的网站。我复制了此示例中的代码：http://jsfiddle.net/w6p49/

它完全按照我想要的方式工作，除了我使用的是字幕而不是标题。我从这里复制了代码：http://jsfiddle.net/vkDcG/

我的代码

//Launch website URLS
$("#client-url").click(function() {
    $.fancybox.open([
            {
                href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg',
                link: 'http://www.clientwebsite.com'
            },
            {
                href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg',
                link: 'http://www.clientwebsite.com'
            },
            {
                href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg',
                link: 'http://www.clientwebsite.com'
            },
            {
                href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg',
                link: 'http://www.clientwebsite.com'
            },
        ],
        {
            beforeShow: function() {
                $(".fancybox-image").wrap('<a a target="_blank" href="' + this.link + '" />')
            },
            /*Use caption attribute instead of title*/
            beforeLoad: function () {
                this.title = $(this.element).attr('caption');
            },
            /*Fade image transition instead of default "elastic"*/
            openEffect: 'fade',
            closeEffect: 'fade',
            nextEffect: 'fade',
            prevEffect: 'fade',
            /*Hide the prev button on the first image, and the next button on the last one.*/
           loop: false
        });
    return false;
});

除了字幕没有显示外，一切正常。非常感谢任何帮助。

Answer 1

您的链接末尾有一个额外的,。

$.fancybox.open([
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg',
        link: 'http://www.clientwebsite.com'
    }, // See here
],

那应该是这样的：

$.fancybox.open([
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/01.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/02.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/03.jpg',
        link: 'http://www.clientwebsite.com'
    },
    {
        href: 'http://xyz.com/images/portfolio/brand/client3/04.jpg',
        link: 'http://www.clientwebsite.com'
    } // See here, no coma
],

此处还有一个额外的a：

<a a target="_blank" href="' + this.link + '" />
//Should be:
<a target="_blank" href="' + this.link + '" />

Answer 2

有像

这样的HTML

<a id="client-url" caption="This caption will appear in all images of the gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

在caption事件后的缩略图链接中获取click，如

var caption = $(this).attr("caption");

然后在title回调中使用该变量设置beforeShow，如

this.title = caption;

完整代码：

$(document).ready(function() {
    $("#client-url").click(function() {
        var caption = $(this).attr("caption");
        $.fancybox.open([
            {
            href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
            title: 'this image links to bbc news',
            link: 'http://www.bbc.co.uk/news/'},
        {
            href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
            title: 'this image links to jquery',
            link: 'http://jquery.com'},
        {
            href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
            title: 'this image links to fancybox',
            link: 'http://fancyapps.com'}
        ], {
            beforeShow: function() {
                $(".fancybox-image").wrap('<a href="' + this.link + '" />');
                this.title = caption;
            },
            padding: 38,
            nextEffect: 'fade',
            prevEffect: 'fade'
        });
        return false;
    });
}); // ready

DEMO

使用字幕的Fancybox2可点击图像

2 个答案: