1

我一直在研究 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 内容加载已完成。”

4

1 回答 1

0

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

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

于 2010-01-17T14:56:29.060 回答