Слайд-шоу MooTools и вкладки Spry - PullRequest
Новая
       29

Слайд-шоу MooTools и вкладки Spry

0 голосов
/ 15 декабря 2011

Я новичок в этом форуме, и у меня есть проблема с веб-сайтом, который я создаю для своего клиента.У меня проблемы с моим слайд-шоу из MooTools.У меня есть страница с 4 вкладками Spry, и у 3 из них есть слайд-шоу.Я настроил страницу для нескольких слайд-шоу, но правильно работает только первая вкладка.У меня есть 2 проблемы:

  1. Миниатюры работают правильно для первой вкладки, но для других вкладок они, кажется, накладываются друг на друга и трепетают при наведении курсора.

  2. Когда вы переключаетесь на другую вкладку, в течение нескольких секунд в правом углу экрана слайд-шоу появляется артефакт меньшего размера (у меня есть ощущение, что это исчезнет, ​​когда № 1 будетрешен).

Мне помогла эта помощь с другого форума: Возможно, проблема в том, что слайд-шоу не может правильно рассчитать размеры, когда оно скрыто.Это действительно общая проблема с манипулированием Javascript / DOM: когда элемент установлен как display: none - как скрытые вкладки - узлы внутри них не имеют высоты / ширины.Обходной путь может заключаться в инициализации каждого слайд-шоу, как только вкладка станет видимой.

Будучи разработчиком js, а не кодером, я действительно не знаю, как это сделать, и даже если он будет работать.Как бы я инициализировал каждое слайд-шоу на вкладке видимости?

Здесь можно просмотреть веб-сайт: http://www.interimdesigngroup.com/threesprings/area.shtml

Любая помощь будет оценена!

Спасибо, Nektar 72

1 Ответ

0 голосов
/ 20 декабря 2011

Заменить инициализацию слайд-шоу для всех трех вкладок следующим: 

<script>
    var activeSlideShow = false;
    var activateSlideShow = function(el) {
        if(activeSlideShow) {
            activeSlideShow.destroy();
        }
        switch(el.getProperty('tabindex')){
            case '0':
                activeSlideShow = new Slideshow('balch',
                    {
                        '1.jpg': { caption: '' },
                        '2.jpg': { caption: '' },
                        '3.jpg': { caption: '' }, 
                        '4.jpg': { caption: '' }, 
                        '5.jpg': { caption: '' }, 
                        '6.jpg': { caption: '' }, 
                        '7.jpg': { caption: '' }, 
                        '8.jpg': { caption: '' }, 
                        '9.jpg': { caption: '' }, 
                        '10.jpg': { caption: '' }, 
                        '11.jpg': { caption: '' }
                    }, 
                    {
                        captions: { delay: 1000 },
                        delay: 3000,
                        height: 467,
                        hu: 'images/balch/',
                        width: 350
                    }
                );
            break;
            case '3':
                activeSlideShow = new Slideshow('poi', 
                    {
                        '1.jpg': { caption: 'Blue Ridge' }, 
                        '2.jpg': { caption: 'Blue Ridge' }, 
                        '3.jpg': { caption: 'Blue Ridge' }, 
                        '4.jpg': { caption: 'Blue Ridge' }, 
                        '5.jpg': { caption: 'Blue Ridge' }, 
                        '6.jpg': { caption: 'Blue Ridge' }, 
                        '7.jpg': { caption: 'Grouse Valley' }, 
                        '8.jpg': { caption: 'Grouse Valley' },
                        '9.jpg': { caption: 'Grouse Lake' },
                        '10.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '11.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '12.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '13.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '14.jpg': { caption: 'Tule River' }, 
                        '15.jpg': { caption: 'Tule River' }, 
                        '16.jpg': { caption: 'Tule River' }, 
                        '17.jpg': { caption: 'Tule River' }, 
                        '18.jpg': { caption: 'Tule River' }, 
                        '19.jpg': { caption: 'Tule River' }, 
                        '20.jpg': { caption: 'Tule River' }, 
                        '21.jpg': { caption: 'Tule River' }, 
                        '22.jpg': { caption: 'Tule River' }, 
                        '23.jpg': { caption: 'Dome Rock' }
                    },
                    {
                        captions: { delay: 1000 },
                        delay: 3000, 
                        height: 300, 
                        hu: 'images/poi/', 
                        width: 400 
                    }
                );
            break;
            case '1':
            default:
                activeSlideShow = new Slideshow('springville',
                    {
                        '1.jpg': { caption: '' }, 
                        '2.jpg': { caption: '' }, 
                        '3.jpg': { caption: '' }, 
                        '4.jpg': { caption: '' }, 
                        '5.jpg': { caption: '' }, 
                        '6.jpg': { caption: '' }, 
                        '7.jpg': { caption: '' }, 
                        '8.jpg': { caption: '' }, 
                        '9.jpg': { caption: '' }, 
                        '10.jpg': { caption: '' }, 
                        '11.jpg': { caption: '' }, 
                        '12.jpg': { caption: '' }, 
                        '13.jpg': { caption: '' }
                    }, 
                    { 
                        captions: { delay: 1000 }, 
                        delay: 3000, 
                        height: 300, 
                        hu: 'images/springville/', 
                        width: 400 
                    }
                );
            break;
        }
    }
    window.addEvent('domready', function(){
        var tabs = $$('#TabbedPanels1 ul li');
        tabs.addEvent('click', function(e){
            activateSlideShow(this);
        });
        activateSlideShow(tabs[0]);
    });
</script>
...