Hello all,
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:
-
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.
-
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).
Here is where the website can be viewed: http://www.interimdesigngroup.com/threesprings/area.shtml
I was these 2 bits of 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.
Do not initiate all slideshows at once, initiate them when the tab comes into focus, destroy them/pause them when a tab loses focus.
I don’t know how to initiate the slideshow on tab focus.
Any help would be appreciated!