jQuery三步取代img

Question

有点被这个困住了。我正在为Shopify商店构建一个产品图像库，它需要具备以下功能：

每个产品的image

• Medium-sized图像的

1. 缩略图，当您单击中等大小的图像

时，该图像将进入主图像

图像，该图像显示为一个亮框。

因此，您可以点击一个缩略图，它会将中等大小的图像加载到图像容器中，然后单击该中等大小的图像，将整个大小的图像显示为一个灯箱覆盖。

这是我的标记：

<div id="imgcontainer">
                <a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
            </div> <!-- End div#imgcontainer -->
            <div id="thumbs">
                <div class="thumbnav">
                    <ul>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                    </ul>
                </div> <!-- End div#thumbnav -->
                <a href="javascript:void(0);" class="tbpr">&nbsp;</a>
                <a href="javascript:void(0);" class="tbnx">&nbsp;</a>
            </div> <!-- End div#thumbs -->
        </div> <!-- End div#main -->

有人能推荐最好的方法吗？Shopify使用了一种叫做“液体”的语言，它允许我使用一个“foreach”语句来输出图像的标记，甚至仅仅是三种类型的图像urls (缩略图、中型和全尺寸)。

请注意，对于图像文件名和位置没有简单的命名约定，因为它们是动态生成的，所以我不能仅仅将文件名的“中等”部分替换为“fullsize”等。

谢谢你的指点，

Osu

Answer 1

您能将完整大小的urls作为数据属性存储在锚上吗？例如，

<li><a href="assets/medium-1.jpg" data-fullsize="assets/fullsize-1.jpg">
       <img src="assets/thumb-1.jpg" alt="..." /></a></li>

然后你可以使用这样的东西：

$('a[data-fullsize]').click( function() {
     var $this = $(this);
     $('#imgcontainer a:first').attr('href',$this.data('fullsize'))
                               .find('img')
                               .attr('src',$this.attr('href'));
     return false;
});
$('#imgcontainer').on('click','a:first',function() {
     // load href into lightbox
     return false;
});

Answer 2

我会将链接的路径添加为数据属性。

添加大图像信息

<li><a href="assets/medium-1.jpg" data-zoomimage="assets/big-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>

处理单击 (jQuery v1.7)

首先用于拇指->介质

$('.thumbnav').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    $('#imgcontainer a') // find the link 
        .attr('href',self.data('zoomimage') ) // and update its href to point to the zoom
        .find('img') // fint the image inside
        .attr('src', self.attr('href') ); // and load the medium
});

然后对介质->变焦

$('#imgcontainer').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    // use lightbox system to load the link's href.. self.attr('href')
});