Question

我在产品页面或电子商务网站上工作，目前有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" />

这可能吗？

Answer 1

有几件事。

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

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

给它一个id。您可以将大小设置为您需要的大小。

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

尝试使用.click（）＆amp;＆amp; .live（）函数与jquery。注意：在jquery的更高版本中不推荐使用live（）。如果不起作用，请尝试使用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);

Answer 2

<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>

彩盒中的动态图像变化

2 个答案: