當點擊按鈕

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>