Интеграция Galleria с плагином SmoothDivScroll - PullRequest
Новая
       23

Интеграция Galleria с плагином SmoothDivScroll

1 голос
/ 15 января 2010

Я работал над интеграцией SmoothScrollDiv с Galleria .. - для прокрутки миниатюр.

демо моего кода здесь: http://test.kinkylemon.nl/sym/galleria/demo3.htm

У меня проблема в том, что при изменении размера окна браузера SmoothScrollDiv больше не правильно привязан к DOM ... или что-то вроде того ! - перестает работать.

также похожая ошибка в IE6 при загрузке страницы (с пустым кешем).

поэтому Вопрос А. Нужно ли мне как-то использовать 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'
            });
        //});
    });

.. и Вопрос Б. ... Я только что увидел следующее по адресу: http://maaki.com/thomas/SmoothDivScroll/ - это проблема? - я должен просто использовать другой плагин? .. возможно перестроить с помощью jCarousel

"Smooth Div Scroll не пересчитывает прокручиваемую область. Сначала выполняется пересчет, когда пользователь изменяет размер окна браузера. Глядя на исходный код, есть функция под названием "WindowIsResized". Это срабатывает, когда пользователь изменяет размер браузера окно и оно (среди прочего) правильно пересчитывает ширину прокручиваемая область. Код должен быть переписан с общим функция, которая "повторно инициализирует" скроллер. Эта функция должна быть часть публичного API, поэтому он может вызываться разработчиком после Загрузка содержимого AJAX выполнена. "

1 Ответ

0 голосов
/ 17 января 2010

Вопрос B был верным - проблема была в том, что плагину SmoothDivScroll необходимо обновить функцию windowIsResize

Я перестроил с помощью jCarousel - работает хорошо. Все еще ищите способ повторить функциональность наведения мыши, достигнутую с SmoothDivScroll - невозможно с jCarousel, кажется ..

...