JQuery: несколько скроллеров миниатюр без дублирования JavaScript - PullRequest
Новая
       6

JQuery: несколько скроллеров миниатюр без дублирования JavaScript

0 голосов
/ 09 апреля 2011

Я работал над сценарием автоматической прокрутки миниатюр. Кто-нибудь может подсказать, как я мог бы иметь несколько версий скроллера без необходимости дублировать JavaScript. Было бы здорово, если бы я мог сделать код универсальным, но каким-то образом указать идентификаторы DIVS, в которых должен работать скроллер миниатюр, возможно, в переменной. Помощь будет очень ценится! :)

Здесь это на JSFiddle.

Вот как выглядит JavaScript: 

$(function() {
    buildThumbs();

    function buildThumbs() {
        $('div.album').each(function() {
            var width = 0;

            var wrapper = $(this).find('.st_thumbs_wrapper');
            wrapper.find('.st_thumbs a').each( function() {
                width += $(this).outerWidth(true);
            });

            var thumbs = $(this).find('.st_thumbs');
            thumbs.css('width', width + 'px');

            makeScrollable(thumbs, wrapper);
        });
    }

    function makeScrollable(thumbs, wrapper) {
        var width = wrapper.innerWidth();

        wrapper.scrollLeft(0);

        var leftBuffer = 200;
        var rightBuffer = 200;

        //When user move mouse over menu
        wrapper.unbind('mousemove').bind('mousemove', function(e) {
            var xPos = e.pageX - wrapper.offset().left - leftBuffer;
            var xMax = wrapper.innerWidth() - rightBuffer;
            if(xPos > 0 && xPos < xMax) {
                var perc = xPos / (xMax - leftBuffer);
                var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
                wrapper.scrollLeft(perc * scrollAmt);
            }
        });
    }
});

1 Ответ

0 голосов
/ 09 апреля 2011

Удалить абсолютное позиционирование из вашего CSS. Работает нормально.

http://jsfiddle.net/kFDMN/

Если вам нужно позиционирование, тогда вам нужно использовать его в дополнительном контейнере или использовать wrapAll('<div>') в вашем jQ для его динамического добавления.

...