7

だから私は画像のギャラリーとそれにいくつかのリンクを持っています。そんな感じ

<a href="/images/1.jpg" rel="1">title</a>
<a href="/images/1.jpg" rel="1">link to first image</a>
<a href="/images/2.jpg" rel="1">link to second image</a>
<a href="/images/3.jpg" rel="1">link to third image</a>

これにより、fancyboxで最初の画像が複製されます。このように：http： //filebeam.com/2dec41a1820f2525f040424578c4421c.jpg

重複せずに同じオブジェクトに複数のリンクを作成するにはどうすればよいですか？

4

1 に答える 1

15

すべてのリンクが表示されてクリック可能である場合は、最初のリンクのカスタムクリックハンドラーを作成して、残りのリンクからfancyBoxギャラリーを開くことができます-

<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<br />
<br />

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

$(".fancybox-trigger").click(function() {

    $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');

    return false;

});


$(".fancybox").fancybox();

</ p>

実際の動作を参照してください-http://jsfiddle.net/g9R4H/

于 2012-11-13T10:41:47.270 に答える