我有一个小画廊:
当用户点击拇指时,大照片会发生变化,当你点击它时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>
有些人可以帮助我,以便彩盒制作他的下一个和上一个画廊吗?
答案 0 :(得分:1)
在致电colorbox
之前尝试初始化群组:
$('.gallery').colorbox({ rel:'gallery' });
有没有成功?
答案 1 :(得分:0)
&#34; rel&#34; colorbox的属性指的是&#34; rel&#34; <a>
标记上的属性。尝试:
<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>