0

我想让一些图片可以点击到 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;
});

一切正常，只是没有显示字幕。任何帮助将不胜感激。

4

2 回答 2

0

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

$.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 + '" />
于 2013-07-16T17:54:38.877 回答
0

有一个像

<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

演示_

于 2013-07-16T19:55:53.507 回答