Faire un album photo avec boutons de défilement

Ce script permet de faire un album photo avec les boutons back et next. Facilement personnalisable par un style css.

Insertion dans le Head



Voici le code à insérer dans votre page HTML entre les balises
<head> et </head> :

Code CSS :
<style type="text/css">
#input {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#fff;
border:1px solid #000;
color:#515C68;
font-family:Verdana,'Bitstream Vera Sans',Times,serif;
font-size:10px;
font-weight:bold;
padding:1px 2px;
}
</style>


Insertion dans le Body



Voici le code à insérer dans votre page HTML entre les balises
<body>... </body>

Code JAVASCRIPT :
<table border="0" cellpadding="0">
<caption></caption>
<tr>
<td width="100%"><img  SRC="url de votre image-000.jpg" width="200" height="150" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center>
<SCRIPT language="JavaScript" title="Album">
var photos=new Array()
var which=0
 
/* Mettez les images que vous voulez. N'oubliez pas de garder l'ordre hiérarchique si vous en désirez plus */
photos[0]="url de votre image-001.jpg"
photos[1]="url de votre image-002.jpg"
photos[2]="url de votre image-003.jpg"
photos[3]="url de votre image-004.jpg"
photos[4]="url de votre image-005.jpg"
 
 
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}
 
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='Fin de la Gallerie.... Visiter easy-design.net'
}
 
</SCRIPT>
<br>
<input type="button" value="/wiki/<< Back" name="B2"onClick="backward()"> 
<input type="button" value="/wiki/Next >>" name="B1"onClick="forward()">
<br>
<a href="/wiki/#" onClick="which=1;backward();return false"><small>Retour au début</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>


Remplacez les "url de votre image-XXX.jpg" par vos images.

Pour mettre le format des images ( elles doivent toutes avoir la même hauteur et largeur). Modifier le width ( largeur) et le height (hauteur) :

Code HTML :
<td width="100%"><img  SRC="url de votre image-000.jpg" width="200" height="150" name="photoslider"></td>
 


Démonstration





*Edité et corrigé par zediste68 le 22/03/2012.
Cette page a été vue 3801 fois