2010-12-08 1 views
1

Привет, Я создаю jquery carosuel для видео-галереи. Мне нужно создать для этого разбивку на страницы. Я уже создал это, но это не genric-скрипт для разбивки на страницы. Я жестко закодировал объект Pagination в скрипте. Я хочу сделать это genric, чтобы я мог использовать это несколько раз на одной странице. даже неспособный получить доступ к целевому объекту карусели.jQuery carosuel pagination?

Для Eg

Всего Деталь 12 Scroll Item: - 3 во время Pagination Шоул быть - 1, 2,3,4 (4 х 3 = 12)

Если кто-то может мне помочь на этом. Заранее спасибо

Источник http://sorgalla.com/jcarousel/

здесь код

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; 
         }) 
        }); 
      } 

Здесь Html

<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> 
+1

любой пример jcarosuel пагинацией – Nidhi 2010-12-08 20:16:53

ответ

3

Вот скрипт для создания PAGINATION

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)) 
           } 
          }) 
         }); 
       }, 

 Смежные вопросы

  • Нет связанных вопросов^_^