ColorBox с галереей

Question

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

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

Когда пользователь нажимает на пальце большого изменения фото, Оке большим.

Теперь у меня есть плагин Colorbox на большой фотографии, поэтому, когда пользователь нажимает на большую фотографию, он видит большую, что работает. Но когда пользователь сначала нажимает на некоторые большие пальцы, а затем нажимает на большое фото ColorBox, но не загружает настройки, которые я добавляю.

Вот мои JS:

$(function() { 
$("#wrapper #right #detail #photo #big #image a").colorbox({ 
    transition: 'elastic', 
    speed: 200, 
    opacity: 0.4, 
    scalePhotos : true, 
    maxWidth : '800px' 
}); 

$("#wrapper #right #detail #photo ul li .thumb").click(function() { 
    var image = $(this).attr("rel"); 
    $('#image').hide(); 
    $('#image').fadeIn('fast'); 
    $('#image').html('<a href="' + image + '" class="cboxElement" title=""><img src="' + image + '" alt="" /></a>'); 
    return false; 
}); 
}); 

И HTML:

<div id="photo"> 
<div id="big"><div id="image"><a href="gfx/detail/1.jpg"><img src="gfx/detail/1.jpg" border="0"/></a></div></div> 

<ul> 
    <li><a href="#" rel="gfx/detail/1.jpg" class="thumb"><img src="gfx/detail/1.jpg" alt="" /></a></li> 
    <li><a href="#" rel="gfx/detail/2.jpg" class="thumb"><img src="gfx/detail/2.jpg" alt="" /></a></li> 
    <li><a href="#" rel="gfx/detail/3.jpg" class="thumb"><img src="gfx/detail/3.jpg" alt="" /></a></li> 
</ul> 
</div> 

Может somewone мне помочь, так что Colorbox загружает настройки?

Answer 1

$("#wrapper #right #detail #photo #big #image a") 
$("#wrapper #right #detail #photo ul li .thumb") 

Нет необходимости в таких длинных селекторах, вы теряете производительность. # является селектор идентификатор и идентификатор должен быть уникальным, то почему вы можете удалить #wrapper #right #detail

Вы замены элемента, на котором прикрепление ColorBox проблемы лежит на этом уровне, как и решение, которое вы можете связать click. Например:

$('#image').on('click', 'a', function(e){ 
    e.preventDefault(); 
    $.colorbox({ 
     transition: 'elastic', 
     href: this.href, 
     speed: 200, 
     opacity: 0.4, 
     scalePhotos : true, 
     maxWidth : '800px' 
    }); 
});