Davide Caffaratti blog

Little optimization for the class code and add optional transation for the images.

Add example in the zip file

VIEW THE EXAMPLE FILE

I’ve see a very nice slideshow used for Jomla and want to use in my sites, but, the nice class was for mootools 1.1 … Here is the ported version for this nice slideshow

Correction for the swap images class:
Change the preload images at line 33

imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

with

imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});

Here is my Mootools class that I use for swap the source of an image with the

same filename + ‘_over’ before the extension (‘img.jpg’ will be
‘img_over.jpg’) work fine in firefox3, safari for windows, internet explorer 7.
Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooSwap class

The class:

var MooSwap = new Class({

//implements
Implements: [Options],

options: {
imgHoverPrefix: '_hover'
},

initialize: function(elements, options) {
//set options
this.setOptions(options);
// Set elements
this.setSwap(elements);
},

setSwap: function(elements) {

var prefix = this.options.imgHoverPrefix;

// preload images array
imgTemp = [];
i = 0;

$$(elements).each(function(el) {
var mouseFx = new Fx.Tween(el, {duration: 240, wait: false});

var holdSrc = el.getProperty('src');
var extension = holdSrc.substring(holdSrc.lastIndexOf('.'),holdSrc.length);
var newSrc = holdSrc.replace(extension, prefix + '' + extension);

// set new image for preloading
imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});
//imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

// default link on current img element
var link = el;

// check if there is a link a href parent
var test = el.getParent('a');
if (test) {
var link = test.setProperty('id', '__link_' + i);
}

link.addEvents({
mouseover: function() {
el.setProperty('src', newSrc);
},
mouseout: function() {
el.setProperty('src', holdSrc);
}
});

i++;
});
}
});

The javascript in the page:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
var swap = new MooSwap('.fade img', { imgHoverPrefix:'_hover' });
});
//]]>
</script>

The html

<ul class="fade">
<li><img src="my-image.jpg" alt="my title" /></li>
<li><a href="http://mylink/"><img src="my-image-1.jpg" alt="my title 1" /></a></li>
</ul>

Need to have valid
my-image_hover.jpg and my-image-1_hover.jpg

That’s all