Question

我在Wordpress中创建了一种画廊。但是，帖子列出了插件（它们附加到地图 - WP谷歌地图），我不能使用任何画廊插件。我只是上传图片，并希望将它们添加到div“showimagediv”。这工作正常，但我无法进行PREV / NEXT。

这就是它的样子：

$(document).ready(function() {
  $('.thumb').on('click', function() {
    var img = $('<img />', {
      src: this.src,
      'class': 'fullImage'
    });
    $('.showimagediv').html(img).show();
  });

  $('.showimagediv').on('click', function() {
    $(this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_content">
  <img src="image1.jpg" class="thumb" />
  <img src="image2.jpg" class="thumb" />
  <img src="image3.jpg" class="thumb" />
</div>
<div class="post_content">
  <img src="image4.jpg" class="thumb" />
  <img src="image5.jpg" class="thumb" />
  <img src="image6.jpg" class="thumb" />
</div>
<div class="post_content">
  <img src="image7.jpg" class="thumb" />
  <img src="image8.jpg" class="thumb" />
  <img src="image9.jpg" class="thumb" />
</div>

它运作良好，但不允许我选择PREV / NEXT。

Answer 1

这是未经测试的 - 但可能有助于您理解。

HTML

<div class="nextSelector">
    <span>NEXT</span>
</div>

JS

$('.nextSelector').on('click',function(){
    var nextImage = $('img.fullImage + img');
    $('img.fullImage').toggleClass("thumb fullImage");
    nextImage.toggleClass("thumb fullImage");
})

在div中显示图像并添加PREV / NEXT按钮

1 个答案: