0

私は小さなギャラリーを持っています:

  • 大きな写真
  • 底の小さな親指

ユーザーが親指をクリックすると、写真が大きく変わります。

大きな写真に Colorbox プラグインを追加したので、ユーザーが大きな写真をクリックすると、大きな写真が表示されます。しかし、ユーザーが最初にいくつかの親指をクリックしてから大きな写真をクリックすると、ColorBox が読み込まれますが、追加した設定は読み込まれません。

ここに私のjsがあります:

$(function() {
$("#wrapper #right #detail #photo #big #image a").colorbox({
    transition: 'elastic',
    speed: 200,
    opacity: 0.4,
    scalePhotos : true,
    maxWidth : '800px'
});

$("#wrapper #right #detail #photo ul li .thumb").click(function() {
    var image = $(this).attr("rel");
    $('#image').hide();
    $('#image').fadeIn('fast');
    $('#image').html('<a href="' + image + '" class="cboxElement" title=""><img src="' + image + '" alt="" /></a>');
    return false;
});
});

そしてHTML：

<div id="photo">
<div id="big"><div id="image"><a href="gfx/detail/1.jpg"><img src="gfx/detail/1.jpg" border="0"/></a></div></div>

<ul>
    <li><a href="#" rel="gfx/detail/1.jpg" class="thumb"><img src="gfx/detail/1.jpg" alt="" /></a></li>
    <li><a href="#" rel="gfx/detail/2.jpg" class="thumb"><img src="gfx/detail/2.jpg" alt="" /></a></li>
    <li><a href="#" rel="gfx/detail/3.jpg" class="thumb"><img src="gfx/detail/3.jpg" alt="" /></a></li>
</ul>
</div>

カラーボックスが設定をロードするように誰かが私を助けることができますか?

4

1 に答える 1

2 
$("#wrapper #right #detail #photo #big #image a")
$("#wrapper #right #detail #photo ul li .thumb")

そのような長いセレクターは必要ありません。パフォーマンスが低下します。#idセレクターであり、idは一意である必要があるため、削除できます#wrapper #right #detail

カラーボックスオプションを添付する要素を置き換えると、問題はこのレベルにあり、解決策としてバインドできますclick。このような：

$('#image').on('click', 'a', function(e){
   e.preventDefault();
   $.colorbox({
       transition: 'elastic',
       href: this.href,
       speed: 200,
       opacity: 0.4,
       scalePhotos : true,
       maxWidth : '800px'
   });
});
于 2013-03-28T11:45:42.940 に答える