Question

我正在为电子商务网站整理图片库，并希望使用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;
});

使用Colorbox插件的简单jQuery图库的问题

2 个答案: