jCarousel, счетчик, как?

Question

Я использую этот плагин: http://sorgalla.com/projects/jcarousel/

Я хочу, чтобы был счетчик, который может отображать: 1 из 4

При нажатии следующей кнопки, он должен сказать: 2 из 4и так далее ...

Сценарий является инициализацией по умолчанию:

<script type="text/javascript">

                            jQuery('#mycarousel').jcarousel();

                        </script>

Однако, не видел пример этого в документации?Так что любая помощь будет оценена ...

Thx

Answer 1

это просто, просто откройте следующий файл:

sites\all\modules\jcarousel\js\jcarousel.js

и в строке 146:

carousel.pageCount =  Math.ceil(itemCount / carousel.pageSize);

измените его на: carousel.pageCount = Math.ceil(itemCount / 1);

это будет работать превосходно: D

Answer 2

jQuery(document).ready(
    function() {
        function mycarousel_initCallback(carousel) {
            // alert(this.mycarousel);   
            // alert("inside carousel");
            // Disable autoscrolling if
            // the user clicks the prev
            // or next button.
            carousel.buttonNext.bind('click', function() {
                carousel.startAuto(0);
            });

            carousel.buttonPrev.bind('click', function() {
                carousel.startAuto(0);
            });

            // Pause autoscrolling if
            // the user moves with the
            // cursor over the clip.
            carousel.clip.hover(
                function() {
                    carousel.stopAuto();
                },
                function() {
                    carousel.startAuto();
            });
        }

        jQuery('#mycarousel').jcarousel({
            auto : 2,
            scroll : 1,
            wrap : 'last',
            initCallback : mycarousel_initCallback,
            itemFallbackDimension: 300,
            //size: mycarousel_itemList.length, 
            itemFirstInCallback:mycarousel_itemFirstInCallback 
            // itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback} 
        });
    });

    $(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");

    function display(s) { 
        $('#myHeader').html(s); 
    }; 

    function mycarousel_itemFirstInCallback(carousel, item, idx, state) { 
        display( idx +"<i> of </i>"+ $("#mycarousel li").length); 
    }; 

Answer 3

Должно быть невозможно понять, что там дано.Так как это просто ul, которое скрыто за div и только элемент ul прокручивается при нажатии на кнопку.

Нет семантического свойства, которое вы могли бы использовать для идентификации видимого в данный момент объекта.

Answer 4

Использует что-то вроде этого:

$(document).ready(function () {
    var nmrElements = $('#mycarousel').children('li').length;

    $('#mycarousel').jcarousel({
        scroll: 1,
        itemLoadCallback: function (instance, controlElement) {
            if (instance.first != undefined) {
                $('#label').html(instance.first + ' of ' + nmrElements);
            }
        }
    });
});

Answer 5

Вы можете назначить id -s для каждого изображения в карусели. И добавьте javascript, чтобы написать число из id этих изображений.

А также:

<script type="text/javascript">
function Callback_function(elem) {
    document.write(this.id);    
}

jQuery('#mycarousel').jcarousel({
    scroll: 1,
    initCallback: Callback_function,
});
</script>