Jquery 画廊和彩盒组图像

我有一个小画廊：

• 大照片
• 小拇指在底部

当用户单击拇指时，大照片会发生变化，当您单击它时，颜色框会加载，到目前为止效果良好

现在我想知道，当用户在颜色框中时，他可以使用下一个上一个箭头在图像中导航，但我如何才能做到这一点？使用正常的“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'
    });
});

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

$（“#包装器#右#细节#照片ul li.thumb”）。单击（函数（）{
var image=$（this.attr（“rel”）；
$（'#image'）.hide（）；
$（'#image'）.fadeIn（'fast'）；
$（'#image'）.html（''）；
返回false；
});
$（“#wrapper#right#detail#big#image”）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
$彩色盒({
过渡：“弹性”，
href:this.href，
雷尔：“画廊”，
速度:200,，
不透明度：0.4，
是的，
maxWidth:'800px'，
最大高度：“700px”
});
});

和HTML：

$("#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'
    });
});

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

---

有人能帮我让colorbox成为他的下一个和上一个画廊吗？

在调用

colorbox之前尝试初始化组：

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

成功吗？
在调用
colorbox
之前尝试初始化组：

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

成功吗？
colorbox的“rel”属性指的是






colorbox的“rel”属性指的是






要对图像进行分组，它们必须具有相同的
rel
值。在ColorBox示例中，它们具有相同的类而不是rel？要对图像进行分组，它们必须具有相同的
rel
值。在ColorBox示例中，它们具有相同的类而不是rel？