Question

我是这个论坛的新手，我在为我的客户建立的网站上遇到了一个棘手的问题。我的MooTools幻灯片显示有问题。我有一个包含4个Spry标签的页面，其中3个有幻灯片。我已经为多个幻灯片设置了页面，但只有第一个选项卡正常工作。这是我遇到的两个问题：

缩略图适用于第一个标签，但对于其他标签，它们似乎相互堆叠并在鼠标悬停时颤动。
当你切换到另一个标签时，你会在幻灯片放映屏幕的右下角获得一个较小的照片神器几秒钟（我感觉这会在＃1解决时消失）。< / p>

我从另一个论坛得到了这个帮助：问题可能是幻灯片在隐藏时无法正确计算尺寸。这是javascript / DOM-manipulation的一个普遍问题：当一个元素被设置为display：none时 - 就像隐藏的标签一样 - 它们内部的节点没有高度/宽度。解决方法是在选项卡可见后初始化每个幻灯片。

作为一名js实施者而不是编码员，我真的不知道如何实现这一点，即使它能够发挥作用。如何在标签可见性上初始化每个幻灯片？

以下是可以查看网站的位置： http://www.interimdesigngroup.com/threesprings/area.shtml

任何帮助将不胜感激！

谢谢，Nektar 72

Answer 1

使用以下内容替换所有三个选项卡的幻灯片显示初始化：

<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>

MooTools幻灯片和Spry标签

1 个答案: