DIAPORAMA 

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP : améliorer son site internet

Descriptif : agrémentez vos pages par un diaporama avec fondu enchaîné.

Exemple : voir l'exemple

Mise en oeuvre :

Entre les deux balises <head> et </head>

<!-- DEBUT DU SCRIPT SLIDESHOW-->
===========================================================
Script: JavaScript Cross-Browser SlideShow Script
With Cross-Fade Effect between Images
Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
presentation format, with a fade effect on
image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
Fade effect only in IE; others degrade gracefully
Author: etLux
===========================================================

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// Changer les variables suivantes
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpeg'
Pic[2] = '3.gif'
Pic[3] = '../images/perso/4.jpg'
Pic[4] = '5.jpg'

// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<!-- FIN DU SCRIPT SLIDESHOW-->

Dans la ligne de la balise <body>

<!-- DEBUT DU SCRIPT -->
<body onload="runSlideShow()">
<!-- FIN DU SCRIPT -->

 

Entre les deux balises <body> et </body>

<!-- DEBUT DU SCRIPT SLIDESHOW-->
<p align="center"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table></p>
<!-- FIN DU SCRIPT SLIDESHOW-->

Remarque :
- ATTENTION : Si le nombre d'images est important le temps de chargement de la page le sera aussi. Vous pouvez utiliser un pop up "Veuillez patienter". Voir l'exemple dans la page d'accueil.
- Vous pouvez ajuster la hauteur et la largeur (height, width). En ce cas, faire de même à la ligne : <img src="1.jpg" name='SlideShow' width=150 height=150>
- Le nom de l'image à la ligne <img src="1.jpg" name='SlideShow' width=150 height=150> devra être le même que celui déclaré dans la ligne Pic[0] = '1.jpg' dans la partie <head> et </head>.
- Si les images n'ont pas la même proportion, il y aura un effet "d'étirement" ou "d'écrasement".
- Si l'état du réseau est dégradé ou si votre modem est trop lent l'effet de fondu enchaîné peut ne pas fonctionner.
- L'effet de changement de couleur du fond d'écran est décrit ici.

- Essayez aussi le diaporama manuel et automatique - Diaporama automatique 1 - Diaporama automatique 2 - Diaporama manuel - Carrousel
- Voir aussi le pré-chargement des images pour accélérer l'affichage.

 

Retour

Copyright www.toulouse-renaissance.net ©