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 に答える