だから、ここにシナリオがあります:私は、Fancyboxが有効になっている(のクラスで.fancybox
)「メイン」画像があり、このメイン画像の下にいくつかのサムネイルがあり、クリックすると更新される種類のギャラリーを作成しようとしていますhref
と、それぞれsrc
メイン<a>
と<img>
要素の。
これで、ページが読み込まれたときにメイン画像をクリックすると、Fancybox が期待どおりに問題なく起動します。ただし、下のサムネイルのいずれかをクリックすると、メインの画像とリンクがサムネイルのコンテンツで更新されます。ここでメインの画像をクリックすると、指定された URL に移動します。ファンシーボックスはありません。
$('.fancybox').fancybox();
スワップが行われた後に を再呼び出ししたとしても。まだ何もありません。
いずれにしても、コードと jsFiddle は次のとおりです。
フィドル
http://jsfiddle.net/sbeliv01/jRsjK/4481/
HTML
<!-- The "Main" Photo -->
<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>
<!-- The thumbnails that update the main photo -->
<ul>
<li>
<a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
<img src="http://placekitten.com/150/150" width="45" width="45" title="This is the test title." />
</a>
</li>
<li>
<a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
<img src="http://placekitten.com/150/149" width="45" width="45" title="This is the test title." />
</a>
</li>
<li>
<a class="update" href="http://placekitten.com/600/300" title="This is the test title.">
<img src="http://placekitten.com/g/150/150" width="45" width="45" title="This is the test." />
</a>
</li>
</ul>
JS
$(".fancybox").fancybox({
live: true
});
$('.update').on('click', function(e) {
e.preventDefault();
var main = $('.fancybox'),
href = $(this).prop('href'),
title = $(this).prop('title'),
img_src = $(this).find('img').prop('src'),
img_title = $(this).find('img').prop('title');
main
.prop('title', title)
.prop('href', href)
.find('img')
.prop('src', img_src)
.prop('title', img_title);
$(".fancybox").fancybox();
});
私はおそらくあまりにも明白なものを拾うには集中しすぎているので、助けてくれてありがとう.