Souvenir souvenir

Séquence souvenir ce midi en regardant un de mes plus anciens sites encore en ligne : http://gordonhopkins.com
Il doit dater de +/- 2004 et tourne toujours bien!
Amusant de voir que jQuery n'était pas encore la norme et que je codais tout de A à Z > par exemple le système de diaporama!!!

function launchSlideshow(f_slideshowId, f_imageTimeoutLength, f_transitionTimeoutLength, f_startType, f_onclickLink, f_thumbYes, f_thumbnailsOpacityYes, f_toolsYes, f_keyboardNavigationYes, f_centered, f_legendTxtStr, f_nextTxtStr, f_prevTxtStr, f_playTxtStr, f_bottomTxtStr, f_topTxtStr) {
    var slideshowId = f_slideshowId;
    slideshowNode[slideshowId] = document.getElementById('slideshow_' + slideshowId);
    imageTimeoutLength[slideshowId] = f_imageTimeoutLength;
    transitionTimeoutLength[slideshowId] = f_transitionTimeoutLength;
    startType[slideshowId] = f_startType;
    thumbYes[slideshowId] = f_thumbYes;
    thumbnailsOpacityYes[slideshowId] = f_thumbnailsOpacityYes;
    toolsYes[slideshowId] = f_toolsYes;
    keyboardNavigationYes = f_keyboardNavigationYes;
    centeredYes[slideshowId] = f_centered;
    theImage[slideshowId] = 0;
    if (keyboardNavigationYes == 'keyboardNavigation') document.onkeypress = checkArrows;
    document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].style.display = 'block';
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    for (var i = 0; i < imagesNodes.length; i++) {
        imagesNodes[i].style.display = 'none';
        imagesNodes[i].getElementsByTagName('legend')[0].style.display = 'none';
        imagesNodes[i].style.position = 'absolute';
        if (f_onclickLink != 'noClick') {
            imagesNodes[i].getElementsByTagName('img')[0].style.cursor = 'pointer';
            if (f_onclickLink.indexOf('http://') == 0) {
                imagesNodes[i].getElementsByTagName('img')[0].onclick = function() {
                    window.location = f_onclickLink;
                }
            }
            if (f_onclickLink == 'next') {
                imagesNodes[i].getElementsByTagName('img')[0].onclick = function() {
                    nextImage(slideshowId);
                    return false;
                }
            }
        }
    }
    if (thumbYes[slideshowId] == 'thumbnails') {
        var zethumbs = document.getElementsByClassName('thumbnails', slideshowNode[slideshowId])[0].getElementsByTagName('a');
        for (var i = 0; i < zethumbs.length; i++) {
            zethumbs[i].id = "thumb" + i;
            zethumbs[i].onclick = function() {
                showImage(slideshowId, parseInt((this.id).substring(5, this.id.length)));
                return false;
            }
        }
        if (thumbnailsOpacityYes[slideshowId] == 'thumbnailsOpacity') {
            for (var i = 0; i < zethumbs.length; i++) {
                setOpacity(zethumbs[i].childNodes[0], thumbOpacity);
                zethumbs[i].onmouseover = function() {
                    setOpacity(this.childNodes[0], 100);
                }
                zethumbs[i].onmouseout = function() {
                    var currImgId = theImage[slideshowId];
                    if (this.id != "thumb" + currImgId) {
                        setOpacity(this.childNodes[0], thumbOpacity);
                    }
                }
            }
        }
    }
    if (toolsYes[slideshowId] == 'tools') {
        var navNode = document.createElement('fieldset');
        navNode.className = 'images_navigation';
        var legendNode = document.createElement('legend');
        var legendTxt = document.createTextNode(f_legendTxtStr);
        legendNode.appendChild(legendTxt);
        navNode.appendChild(legendNode);
        var prevNode = document.createElement('a');
        prevNode.className = 'previous';
        prevNode.setAttribute('href', 'javascript:prevImage(' + slideshowId + ')');
        prevNode.setAttribute('title', f_prevTxtStr);
        var altNode = document.createElement('span');
        altNode.className = 'alternate';
        var altTxt = document.createTextNode(f_prevTxtStr);
        altNode.appendChild(altTxt);
        prevNode.appendChild(altNode);
        navNode.appendChild(prevNode);
        if (startType[slideshowId] != 'noPlay') {
            var altNode = document.createElement('span');
            altNode.className = 'alternate';
            var altTxt = document.createTextNode(' | ');
            altNode.appendChild(altTxt);
            navNode.appendChild(altNode);
            var playNode = document.createElement('a');
            playNode.className = 'play';
            playNode.setAttribute('href', 'javascript:togglePlay(' + slideshowId + ')');
            playNode.setAttribute('title', f_playTxtStr);
            var altNode = document.createElement('span');
            altNode.className = 'alternate';
            var altTxt = document.createTextNode(f_playTxtStr);
            altNode.appendChild(altTxt);
            playNode.appendChild(altNode);
            navNode.appendChild(playNode);
        }
        var altNode = document.createElement('span');
        altNode.className = 'alternate';
        var altTxt = document.createTextNode(' | ');
        altNode.appendChild(altTxt);
        navNode.appendChild(altNode);
        var nextNode = document.createElement('a');
        nextNode.className = 'next';
        nextNode.setAttribute('href', 'javascript:nextImage(' + slideshowId + ')');
        nextNode.setAttribute('title', f_nextTxtStr);
        var altNode = document.createElement('span');
        altNode.className = 'alternate';
        var altTxt = document.createTextNode(f_nextTxtStr);
        altNode.appendChild(altTxt);
        nextNode.appendChild(altNode);
        navNode.appendChild(nextNode);
        document.getElementsByClassName('tools', slideshowNode[slideshowId])[0].appendChild(navNode);
        var legendNode = document.createElement('div');
        legendNode.className = 'legend';
        var altNode = document.createElement('span');
        legendNode.appendChild(altNode);
        document.getElementsByClassName('tools', slideshowNode[slideshowId])[0].appendChild(legendNode);
    }
    var delay = 0;
    if (startType[slideshowId] == "autoStop") {
        isPlaying[slideshowId] = false;
        if (toolsYes[slideshowId] == 'tools') document.getElementsByClassName('play', slideshowNode[slideshowId])[0].className = 'pause';
    } else {
        if (startType[slideshowId] == "noPlay") {
            isPlaying[slideshowId] = false;
        } else {
            if (startType[slideshowId] != "autoStart") delay = startType[slideshowId];
            isPlaying[slideshowId] = true;
        }
    }
    showImage(slideshowId, 'init', delay);
}

