Question

我一直致力于将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不会重新计算可滚动区域当用户调整浏览器窗口大小时，首先进行重新计算。查看源代码，有一个名为的函数 “windowIsResized”。当用户调整浏览器大小时会触发此操作窗口和它（以及其他东西）正确地重新计算宽度可滚动区域。应该用一般的代码重写代码 “重新初始化”滚动条的功能。这个功能应该是一个部分公共API，因此开发人员可以在调用之后调用它 AJAX内容加载已经完成。“

Answer 1

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

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

将Galleria与SmoothDivScroll插件集成

1 个答案: