갤러리 Colorbox 그룹 이미지

Question

는 좀 갤러리가 그것을 클릭 ColorBox로드, 지금까지 너무 좋아.

이제 사용자가 ColorBox에있을 때 이전 다음 화살표가있는 이미지를 탐색 할 수 있기를 원하지만 어떻게해야합니까? 정상적인 'rel :'gallery ''와 같이 작동하지 않을 수 있습니까?

$("#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 그의 다음 및 이전 갤러리를 수 있도록 도와 somewone 수

여기에 내 JS입니까?

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

모든 성공을 :

Answer 1

는 colorbox를 호출하기 전에 그룹을 초기화 시도?

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