0

I'm new to this forum and I have a sticky problem with the website that I'm building for my client. I am having trouble with my MooTools Slideshow. I have a page with 4 Spry tabs and 3 of them have slideshows. I've set up the page for multiple slideshows, but only the first tab works correctly. These are 2 issues I'm having:

  1. The thumbnails work properly for the first tab, but for the other tabs they seem to stack upon one another and flutter when you mouseover.

  2. When you switch to a different tab, you get a smaller photo artifact for a couple of seconds in the right corner of the slideshow screen (I have a feeling this will go away when #1 is resolved).

I was given this help from another forum: The issue is probably that slideshow can't calculate dimensions properly when it is hidden. It's really a general issue with javascript/DOM-manipulation: when an element is set as display:none - like the hidden tabs - nodes inside of them have no height/width. The workaround would be to initialize each slideshow once the tab is visible.

Being a js implementer and not a coder, I don't really know how to accomplish this or even if it will work. How would I initialize each slideshow on tab visibility?

Here is where the website can be viewed: http://www.interimdesigngroup.com/threesprings/area.shtml

Any help would be appreciated!

Thanks, Nektar 72

Nektar72
  • 3
  • 1
  • Well first things first, are you using Firefox or chrome or safari? Something with a good debugging tool? If no download Firefox and install firebug. Than click on the link you provided and fix this error: data is not defined [Break On This Error] new Slideshow('noOverlap', data, { ... false, resize: 'fit', width: 400 }); http://www.interimdesigngroup.com/threesprings/area.shtml on line 76. Hint the variable data is not being set up you are setting up data1, data2, data3 – Tim Wickstrom Dec 14 '11 at 23:46
  • Tim, I guess I don't understand how firebug works with finding errors. I just use it to check CSS. That line that you mentioned is part of the script I've decided not to use. I've deleted it and of course it has no effect on the problem at hand. Any more suggestions? – Nektar72 Dec 15 '11 at 20:37
  • Working with JS it is almost impossible to do anything of substance without knowing how to debug and optimize. Do not initiate all slideshows at once, initiate them when the tab comes into focus, destroy them/pause them when a tab looses focus. Find a mootools tab menu to limit the amount of JS lib you need, so much going on here its hard to guide you where to start, hope this helps. – Tim Wickstrom Dec 15 '11 at 21:12
  • I know, it's probably a mess from a programming standpoint. I just pick and choose what I need for the site and hope for the best! I use the Spry tabs that come with Dreamweaver and I'd rather not change over and restyle the whole website. This is that last problem before I hand it over to my client and I'd like to do that today if possible! I'm despirately trying to give myself a crash course in JS just to finish the thing. How would I write something like what you described without switching to MooTools tabs? SpryTabbedPanels.js is for the panels, slideshow.js is for the slideshow. – Nektar72 Dec 15 '11 at 21:52
  • @TimWickstrom.com I added this to the beginning of the addEvent script: if ('TabbedPanelsTabFocused') {... and it still works the way it was. The thumbnails on the 2nd and 3rd slideshows aren't working. – Nektar72 Dec 15 '11 at 22:13

1 Answers1

0

Replace slideshow initialization for all three tabs with the following:

<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>
Tim Wickstrom
  • 5,476
  • 3
  • 25
  • 33