Galeries, Diaporamas & SlideShows

Faire un album photo avec boutons de défilement

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Table des matières
  1. Insertion dans le Head
  2. Insertion dans le Body
  3. Démonstration
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:5p
 
x;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
 
 
nbackground-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.s
 
rc=photos[which]
}
}
 
function forward(){
if 
 
(which<photos.length-1){
which++
document.images.photoslider.src=photo
 
s[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>
</t
 
able>


Démonstration