0

我在产品页面或电子商务网站上工作，目前有 3 张小图片和一张大图片。这三个小图像是可点击的，当用户单击其中一个图像时，较大的图像会更改以显示该图像，使用：

onMouseDown="document.Image.src=/img1.jpg;"

这工作正常。我遇到的麻烦是尝试将其与彩盒链接时。我想做的是让用户单击其中一个较小的图像，然后加载较大的图像，然后当他们单击该较大的图像时，会调用颜色框函数，并且图像会显示在颜色框弹出窗口中。有没有办法做到这一点？

目前我的代码显示如下：

jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true}); 

<a class="largeImgPop" href="/img1.jpg">1</a>
<a class="largeImgPop" href="/img1.jpg">2</a>
<a class="largeImgPop" href="/img1.jpg">3</a>

<img src="/img1.jpg" name="Image" alt="Image 1" />

这可能吗？

4

2 回答 2

1

有几件事。

为什么点击小图后不直接跳到颜色框？

但是假设你有一个大的占位符图像和几个交换它们的缩略图，我会这样做。

给这个ID。您可以根据需要设置大小。

<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" />

尝试将 .click() && .live() 函数与 jquery 一起使用。注意：live() 在 jquery 的更高版本中已被弃用。如果不起作用，请尝试使用 on()。

 $(function(){ 
    $('.largeImgPop').click(function(){
        var img = $(this).attr('src');
        $('#mainImg').attr("src", img);
    });
    $('#mainImg').live('click',function(){
        $(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
    });

});

我不知道这是否可行……我也不知道您为什么要将一张图像加载到另一张图像上。您从未指定图像目录结构。您可以添加 rel="/images/larger/img1.jpg" 并得到它。

并改为。

var img = $(this).attr('rel');
$('#mainImg').attr("src", img);
于 2013-04-12T21:29:52.963 回答
0 
<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>
于 2013-04-12T15:33:55.980 回答