fancybox - 如何从打开的图像中放置链接？ [英] fancybox - how can I put a link from the opened image?

问题描述

-largeAny Ideas伙计们？我正试图在fancybox中链接打开的图像。
我到处都看！这听起来很简单...

-largeAny Ideas folks? I'm trying to link the opened image in fancybox. I've looked everywhere! It sounds so simple...

所以这是我正在使用的代码：

So here's the code I'm using:

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

推荐答案

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

Im still not sure what you are after but is if when you click on the anchor you could do two things: etiher you find the image and its src and replace -thumb to -full and use that to trigger your fancybox method, or you could use html5 data attribute and tell what image url you want:

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

和一个演示： http://jsfiddle.net/voigtan/jJpAM/2/

如果您只使用一张图片进行演示

$('.test').click(function() {
    var a = this,
        images = [],
        data = $(a).data('images').split(','),
        options = {
            padding : 38,
            nextEffect : 'fade',
            prevEffect : 'fade',
            type: 'image',
            afterShow: function() {
                $("img.fancybox-image").click(function() {
                    window.location.href = a.href;                        
                });
            }
        };
    $.fancybox.open(data , options );
    return false;
})

和另一个演示： http://jsfiddle.net/voigtan/jJpAM/3/

这篇关于fancybox - 如何从打开的图像中放置链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！