0

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 つの画像のみをアップロードする場合、現在のように空白の画像スポットにスクロールするだけでなく、その数に動的に応答するコードが必要です。

4

0 に答える 0