Help needed with JS image slideshow

Hi all

I have an image slideshow with a fading transition, here is the main chunk of code:

var images = new Array(
'skin/frontend/default/default/images/hsl-richmond-recliners.jpg',
'skin/frontend/default/default/images/william-burrows.jpg');

var imageWidth = 458;
var imageHeight = 293;
var imageTimeout = 4000;
var nextImage = 1;

function pageLoad() {

var el = document.getElementById('fading_image_container');
while (el.firstChild) { el.removeChild(el.firstChild); }

el.style.width = imageWidth + 'px';
el.style.height = imageHeight + 'px';

for(var i=0; i<images.length; i++) {

var t = document.createElement('IMG');
t.setAttribute('src',images);
t.setAttribute('width',imageWidth);
t.setAttribute('height',imageHeight);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
el.appendChild(t);

}

I need to add links to each image, but I don't know how to do this. This is a script taken from a developers blog, unfortunately the guy has not left contact details anywhere on his blog and you cannot comment on his posts!

Any help would be appreciated

 

sure - you need to change your notation to be json for a matched pair of image / path to go to, for example:

<div id="fading_image_container"></div>
<script type="text/javascript">
var images = [{
    path: 'http://fragged.org/gallery/full/PICT7952.JPG',
    link: 'http://google.com/'
},{
    path: 'http://fragged.org/gallery/full/PICT7173.JPG',
    link: 'http://yahoo.co.uk/'
}];

var imageWidth = 640, imageHeight = 480, imageTimeout = 4000, nextImage = 1;

var pageLoad = function() {
    var el = document.getElementById('fading_image_container');

    // empty the layer? why? 
    while (el.firstChild) { el.removeChild(el.firstChild); }

    el.style.width = imageWidth + 'px';
    el.style.height = imageHeight + 'px';

    for(var i=0; i<images.length; i++) {
        // create the link a href first
        var l = document.createElement('a');
        l.setAttribute("href", images[i].link);

        // this element will be inserted inside the link above        
        var t = document.createElement('img');
        t.setAttribute('src',images[i].path);
        t.setAttribute('width',imageWidth); // these can be properties of the json per image
        t.setAttribute('height',imageHeight); 
        t.style.position = 'absolute'; 
        t.style.visibility = 'hidden';
        t.style.border = 0; // no border on an image link (no need if you define in css).
        
        // append to dom.
        l.appendChild(t);
        el.appendChild(l);
    }
}

window.onload = pageLoad; // load things. 

// continue here to fade first one in etc. 

</script>

PHP:

the reason why the author is not contactable is probably because he gets bugged about his dated script too much

the way it SHOULD work is print the images in some form of a structured list, like ul/li or divs, with some css positioning and have the javascript just move them...

good luck anyway, mate.

 

thanks very much for your reply! i will get back to it on monday morning when the working week begins

 

hi again! i couldnt get this working. do you know of any lightweight solutions that do the job? i'm not good with javascript and need something simple!