9

-largeAny Ideasの人々？開いた画像を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>
4

3 に答える 3

6

私はまだあなたが何を求めているのかわかりませんが、アンカーをクリックしたときに2つのことを行うことができます：画像とその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>

およびデモ： http： //jsfiddle.net/voigtan/jJpAM/2/

1つの画像のみを使用している場合のデモ

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

于 2012-12-19T13:42:17.310 に答える
4 
what I'm after is when the <a id="manual1"> is clicked the example-large is 
displayed in fancybox - the viewed example-large.jpg can then be clicked 
to go to a new page

コード（fancyboxの手動メソッド）に基づくもう1つの簡単でクリーンなアプローチは、画像ごとにカスタムリンクオプションを追加し、コールバックを使用して画像とそれに対応するリンクを次のよう beforeShowにラップすることです。<a>

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

このようにdata-して、htmlでlong属性を渡す必要はなく（分割も必要ありません）、次のように単純に保つ必要があります。

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

デモを見る

私のデモでは、リンクされた画像との重複を避けるために、ナビゲーション矢印のcssプロパティを変更したことに注意してください。

于 2012-12-19T18:29:27.437 に答える
1

このよりシンプルで短いコード

$.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   
});
于 2013-08-24T10:32:32.667 に答える