jscrollPane autoReinitialise не работает для горизонтального скроллера - PullRequest
Новая
       32

jscrollPane autoReinitialise не работает для горизонтального скроллера

1 голос
/ 17 марта 2012

У меня возникли проблемы с повторной инициализацией горизонтальной jScrollPane.Когда страница загружает 4 изображения, которые загружаются динамически, и когда пользователь прокручивает на панели, должны отображаться следующие 4 изображения, этого не происходит, следующие изображения есть, но размер .jspPane остается тем же, поэтому он не позволяетчтобы прокрутить панель больше.

Вот код: 

$(function()
        {
            var pane = $('.scroll-pane');
            pane.jScrollPane({showArrows: true,autoReinitialise: true});
            var contentPane = pane.data('jsp').getContentPane();
            var api = pane.data('jsp');
            var $rowItems = $('<p></p>');
            var showItems = 4;
            var startItem = 0;
            var itemWidth = 100;

            contentPane.append($rowItems)

            getThumbnails(startItem);

             pane.scroll(function(){
                var paneWidth = $(this).width();
                var contentWidth = $rowItems.width();
                var scrollPosition = Math.abs(parseInt($('.jspPane').css('left')));
                console.log(contentWidth - paneWidth - scrollPosition);
                if ((contentWidth - paneWidth - scrollPosition) < 10){                      
                    startItem = startItem + showItems;
                    getThumbnails(startItem);
                }
            })

            function getThumbnails(n){
                $.ajax({
                    url : 'items.xml',
                    success : function(data){                   
                        for( var i = n; i< n + showItems; i++){
                            $rowItems.append('<a href="'+ $(data).find('item').eq(i).attr('thumb') +'" id="pic'+ i +'"></a>');
                            loadImageThumb($(data).find('item').eq(i).attr('thumb'), $(data).find('item').eq(i).attr('imageUrl'),$(data).find('item').eq(i).find('description').text(), i);                 

                        }

                    }               
                })
            }

            function loadImageThumb(thumb, img, description, i){                    
                var image = new Image();                                                    
                $(image).load(function(){
                    var height = 80,
                        $pic = $('#pic'+ i, $rowItems),
                        imgURL = $pic.attr('href');                                
                    $pic.attr('href',imgURL);                           
                    $(this).appendTo($pic).hide().fadeIn('slow');

                }).attr('src', thumb);

            }


        });

Я использовал аналогичный код для вертикальной полосы прокрутки, и она работала.Большое спасибо за вашу помощь заранее.

1 Ответ

1 голос
/ 19 марта 2012

Я нашел решение для моей проблемы.Необходима ширина каждого элемента.

...