帶有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;
});