on 8/6/08 benotero wrote:

I thought I’d post up here how I create image rotators in about 15 minutes.

I first create a new gallery and give it a description of 5 or 10 or some integer. The integer is the number of seconds between image transitions that I want to use. Add the images, link them or not and set the gallery to not display in the gallery (if the site is using photo galleries).

The getContent call I use is below:

<? $rotator = getContent(
'gallery', 'find_gallery:home-page-rotator',
'before_show_gallery:<div id="rotator" class="fade-__description__">',
'show_gallery:<a href="__imagelinkurl__">',
'show_gallery:<img src="__imageurl__" alt="__title__" />',
'show_gallery:</a><!--__imagelinkurl__-->',
'noecho'
);
if($rotator) echo $rotator.'</div><!--#rotator-->';
?>

You can see that the description is added to the rotator div. I use a bit of javascript to detect what comes after the “fade-” part of the class name and use that as the seconds inbetween fade.

The images are wrapped with a link and will work whether the image is linked or not (there may be a better way of doing that).

The next bit is the CSS of the thing. Below is the CSS.
#rotator {
overflow: hidden; margin: 0; position: relative; width: 754px; height: 166px;
}

#rotator img {
border: 0; width: 754px; height: 166px; display:none; position:absolute;
top:0; left:0;
}

And the javascript of course is below.
/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steveslayeroffice.com@

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html@
*/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
if(!d.getElementById || !d.createElement)return;

imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1; i<imgs.length; i++) {
imgs[i].xOpacity = 0;
}
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
var interval = parseInt(document.getElementById('rotator').className.split('-')[1])*1000;
if(imgs.length > 1) setTimeout(so_xfade, interval);
}

function so_xfade()
{
var interval = parseInt(document.getElementById('rotator').className.split('-')[1])*1000;
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade, interval);
}
else
{
setTimeout(so_xfade,50);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}

Hope this can help anyone out there and if there’s an easier way of doing it, I’d love to know.

Ben
Lead Developer
Church Plant Media

Edited by benotero on 8/6/08

on 8/7/08 mjatharvest wrote:

Good Stuff Ben. I often use Slide Show Pro for Flash for rotating slideshows, but it’s nice to have a non flash alternative.