Jquery Fancybox2使用字幕的可点击图像

我想让一些图片可以点击Fancybox2中的网站。我复制了这个示例中的代码：

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

我的代码

//启动网站URL
$（“#客户端url”）。单击（函数（）{
$.fancybox.open([
{
href:'http://xyz.com/images/portfolio/brand/client3/01.jpg',
链接：'http://www.clientwebsite.com'
},
{
href:'http://xyz.com/images/portfolio/brand/client3/02.jpg',
链接：'http://www.clientwebsite.com'
},
{
href:'http://xyz.com/images/portfolio/brand/client3/03.jpg',
链接：'http://www.clientwebsite.com'
},
{
href:'http://xyz.com/images/portfolio/brand/client3/04.jpg',
链接：'http://www.clientwebsite.com'
},
],
{
beforeShow:function（）{
$（“.fancybox图像”）.wrap（“”）
},
/*使用标题属性而不是标题*/
加载前：函数（）{
this.title=$（this.element）.attr（'caption'）；
},
/*淡入淡出图像过渡，而不是默认的“弹性”*/
openEffect:“褪色”，
特效：“褪色”，
下一个效果：“褪色”，
效果：“褪色”，
/*在第一个图像上隐藏“上一个”按钮，在最后一个图像上隐藏“下一个”按钮*/
循环：false
});
返回false；
});

---

除了没有显示字幕外，一切正常。任何帮助都将不胜感激。

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

，

$.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 + '" />

//应该是：

具有类似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>

然后在

beforeShow

回调函数中使用该变量设置

title

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

$（文档）.ready（函数（）{
$（“#客户端url”）。单击（函数（）{
var caption=$（this.attr（“caption”）；
$.fancybox.open([
{
href:'http://fancyapps.com/fancybox/demo/1_b.jpg',
标题：“这张图片链接到bbc新闻”，
链接：'http://www.bbc.co.uk/news/'},
{
href:'http://fancyapps.com/fancybox/demo/2_b.jpg',
标题：“此图像链接到jquery”，
链接：'http://jquery.com'},
{
href:'http://fancyapps.com/fancybox/demo/3_b.jpg',
标题：“此图像链接到fancybox”，
链接：'http://fancyapps.com'}
], {
beforeShow:function（）{
$（“.fancybox image”）.wrap（“
您还有一个额外的
a
在这里：
天啊..再次感谢！我也做了更改，但仍然没有字幕。那么您希望每个图库集的所有图像都有相同的“字幕”（来自单击的缩略图）吗？是的。每个图像的字幕都相同。谢谢。效果非常好！
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