通过单击图像 src -> 更改为以下缩略图中的 src

Question

我正在尝试将主/单个图像中的图像src 交换为下一个缩略图中的src。

<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
});