Defilement d'images pour albums photos

Commenter

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

S'inscrire maintenant

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.

Du même auteur (franco_se)