function showImage(slideshowId, toShowImageId, delay) {
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    var slideshowH = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].offsetHeight;
    var currImgId = theImage[slideshowId];
    if (delay == null) delay = 0;
    if (toShowImageId == 'init') {
        toShowImageId = 0;
    } else {
        Effect.Fade(imagesNodes[currImgId], {
            duration: transitionTimeoutLength[slideshowId] / 1000,
            limit: 1
        });
        if (thumbYes[slideshowId] == 'thumbnails') {
            var zethumbs = document.getElementsByClassName('thumbnails', slideshowNode[slideshowId])[0].getElementsByTagName('a');
            zethumbs[currImgId].parentNode.className = '';
            if (thumbnailsOpacityYes[slideshowId] == 'thumbnailsOpacity') {
                setOpacity(zethumbs[currImgId].childNodes[0], thumbOpacity);
            }
        }
    }
    theImage[slideshowId] = toShowImageId;
    currImgId = toShowImageId;
    isInTransition[slideshowId] = true;
    Effect.Appear(imagesNodes[currImgId], {
        duration: transitionTimeoutLength[slideshowId] / 1000,
        limit: 1
    });
    transitionTimeout[slideshowId] = window.setTimeout("clearTransition(" + slideshowId + ")", transitionTimeoutLength[slideshowId]);
    var imgH = imagesNodes[currImgId].getElementsByTagName('img')[0].height;
    if (centeredYes[slideshowId] == 'centered') {
        imagesNodes[currImgId].style.textAlign = 'center';
        if (imgH > 0 && slideshowH / 2 - imgH / 2 > 0) {
            imagesNodes[currImgId].style.top = slideshowH / 2 - imgH / 2 + 'px';
        } else imagesNodes[currImgId].style.top = 0;
    }
    if (centeredYes[slideshowId] == 'vCentered') {
        if (imgH > 0 && slideshowH / 2 - imgH / 2 > 0) {
            imagesNodes[currImgId].style.top = slideshowH / 2 - imgH / 2 + 'px';
        } else imagesNodes[currImgId].style.top = 0;
    }
    if (thumbYes[slideshowId] == 'thumbnails') {
        var zethumbs = document.getElementsByClassName('thumbnails', slideshowNode[slideshowId])[0].getElementsByTagName('a');
        zethumbs[currImgId].parentNode.className = 'selected';
        if (thumbnailsOpacityYes[slideshowId] == 'thumbnailsOpacity') setOpacity(zethumbs[currImgId].childNodes[0], 100);
    }
    if (toolsYes[slideshowId] == 'tools') setLegend(slideshowId, currImgId);
    if (isPlaying[slideshowId]) imageTimeout[slideshowId] = window.setTimeout("nextImage(" + slideshowId + ")", imageTimeoutLength[slideshowId] + transitionTimeoutLength[slideshowId] + delay);
}

