开发者

jQuery carousel pagination?

I am creating jquery carousel for video gallery. I need to create a pagination for this. I have already created this but that is not genric script for pagination I have hard coded the Pagination object in script. I want to make it genric so that i can use this multiple time on same page. even not able to access the target object of carousel.

For E.g

Total Item is 12 Scroll Item :- 3 at time Pagination shoul be - 1, 2,3,4 (4 x 3 =12)

If someone can help me on this. Thanks in advance

Source http://sorgalla.com/jcarousel/

here is code

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

This script creating pagination

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

Here is 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>


Here is script for making 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))
                                }
                            })
                        });
                },
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