Проблемы с простой галереей изображений jQuery с плагином Colorbox

Question

Я собираю галерею изображений для сайта электронной коммерции и хочу использовать colorbox для запуска больших изображений. Моя проблема заключается в том, что изображение, запущенное в colorbox, остается в качестве первого запуска и должно отражать изображение, показанное как img # bigpic - ссылка на изображение, похоже, корректно обновляется.

Вот JQuery У меня есть:

$(document).ready(function(){ 

$("#largeimage").colorbox(); 
imageSwapper(".thumbnails a"); 


function imageSwapper(link) { 
$(link).click(function(){ 
$("#bigpic").attr("src", this.href); 
$("#largeimage").attr("href", this.rel); 
return false; 
}); 
}; 


$("#largeimage").bind('mouseenter mouseleave', function(event) { 
     $("#largeimage span").toggleClass('showspan'); 
    }); 

}); 

... и HTML

<a href="_images/products/large/bpn0001_1.jpg" id="largeimage"><span></span><img src="_images/products/bpn0001_1.jpg" id="bigpic" /></a> 
     <div class="thumbnails"> 
      <ul> 
       <li><a href="_images/products/bpn0001_1.jpg" rel="_images/products/large/bpn0001_1.jpg"><img src="_images/products/mini/bpn0001_1.jpg" /></a></li> 
       <li><a href="_images/products/bpn0001_2.jpg" rel="_images/products/large/bpn0001_2.jpg"><img src="_images/products/mini/bpn0001_2.jpg" /></a></li> 
       <li><a href="_images/products/bpn0001_3.jpg" rel="_images/products/large/bpn0001_3.jpg"><img src="_images/products/mini/bpn0001_3.jpg" /></a></li> 
      </ul> 
     </div> 

Любая помощь будет высоко ценится!

Answer 1

Я не думаю, что вам нужна функция imageSwapper(). Попробуйте заменить это:

imageSwapper(".thumbnails a"); 


function imageSwapper(link) { 
$(link).click(function(){ 
    $("#bigpic").attr("src", this.href); 
    $("#largeimage").attr("href", this.rel); 
    return false; 
}); 
}; 

С:

$(".thumbnails a").click(function(){ 
    $("#bigpic").attr("src", $(this).attr("href")); 
    $("#largeimage").attr("href", $(this).attr("rel")); 
    return false; 
}); 

Answer 2

Вместо связывания ColorBox непосредственно по ссылке вызвать окно цвета от нажатия на эту ссылку и передать в текущем HREF, как это, казалось бы, это не перепроверяя, что такое текущее значение.

$("#largeimage").click(function(){ 
    $.fn.colorbox({href:$(this).attr("href")}); 
    return false; 
});