画廊和彩盒组图像

大图
小大拇指底部

当拇指用户点击的大照片的变化，当你点击它ColorBox加载，到目前为止这么好。

现在我想当用户在ColorBox中时，他可以通过下一个prev箭头导航图像，但我该怎么做？与正常'rel：'画廊''它不会工作？

这里是我的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>

能somewone帮助我，让颜色框，使他的下一个和prev画廊？

来源

2013-03-28 Maanstraat

要将您的图像分组，必须具有相同的“rel”值。 – CBroe

在ColorBox的例子中，它们具有相同的类而不是rel？ – Maanstraat

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

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

任何成功？

来源

2013-03-28 13:25:15 webdeveloper

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-26 20:37:23

画廊和彩盒组图像

回答

相关问题