Jquery fancybox-如何放置打开图像的链接？

-有很多想法吗？我正在尝试链接fancybox中打开的图像。 我到处都找过了！听起来很简单

下面是我使用的代码：

<a id="manual1" href="javascript:;"><img src="/example-thumb.png" alt="example" /></a>
<script type="text/javascript" src="/Cms_Data/Sites/Base/Files/js/fancyboxV2.1.0/jquery.fancybox.pack.js"></script>

<script type="text/javascript">

$("#manual1").click(function() {
$.fancybox([
    '/example-large.jpg',
    '/example-large2.jpg',
    {
        'href'  : '/example-large3.jpg',
        'title' : 'Lorem ipsum '
    }
    ], {
        padding : 38,
        nextEffect : 'fade',
        prevEffect : 'fade'
    });
});
</script>

$（“#手册1”）。单击（函数（）{
$.fancybox([
“/example large.jpg”，
“/example-large2.jpg”，
{
'href'：'/example-large3.jpg'，
“标题”：“Lorem ipsum”
}
], {
填充：38，
下一个效果：“褪色”，
效果：“褪色”
});
});

我仍然不确定你在追求什么，但如果你点击锚，你可以做两件事： 当您找到图像及其src并将-thumb替换为-full并使用它触发您的fancybox方法时，或者您可以使用html5数据属性并告诉您想要的图像url：

<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>

<script type="text/javascript">
$('#manual1').click(function() {
    var data = $(this).data('images').split(','),
        options = {
            padding : 38,
            nextEffect : 'fade',
            prevEffect : 'fade',
            type: 'image'
        };
    $.fancybox.open(data , options );
})
 </script>

还有另一个演示：

这样，您就不需要在html中传递一个长的

数据-

属性（也不需要拆分），并使其尽可能简单：

<a id="manual1" href="javascript:;"><img src="/example-thumb.png" alt="example" /></a>

请参见

---

注意在我的演示中，我更改了导航箭头的css属性，以避免与链接图像重叠。

这段代码更简单、更简短

$.fancybox.open([
{
    href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    link : 'http://jquery.com/'}
],{
    afterShow: function() {
    $(".fancybox-image").wrap('<a href="' + this.link + '" />')
        },   

    padding : 0   
});

$.fancybox.open([
{
href:'http://fancyapps.com/fancybox/demo/1_b.jpg',
链接：'http://jquery.com/'}
],{
afterShow:function（）{
$（“.fancybox图像”）.wrap（“”）
},   
填充：0
});

一个小语法错误是图像文件链接后的

，

指向什么？你想在fancybox图像上有一个链接吗？当fancybox使用回调

afterShow

或

afterLoad

时，您可以绑定click事件，然后绑定fancybox显示的图像。@JonT，确保在fancybox插件之前也包含jQuery，并且路径正确。.嗨，Gaby&Voigtan，我在“/example large.jpg”之后有更多图像，因此，我需要图像（'/example large.jpg'）链接到url Yee忘了在上面的代码中包含JQuery抱歉Voigtan我对jQ/js完全是新手我是lowely设计师：-）嗨Voigtan，我想要的是当单击时，示例large显示在fancybox中-然后可以单击查看的example-large.jpg进入新页面（即使用一个环绕example-large.jpg的图标，你不能这样做，你有一个图像数组（默认CSS）如果你没有图库，那么我的第一个想法是你将点击事件绑定在弹出的图像上。该死……如果箭头（左/右导航）出现，fancybox可能会有一个未来的功能如果每一面只有10%，中间是可点击的，你可以有一个标题，并在标题上绑定点击事件？或者自己更改CSS？这里有一个新的例子，这只是一个图像，如果你点击它，它将转到

锚定

元素

href

url。只看了代码我错了，它的宽度是40%，所以你有一个20%的区域可以点击。嘿，我知道这就像一年后，但这正是我所需要的。最好的部分是我想要简单的HTML，这对我来说确实做到了。你创建Fancybox或其他什么东西是因为你回答了很多关于它的问题吗…？@Keven:哦，不，Fancybox只是我喜欢的jQuery插件，很好这很难找到。我回答这些问题是因为对我来说很容易（我已经用了很多年了）。所有的功劳都归它的唯一创造者杰尼斯·斯卡尼利斯所有

$(document).ready(function() {
    $("#manual1").click(function() {
        $.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 + '" />')
            },
            padding: 38,
            nextEffect: 'fade',
            prevEffect: 'fade'
        });
        return false;
    });
}); // ready

<a id="manual1" href="javascript:;"><img src="/example-thumb.png" alt="example" /></a>

$.fancybox.open([
{
    href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    link : 'http://jquery.com/'}
],{
    afterShow: function() {
    $(".fancybox-image").wrap('<a href="' + this.link + '" />')
        },   

    padding : 0   
});