wordpress(pods)のカスタム投稿タイプで動作することがわかったjQuery画像スライダーのコードを使用しています。スライダーは完全に機能していますが、画像の数に基づいてユーザーが次の画像にスクロールできる回数を制限する必要があります。
<script type="text/javascript">
$(function() {
$("img.enlarge").live('click', function (e) {
e.preventDefault();
var src = this.src;
$("#fullImage").attr("src", src);
});
});
$(document).ready(function() {
$('img').filter(function(index){return $(this).attr('src')==='';}).removeClass('enlarge');
$('img').filter(function(index){return $(this).attr('src')==='';}).hide();
var $item = $('img.enlarge'), //Cache your DOM selector
visible = 1, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) ; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
$item.animate({'left':'-=275px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
$item.animate({'left':'+=275px'});
}
});
});
</script>
<div class="detail-slider-thumbs" id="detail-images">
<img class="enlarge" src="{@main_image}"/>
<img class="enlarge" src="{@image_2}"/>
<img class="enlarge" src="{@image_3}"/>
<img class="enlarge" src="{@image_4}"/>
<img class="enlarge" src="{@image_5}"/>
</div>
したがって、ユーザーが 4 つの画像のみをアップロードする場合、現在のように空白の画像スポットにスクロールするだけでなく、その数に動的に応答するコードが必要です。