Назначение переменной jScrollPane scrollByX в горизонтальной прокрутке изображения? - PullRequest
Новая
       29

Назначение переменной jScrollPane scrollByX в горизонтальной прокрутке изображения?

2 голосов
/ 04 января 2012

Я использую jScrollPane для создания горизонтального скроллера изображений с изображениями различной ширины на http://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.html.

Я бы хотел, чтобы полоса прокрутки двигалась вперед и назад по ширине каждого изображения при каждом нажатии.стрел.В идеале я бы хотел перетащить полосу прокрутки, чтобы сделать это, но мои знания jQuery в лучшем случае шатки, поэтому я просто был бы доволен функциональностью щелчка.Я достиг этого только благодаря stackoverflow и документации разработчика.

Я чувствую, что решение смотрит на меня, но я не могу этого добиться.

Потому что я хочускроллер должен быть гибким, и я не всегда буду знать точные размеры изображений моего клиента, поскольку они обновляют скроллер, я использую цикл .each, чтобы циклически проходить по изображениям в div .image-wrapper, вытягивать ширинудля каждого изображения и присвойте значение общей ширины переменной var imagesWidth, чтобы установить ширину в .image-wrapper: 

// set the width of .image-wrapper based on the total width of the images in the div
// webkit browsers need width declared explicitly in image tag
var imagesWidth = 0;
var imageScrollX = 0;
$('.image-wrapper > img').each(function(index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($image.css('margin-left'), 10) + parseInt($image.css('margin-right'), 10);
    imageScrollX = $image.outerWidth();
});             
$('.image-wrapper').width(imagesWidth);

Это прекрасно работает.Я пытаюсь использовать один и тот же цикл, чтобы назначить ширину каждого изображения для var imageScrollX, и использовать эту переменную для определения значения X scrollByX при каждом клике: 

var api = pane.data('jsp');                     
$('#left-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(-imageScrollX);                       
        return false;
    }
);
$('#right-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(imageScrollX);
        return false;
    }
);

Это вид работает, но происходит то, что значение scrollByX назначает ширину последнего изображения в последовательности для каждого клика.Любая идея, как я могу получить щелчок, чтобы вытянуть уникальную ширину каждого изображения в последовательности, а не только последнее изображение в последовательности?

Рабочий файл с видимым кодом в http://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.html

...