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

-5

我在Wordpress中创建了一种图库。但是，帖子与插件一起列出（它们附在地图上 - WP Google Map），我无法使用任何插件库插件。我只是上传图片，并希望将它们添加到div“showimagediv”。这工作正常，但我不能让PREV/NEXT。在div中显示图像并添加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>

它运作良好，但并没有给我选择对上一页/下一页。

来源

2017-10-16 Toni C

你使用任何收藏夹或类似的显示图像，或者你只是CSSing图像更大？ – Stender

我使用上面的脚本将更大类的图片加载到“showimagediv” –

我想你需要创建自己的“nextSelector”然后 - 和一些自定义jQuery切换到下一个图像 – Stender

这是未经测试的 - 但可能会帮助您明白。

HTML

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

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

来源

2017-10-16 08:08:52 Stender

谢谢。问题是我添加类，但也加载到div的图像。但是，你写的可能是一个解决方案，而不加载到下一个div，但显示大图像 –

还有一个问题。它肯定会将该类添加到“post_content”中的下一个div中？没有任何其他页面中的东西崩溃？ –

这应该将fullImage添加到同一post_content中的下一张图片 - 但它不会转到下一个post_content – Stender

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

回答

相关问题