Question

I have been working on an integration of SmoothScrollDiv with Galleria.. – to scroll the thumbnails.

demo of my code here: http://test.kinkylemon.nl/sym/galleria/demo3.htm

I have a problem that when the browser window is resized,
SmoothScrollDiv is no longer correctly bound to the DOM …or
something like that ! – it stops working.

also similar bug in IE6 at page load (with an empty cache).

so Question A. do i need to use bind() or live() somehow?

    $(function($) { $('ul#gallery').galleria({
            history   : false, // activates the history object for bookmarking, back-button etc.
            clickNext : true, // helper for making the image clickable
            insert    : '#galleriaContentBox', // the containing selector for our main image
            onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

                // fade in the image & caption
                if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
                    image.css('display','none').fadeIn(1000);
                }

                // fetch the thumbnail container
                var _li = thumb.parents('li');

                // fade out inactive thumbnail
                _li.siblings().children('img.selected').fadeTo(500,0.3);

                // fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');

                // this will add a class to landscape images allowing extra margin
                if (image.height() < image.width()) {
                    $('#galleriaContentBox').addClass('landscape');
                } else {
                    $('#galleriaContentBox').removeClass('landscape');
                }

            },
            onThumb : function(thumb) { // thumbnail effects goes here

                // fetch the thumbnail container
                var _li = thumb.parents('li');

                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.3';

                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
                )
            }
        });
    });


    $(document).ready(function() {
        //$(function() {
            $("div#smallScroller").smoothDivScroll({
                scrollableArea: "ul.scrollableArea", //The identifier of the actual element that is scrolled left or right.
                mouseDownSpeedBooster: 2,
                scrollingSpeed: 25,
                autoScrollDirection: 'endlessloop'
                //visibleHotSpots: 'always'
            });
        //});
    });

.. and Question B. … I just saw the following at: http://maaki.com/thomas/SmoothDivScroll/
– is this the problem ? – should I just use a different plugin? ..maybe rebuild with jCarousel

“Smooth Div Scroll doesn’t recalculate the scrollable area. The
recalculation is done first when the user resizes the browser window.
Looking at the source code there’s a function called
“windowIsResized”. This is triggered when the user resizes the browser
window and it (among other things) properly recalculates the width of
the scrollable area. The code should be rewritten with a general
function that “reinitializes” the scroller. This function should be a
part of the public API so it can be called by the developer after an
AJAX content load has been done.”

Answer 1

Question B was the right one – the problem was that the SmoothDivScroll plugin needs an update to its windowIsResize function

I rebuilt with jCarousel – works nice. Still looking for a way to replicate the mouseover functionality achieved with SmoothDivScroll – is not possible with jCarousel it seems..