I’ve been working on a thumbnail auto scrolling script. Could anyone suggest how I

Question

0

Asked: May 21, 20262026-05-21T04:20:22+00:00 2026-05-21T04:20:22+00:00

I’ve been working on a thumbnail auto scrolling script. Could anyone suggest how I

0

I’ve been working on a thumbnail auto scrolling script.
Could anyone suggest how I could have multiple versions of the scroller without having to duplicate the JavaScript. It would be great if I could make the code generic, but somehow specify the ID’s of DIVS in which the thumbnail scroller is to work, maybe in a variable. Help would be very much appreciated! 🙂

Here it is on JSFiddle.

Here is what the JavaScript looks like:

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