当点击按钮

Question

显示div的下一个图像简而言之 - 我在WP Google Map Pro中显示允许列出帖子的帖子。因此，我不能使用任何需要简码的图库，因为插件不显示简码。

我试图根据图片创建我自己的图库。这里是什么样子或多或少 - 这是示例：

<div id="post_content"> 
<img src="image1.jpg" class="thumb" /> 
<img src="image2.jpg" class="thumb" /> 
<img src="image3.jpg" class="thumb" /> 
</div> 

<div class="showimagediv"></div> 

使用jQuery做到这一点，它工作得很好：

<script> 
$(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> 

但是，我只能显示图像，并将其关闭。但我想让它看起来像使用arrowx的lightbox一样PREV NEXT。

现在的问题是： 我该怎么做？要将下一张图像从同一个div加载到div“showimagediv”中并将image1替换为image2？有没有解决方法？

Answer 1

我认为你正在寻找这样的：

$(document).ready(function() { 
 

 
    $(".showimagediv").html($("img").eq(0).clone()) 
 
    var pos = 0; 
 
    $('#prev').on('click', function() { 
 
     if(pos>0) pos-- 
 
      $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow"); 
 
    }); 
 

 
    $('#next').on('click', function() { 
 
     if(pos<2) pos++ 
 
     $(".showimagediv").hide().html($("img").eq(pos).clone()).fadeIn("slow"); 
 
    }); 
 
    
 
    $('.showimagediv').on('click', function() { 
 
     $(this).hide(); 
 
    }); 
 
});

.img1{ 
 
width: 50px; 
 
height: 50px; 
 
} 
 
.img2{ 
 
width: 70px; 
 
height: 70px; 
 
} 
 
.img3{ 
 
width: 90px; 
 
height: 90px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="post_content"> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img1" /> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img2" /> 
 
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="thumb img3" /> 
 
</div> 
 
<button id="prev">Prev</button> 
 
<button id="next">Next</button><br><br> 
 
<span></span> 
 
<div class="showimagediv"></div>