function nextImage(slideshowId) {
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    var imagesNbr = imagesNodes.length - 1;
    var currImgId = theImage[slideshowId];
    clearTransition(slideshowId);
    clearImage(slideshowId, currImgId);
    if (currImgId >= imagesNbr) {
        showImage(slideshowId, 0);
    } else {
        showImage(slideshowId, currImgId + 1);
    }
}

function prevImage(slideshowId) {
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    var imagesNbr = imagesNodes.length - 1;
    var currImgId = theImage[slideshowId];
    clearTransition(slideshowId);
    clearImage(slideshowId, currImgId);
    if (currImgId <= 0) {
        showImage(slideshowId, imagesNbr);
    } else {
        showImage(slideshowId, currImgId - 1);
    }
}

function togglePlay(slideshowId) {
    var currImgId = theImage[slideshowId];
    clearImage(slideshowId, currImgId);
    if (isPlaying[slideshowId]) {
        isPlaying[slideshowId] = false;
        if (toolsYes[slideshowId] == 'tools' && startType[slideshowId] != 'noPlay') document.getElementsByClassName('play', slideshowNode[slideshowId])[0].className = 'pause';
    } else {
        isPlaying[slideshowId] = true;
        imageTimeout[slideshowId] = window.setTimeout("nextImage(" + slideshowId + ")", transitionTimeoutLength[slideshowId] / 4);
        if (toolsYes[slideshowId] == 'tools' && startType[slideshowId] != 'noPlay') document.getElementsByClassName('pause', slideshowNode[slideshowId])[0].className = 'play';
    }
}

function clearImage(slideshowId, toClearImageId) {
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    if (isPlaying[slideshowId]) window.clearTimeout(imageTimeout[slideshowId]);
}

function clearTransition(slideshowId) {
    isInTransition[slideshowId] = false;
    if (isInTransition[slideshowId]) window.clearTimeout(transitionTimeout[slideshowId]);
}

function setLegend(slideshowId, imgNbr) {
    var imagesNodes = document.getElementsByClassName('scene', slideshowNode[slideshowId])[0].getElementsByTagName('fieldset');
    var legendTxtStr = "";
    var imageNode = imagesNodes[imgNbr].getElementsByTagName('img')[0];
    for (var x = 0; x < imageNode.attributes.length; x++) {
        if (imageNode.attributes[x].nodeName.toLowerCase() == 'title') legendTxtStr = imageNode.attributes[x].nodeValue;
    }
    var legendTxt = document.createTextNode(legendTxtStr);
    var legendNode = document.getElementsByClassName('legend', slideshowNode[slideshowId])[0].childNodes[0];
    if (legendNode && legendNode.hasChildNodes()) legendNode.removeChild(legendNode.lastChild);
    legendNode.appendChild(legendTxt);
}

function setOpacity(obj, opacity) {
    opacity = (opacity == 100) ? 99.999 : opacity;
    obj.style.filter = "alpha(opacity:" + opacity + ")";
    obj.style.KHTMLOpacity = opacity / 100;
    obj.style.MozOpacity = opacity / 100;
    obj.style.opacity = opacity / 100;
}

function checkArrows(evt) {
    var zeSlideshowId = 0;
    var keyCode = null;
    var keyCode = document.layers ? evt.which : document.all ? window.event.keyCode : document.getElementById ? evt.keyCode : 0;
    if (keyCode == 39) nextImage(zeSlideshowId);
    else if (keyCode == 37) prevImage(zeSlideshowId);
    else if (startType[zeSlideshowId] != 'noPlay' && (keyCode == 0 || keyCode == 32)) togglePlay(zeSlideshowId);
}

(...)