MooTools 幻灯片和 Spry 选项卡

Question

我是这个论坛的新手，我为客户构建的网站遇到了一个棘手的问题。我的 MooTools 幻灯片播放遇到问题。我的页面有 4 个 Spry 选项卡，其中 3 个有幻灯片。我已经为多个幻灯片设置了页面，但只有第一个选项卡可以正常工作。这是我遇到的两个问题：

1. 缩略图在第一个选项卡上正常工作，但对于其他选项卡，它们似乎彼此堆叠，并且当您将鼠标悬停时会颤动。

2. 当您切换到不同的选项卡时，您会在幻灯片屏幕的右上角看到一个较小的照片伪影，持续几秒钟（我有一种感觉，当问题 1 解决后，这种情况就会消失）。

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

作为 js 实现者而不是编码器，我真的不知道如何完成此操作，甚至不知道它是否有效。如何在选项卡可见性上初始化每个幻灯片？

您可以在此处查看该网站： 任何

帮助都会是赞赏！

谢谢，内克塔尔 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>