MooTools 幻灯片和 Spry 选项卡答案

【问题标题】：MooTools Slideshow and Spry TabsMooTools 幻灯片和 Spry 选项卡
【发布时间】：2011-12-14 21:24:51
【问题描述】：

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

缩略图在第一个选项卡上正常工作，但对于其他选项卡，它们似乎相互堆叠并在鼠标悬停时抖动。
当您切换到不同的选项卡时，您会在幻灯片屏幕的右上角看到一个较小的照片伪影，持续几秒钟（我感觉当 #1 解决后这会消失）。

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

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

这里是可以查看网站的地方： http://www.interimdesigngroup.com/threesprings/area.shtml

任何帮助将不胜感激！

谢谢，Nektar 72

【问题讨论】：

首先，您使用的是 Firefox 还是 chrome 或 safari？有一个好的调试工具吗？如果没有下载 Firefox 并安装 firebug。然后单击您提供的链接并修复此错误：数据未定义 [Break On This Error] new Slideshow('noOverlap', data, { ... false, resize: 'fit', width: 400 }); interimdesigngroup.com/threesprings/area.shtml 第 76 行。提示未设置变量数据，您正在设置 data1、data2、data3
Tim，我想我不明白 firebug 如何查找错误。我只是用它来检查 CSS。你提到的那一行是我决定不使用的脚本的一部分。我已经删除了它，当然它对手头的问题没有影响。还有什么建议吗？
使用 JS 几乎不可能在不知道如何调试和优化的情况下做任何实质性的事情。不要一次启动所有幻灯片，当标签进入焦点时启动它们，当标签失去焦点时销毁它们/暂停它们。找到一个 mootools 选项卡菜单来限制您需要的 JS 库的数量，这里发生了很多事情，很难指导您从哪里开始，希望这会有所帮助。
我知道，从编程的角度来看，这可能是一团糟。我只是挑选我需要的网站，并希望最好！我使用 Dreamweaver 附带的 Spry 选项卡，我不想改变和重新设计整个网站。这是我把它交给我的客户之前的最后一个问题，如果可能的话，我想今天就这样做！我拼命地尝试给自己上 JS 速成课程来完成这件事。如果不切换到 MooTools 选项卡，我将如何编写类似于您所描述的内容？ SpryTabbedPanels.js 用于面板，slideshow.js 用于幻灯片。
@TimWickstrom.com 我将此添加到 addEvent 脚本的开头： if ('TabbedPanelsTabFocused') {... 它仍然可以正常工作。第 2 和第 3 幻灯片的缩略图不起作用。

标签： tabs mootools slideshow spry

【解决方案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>

【讨论】：