1

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

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

ユーザーが親指をクリックすると大きな写真が変わり、それをクリックすると ColorBox が読み込まれます。

ユーザーが ColorBox にいるときに、次の前の矢印で画像をナビゲートできるようにしたいのですが、どうすればこれを行うことができますか? 通常の 'rel:'gallery'' では動作しませんか?

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

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

$('#wrapper #right #detail #big #image').on('click', 'a', function(e){
    e.preventDefault();
    $.colorbox({
        transition: 'elastic',
        href: this.href,
        rel: 'gallery',
        speed: 200,
        opacity: 0.4,
        scalePhotos : true,
        maxWidth : '800px',
        maxHeight : '700px'
    });
});

そしてHTML：

<div id="photo">
    <div id="big"><div id="image"><table><tr><td><a href="gfx/detail/1.jpg" class="gallery"><img src="gfx/detail/1.jpg" alt="" /></a></td></tr></table></div></div>

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

カラーボックスが彼の次のギャラリーと前のギャラリーを作成できるように、誰かが私を助けることができますか?

4

2 に答える 2

1

を呼び出す前にグループを初期化してみてくださいcolorbox:

$('.gallery').colorbox({ rel:'gallery' });

何か成功？

于 2013-03-28T13:25:15.093 に答える
0

colorbox の「rel」プロパティは、<a>タグの「rel」属性を参照します。試す：

<div id="photo">
<div id="big"><div id="image"><table><tr><td><a href="gfx/detail/1.jpg" class="gallery">    <img src="gfx/detail/1.jpg" alt="" /></a></td></tr></table></div></div>

<ul>
    <li><a href="gfx/detail/1.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/1.jpg" alt="" /></a></li>
    <li><a href="gfx/detail/2.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/2.jpg" alt="" /></a></li>
    <li><a href="gfx/detail/3.jpg" rel="gallery" class="thumb gallery"><img src="gfx/detail/3.jpg" alt="" /></a></li>
</ul>
</div>
于 2014-09-26T20:37:23.183 に答える