图库和彩盒组图像答案

【问题标题】：Gallery and Colorbox group images图库和彩盒组图像
【发布时间】：2013-03-28 12:30:10
【问题描述】：

我有一个小画廊：

大合照
底部的小拇指

当用户单击拇指时，大照片会发生变化，当您单击它时会加载 ColorBox，到目前为止一切顺利。

现在我希望当用户在 ColorBox 中时，他可以使用下一个 prev 箭头浏览图像，但我该怎么做呢？使用正常的 '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>

谁能帮我让 colorbox 制作他的下一个和上一个画廊？

【问题讨论】：

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

标签： jquery image gallery colorbox rel

【解决方案1】：

在调用colorbox之前尝试初始化组：

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

成功了吗？

【讨论】：

【解决方案2】：

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>

【讨论】：