Question

我想通过点击下一个缩略图中的src，将主要/单张图片中的图片src换成。{/ p>

<div id="productinfoleft">
  <img src="images/product_images/info_images/some_image_0.png" class="productimage">
  <div class="morepics">
    <div class="active">
      <img src="images/product_images/thumbnail_images/some_image_0.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_1.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_2.png">
    </div>
    <div>
      <img src="images/product_images/thumbnail_images/some_image_3.png">
    </div>
  </div>
</div>

通过点击缩略图我可以交换主图像 - 到目前为止一切都很好。但是在点击主图像时，我想将图像更改为以下缩略图池的下一个文件。我现在使用的jQuery代码是：

// BOF PRODUCT-MORE-PICTURE CLICK SWAP
$('.morepics div:first').addClass('active');

$(document).ready(function(e) {
  $('.morepics img').click(function(e) {
    e.preventDefault();
    $('.morepics div').removeClass('active');
    $('.productimage').attr('src', $(this).attr('src').replace('thumbnail_images/', 'info_images/'));
      $(this).parent('div').addClass('active');
    });

    var imgSwap = [];
    $('.morepics img').each(function() {
      imgUrl = this.src.replace('thumbnail_images/', 'info_images/');
      imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
  });

  $.fn.preload = function() {
    this.each(function(){
      $('<img/>')[0].src = this;
    });
  }

  // EOF PRODUCT-MORE-PICTURE CLICK SWAP

我不知道如何更改或扩展我的jQuery代码以完成此操作，同时将缩略图div的正确类更改为active。任何帮助都会非常棒 - 谢谢。

Answer 1

由于您已经具有点击实际缩略图和更新主图像的功能，我只需在主图像上添加一些代码，触发点击下一个缩略图（使用active已经应用的课程）。

添加以下内容即可实现

/*load next image when clicking on productimage*/
$('.productimage').on('click', function(e) {
    e.preventDefault();
    var thumbs = $('.morepics > div'), // get all wrapper divs of thumbnails
        active = thumbs.filter('.active'), // get the active div
        next = active.next(); // get the next div after the active

    if (!next.length) { // if active was the last, so not next exists, start from first
        next = thumbs.first();
    }

    next.find('img').trigger('click'); // trigger the existing handler of the img
});

通过单击更改图像src - ＆gt;从以下缩略图

1 个答案: