2010-12-08 4 views
1

こんにちは、ビデオギャラリー用のjquery carosuelを作成しています。私はこれのためのページネーションを作成する必要があります。 私はすでにこれを作成しましたが、それはページング用のジェネリックスクリプトではありません。私はスクリプト内でページネーションオブジェクトをハードコードしました。私は同じページにこの複数の時間を使用できるようにgenricにしたいです。 carosuelのターゲットオブジェクトにアクセスすることさえできません。例:についてはjQuery carosuelページネーション?

総項目は12 スクロールアイテムである: - 3時間 で改ページがあることshoul - 1、2,3,4は(4×3 = 12)

誰かが私を助けることができる場合これに。事前に おかげ

出典ここ http://sorgalla.com/jcarousel/

<ul class="carosuelList"> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                 </ul> 
                 <ul class="hmPagination"><li></li></ul> 
Htmlの

コード

Script for init jquery carosuel 
      slidingCarosuel:function(getElements,paginationNum){ 
       var myCarousel=jQuery(getElements); 
       if (myCarousel) { 
        jQuery(myCarousel).jcarousel({ 
         scroll: paginationNum, 
         initCallback:clasohlson.carosuelPagination 
        }); 
       } 
      } 

このスクリプトの作成ページネーションここ

carosuelPagination:function(carousel) { 
        _scrolls=carousel.options.scroll; 
        carousel.options.scroll = jQuery.jcarousel.intval(_scrolls); 
        var noLi = carousel.options.size; 
        var requiredLi = Math.ceil(noLi/_scrolls); 
        for (var i = 0; i < requiredLi; i++) { 
         var count = i + 1; 
         var liSrting = "<li>" + count + "</li>"; 
         $(".hmPagination").append(liSrting); 
        } 
        if (noLi <= _scrolls) { 
         $(".hmPagination").hide(); 
         $(".jcarousel-prev").hide(); 
         $(".jcarousel-next").hide(); 
        } 
        else { 
         //$(".hmPagination").show().text(""); 
         $(".jcarousel-prev").show(); 
         $(".jcarousel-next").show(); 
        } 
        $(".hmPagination").children(":first").addClass("selected"); 
        $(".jcarousel-next").click(function() { 
         $(".hmPagination").find("li.selected").next().addClass("selected"); 
         $(".hmPagination").find("li.selected:last").prev().removeClass("selected"); 
        }) 
        $(".jcarousel-prev").click(function() { 
         $(".hmPagination").find("li.selected:last").prev().addClass("selected"); 
         $(".hmPagination li.selected").next().removeClass("selected") 
        }) 
        $('.hmPagination li').each(function() { 
         $(this).bind("click", function() { 
          $('.hmPagination li').removeClass("selected"); 
          $(this).addClass("selected"); 
          var noClick = parseInt($(this).text()); 
          var remain = noLi % 1; 
          if ($(this).text() == "1") { 
           carousel.scroll(jQuery.jcarousel.intval(1)) 
          } 
          if (remain == 0) { 
           var ulLi = $("ul.pagination li").length 
           var scrollNo = ((noClick - 1) * 1) + 1 
           carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
          } else { 
           var scrollNo = ((noClick - 1) * 1) + 1 
           carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
          } 
          //carousel.scroll(jQuery.jcarousel.intval(firstItem)); 
          // return false; 
         }) 
        }); 
      } 

されていますここ

+1

jcarosuelページネーションのいずれかの例を作成するためのスクリプトです – Nidhi

答えて

3

改ページ

carosuelPagination:function(carousel) { 
         tempVar=carousel.list[0]; 
         idx=jQuery(tempVar).attr("id"); 
         _scrolls=carousel.options.scroll; 
         carousel.options.scroll = jQuery.jcarousel.intval(_scrolls); 
         pagination='<ul class="pagination"></ul>'; 
         var noLi = carousel.options.size; 
         jQuery("#"+idx).parents(".smallCarosuelbox").append(pagination); 
         p=jQuery("#"+idx).parents(".smallCarosuelbox").find(".pagination"); 
         var requiredLi = Math.ceil(noLi/_scrolls); 
         for (var i = 0; i < requiredLi; i++) { 
          var count = i + 1; 
          var liSrting = "<li>" + count + "</li>"; 
          p.append(liSrting+""); 
         } 
         if (noLi <= _scrolls) { 
          p.hide(); 
          $(".jcarousel-prev,.jcarousel-next").hide(); 
         } 
         else { 
          $(".jcarousel-prev,.jcarousel-next").show(); 
         } 
         p.find("li:first").addClass("selected"); 
         p.find('li').each(function() { 
          $(this).bind("click", function(e) { 
           jQuery(e.target).parent().find('li').removeClass("selected"); 
           $(this).addClass("selected"); 
           var noClick = parseInt($(this).text()); 
           var remain = noLi % _scrolls; 
           if ($(this).text() == "1") { 
            carousel.scroll(jQuery.jcarousel.intval(1)) 
           } 
           if (remain == 0) { 
            var ulLi = $("ul.pagination li").length 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } else { 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } 
          }) 
         }); 
       }, 
関連する問題