Defilement d'images pour albums photos

Soyez le premier à donner votre avis sur cette source.

Snippet vu 57 847 fois - Téléchargée 26 fois

Contenu du snippet

bonjour

ce code, principalement en javascript, permet de faire defiler des images, et d'en selectionner une en particulier, sans recharger la page pour chaque images (tres pratique pour les ablums photos)

il n'y a que la variable $photos a renseigner.
il s'agit d'un tableau, où l'on insere les chemins d'acces des images.

//////////////////////////

EDIT:

le code a était modifier pour lister l'ensemble des images d'un dossier.
il faut renseigner la variable $nom_repertoire, pour indiquer le repertoire a lister.

Source / Exemple :


<?php
   //nom du répertoire contenant les images à afficher
   $nom_repertoire = "images;

   // extensions acceptées
   $extensions_ok = array("jpg","gif","png","jpeg", "JPG", "GIF", "PNG", "JPEG"); 

   //on ouvre le repertoire
   $dossier = opendir($nom_repertoire);
   $i = 0;

	$photos = array();

   //on les stocke les noms de fichiers images dans un tableau
   while ($fichier = readdir($dossier))
   {     
   if(in_array(strtolower(substr($fichier, -3)),$extensions_ok)) $photos[] = $fichier;

   }
   
   //on ferme le répertoire
   closedir($dossier);

   //on peut trier le tableau par ordre alphabétique:
   // array_multisort($photos, SORT_ASC);

$count_photos = count($photos);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script type="text/javascript" >
<!--
var rotate_delay = 4000; // delais en microseconde (4000 = 4 secs)
current = 0;

function lessdelay() {
  if (rotate_delay <= 1000) {
	rotate_delay = rotate_delay-100; 
	document.slideform.delay.value = rotate_delay; 
  }else {
	rotate_delay = rotate_delay-500; 
	document.slideform.delay.value = rotate_delay; 
  }
}

function moredelay() {
  if (rotate_delay < 1000) {
	rotate_delay = rotate_delay+100; 
	document.slideform.delay.value = rotate_delay; 
  }else {
	rotate_delay = rotate_delay+500; 
	document.slideform.delay.value = rotate_delay; 
  }
}

function next() {
  if (document.slideform.slide[current+1]) {
	document.images.show.src = document.slideform.slide[current+1].value;
	document.slideform.slide.selectedIndex = ++current;
  }else first();
}

function previous() {
  if (current-1 >= 0) {
	document.images.show.src = document.slideform.slide[current-1].value;
	document.slideform.slide.selectedIndex = --current;
  }else last();
}

function first() {
  current = 0;
  document.images.show.src = document.slideform.slide[0].value;
  document.slideform.slide.selectedIndex = 0;
}

function last() {
  current = document.slideform.slide.length-1;
  document.images.show.src = document.slideform.slide[current].value;
  document.slideform.slide.selectedIndex = current;
}

function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? " > " : "Stop";
rotate();
}
function change() {
  current = document.slideform.slide.selectedIndex;
  document.images.show.src = document.slideform.slide[current].value;
}

function rotate() {
  if (document.slideform.slidebutton.value == "Stop") {
	current = (current == document.slideform.slide.length-1) ? 0 : current+1;
	document.images.show.src = document.slideform.slide[current].value;
	document.slideform.slide.selectedIndex = current;
	window.setTimeout("rotate()", rotate_delay);
  }
}
-->
</script>
</head>

<body>
 <form name="slideform" action="" id="slideform" style="margin:0px">
<table width="100%" >
  <tr>    
<td nowrap="nowrap">
<b>Il y a <?php echo $count_photos; ?></b> Photo<?php echo (($count_photos>1)? "s": ""); ?> 
<select name="slide" onchange="change();">
<?php
for($i=0; $i < count($photos); $i++) echo "<option value=\"".$photos[$i]."\" ".(($i==0)? "selected=\"selected\"" : ""). ">- ".($i+1)." -</option>";
?>
</select>
</td>
<td nowrap="nowrap" align="right">
  <input type="button" onclick="previous();" value="«" title="Précédente" />
  <input type="button"  onclick="ap(this.value);" name="slidebutton" value=" > " title="Défilement Automatique" />
  <input type="button" onclick="next();" value="»" title="Suivante" /></td>
  </tr></table>
  </form>

<table width="100%" >
<tr><td colspan="2" align="center" width="100%">
<img alt="" src="<?php echo $photos['0']; ?>" id="show" />
</td>
</tr>
</table>
</body>
</html>

A voir également

Ajouter un commentaire

Commentaires

assouma488
Messages postés
4
Date d'inscription
samedi 6 février 2010
Statut
Membre
Dernière intervention
7 décembre 2010

s'il vous plait comment j'intègre le dossier qui contient les images et ou ?????
jujucara
Messages postés
1
Date d'inscription
mardi 29 juin 2010
Statut
Membre
Dernière intervention
29 juin 2010

Bonjour,
ya pas plus simple pour faire défiler des photos? J'aimerais avoir un code qui fonctionne et juste changer le nom de fichier photo, quelqu'un peut m'aider? je suis un peu nul en création de site web! Je travail avec dreamweaver et en php.
Merci de votre aide!
cs_Becca
Messages postés
15
Date d'inscription
jeudi 4 juin 2009
Statut
Membre
Dernière intervention
24 avril 2010

quand je fais ce code il me mets la barre de défilement, le nombre de photo, mais je ne vois pas les photos. Comment faire ?
cs_funkysnip
Messages postés
3
Date d'inscription
mardi 5 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2008

re bonjour , jai pu regler le probleme de la photo , reste qu'elle saffiche en grand format elle prend tout l'espace de la page , comment puis j reduire ca , merci d avance
cs_funkysnip
Messages postés
3
Date d'inscription
mardi 5 décembre 2000
Statut
Membre
Dernière intervention
10 mars 2008

bjr , chui un nouveau debarqué et j'ai un petit probleme le nbre de photos existante est afficher ainsi que les touche de navigation avant arriere , le probleme c que il n y a aucune photo qui s'affiche , meme la croix rouge n'est pas affiché , pouvez vous m aider svp

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.