带有Colorbox插件的简单jQuery图片库的问题

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

相反的颜色框直接绑定到该链接的点击该链接上调用的颜色框，并通过在目前的HREF，因为它似乎是不重新检查当前值是什么。

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