MooTools Slideshow

When implementing a simple slideshow using the MooTools JavaScript library, problems can occur with newer Joomla installations and, consequently, newer versions of the MooTools library. In MooTools version 1.4.0 and later, the "setters" syntax, such as Element.setOpacity() and Element.set('opacity'), is no longer supported.

 

The only correct syntax is now

 

Element.setStyle('opacity')

 

or, for example:

 

Element.setStyle('opacity',0)

 

Continuing to use the old syntax causes the slider images to not be hidden initially as intended (with the exception of the first slide). As a result, the last image is displayed as the "first" image because it is positioned above all the others. Using the new syntax produces the desired result. If you have also integrated lightbox functionality, it is even better to hide the images (except for the first slide) using

 

img.set('tween', {duration:0}).fade('out');

 

because Element.setStyle('opacity',0) alone does not affect the first element ("fade('out')" additionally sets visibility:hidden).

 

The same applies to "getters" from MooTools 1.4 onwards!

 

Tested with Joomla 3.6.3.