Галерея и ColorBox группа изображения

Question

У меня есть небольшая галерея:

• Больших фото
• Маленьких пальцев на нижнем

Когда пользователь нажимает на пальце большого изменение фото и когда ты нажмите на нее 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> 

Может somewone мне помочь, так что Colorbox делает его следующую и предыдущую галерею?

Answer 1

Попробуйте инициализировать группу перед вызовом colorbox:

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

Любой успех?

Answer 2

Свойство «rel» colorbox относится к атрибуту «rel» в теге <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>