在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按鈕

回答

相關問題