将 Galleria 与 SmoothDivScroll 插件集成答案

【问题标题】：Integrating Galleria with SmoothDivScroll plugin将 Galleria 与 SmoothDivScroll 插件集成
【发布时间】：2011-01-05 14:38:34
【问题描述】：

我一直致力于将 SmoothScrollDiv 与 Galleria 集成。- 滚动缩略图。

我的代码演示在这里：http://test.kinkylemon.nl/sym/galleria/demo3.htm

我有一个问题，当浏览器窗口调整大小时， SmoothScrollDiv 不再正确绑定到 DOM ...或类似的东西！ - 它停止工作。

在页面加载时 IE6 中也有类似的错误（缓存为空）。

所以问题 A. 我需要以某种方式使用 bind() 或 live() 吗？

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

.. 和问题 B.... 我刚刚看到以下内容：http://maaki.com/thomas/SmoothDivScroll/ - 这是问题吗？ - 我应该只使用不同的插件吗？ ..也许用 jCarousel 重建

"Smooth Div Scroll 不会重新计算可滚动区域。当用户调整浏览器窗口大小时，首先进行重新计算。查看源代码有一个名为 “窗口大小调整”。当用户调整浏览器大小时触发窗口，它（除其他外）正确地重新计算宽度可滚动区域。代码应该用通用重写 “重新初始化”滚动条的函数。这个函数应该是公共 API 的一部分，因此开发人员可以在 AJAX 内容加载已完成。”

【问题讨论】：

标签： jquery scroll thumbnails galleria

【解决方案1】：

问题 B 是正确的 - 问题在于 SmoothDivScroll 插件需要更新其 windowIsResize 函数

我使用 jCarousel 进行了重建 - 效果很好。仍在寻找一种方法来复制使用 SmoothDivScroll 实现的鼠标悬停功能 - 似乎 jCarousel 无法实现..

【讨论】：