Defilement d'images pour albums photos

Soyez le premier à donner votre avis sur cette source.

Snippet vu 57 608 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

lefter
Messages postés
63
Date d'inscription
lundi 7 juin 2004
Statut
Membre
Dernière intervention
16 mai 2009
-
Quel interêt de défini une variable php pour une liste de photographies ?

On peut le défini la liste en javascript et le mettre sur http://www.javascriptfr.com/

Serait pas plus interressant de gérer ta liste de photo par rapport au contenu d'un dossier ou d'une liste contenu dans une base de donnée.
malalam
Messages postés
10843
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
17 -
Hello,

si je suis d'accord avec toi, Lefter, sur le fait que cette source serait plus intéressante en JS, et que le PHP n'a strictement aucun intérêt ici, j'aimerais quand même que tu justifies la note. Si c'est uniquement parce que le php n'a pas lieu d'être ici, c'est un peu sévère je trouve. Une très bonne source écrite en C# etpostée sur phpcs.com n'en reste pas moins une très bonne source. Et ne mérite pas un 1/10 pour un mauvais jugement sur l'endroit où la poster.
Bref, je ne dis pas que cette source est une très bonne source : je ne l'ai pas testée.
coockiesch
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
3 -
Salut!
Oui, je ne comprends pas: pk pas javascriptfr.com?

@++

R@f
franco_se
Messages postés
151
Date d'inscription
samedi 1 novembre 2003
Statut
Membre
Dernière intervention
30 juillet 2018
-
alors, Lefter, pq je l'ai placé sur php, alors que le code est a 99% javascript?
parce que je pensais que sur javascriptfr, il ne falait pas de codes php tout simplement
vous remarquerez par ailleurs que je l'ai mis dans la sous-section Javascript-DHTML, donc je n'étas pas totalement incontient de mes actes lol
enfin, j'utilise un tableau et non un listage des images d'un dossier car, a l'origine, le chemin d'acces aux images étaient ds ma base de donnée. mais il est tres simple de modifier le code, ce que je vais m'empresser de faire, comme ça, le code aura plus ça place ici ..........
WhiteDwarf
Messages postés
510
Date d'inscription
samedi 29 décembre 2001
Statut
Membre
Dernière intervention
23 mai 2008
-
Je ne pense pas que le code n'ait pas sa place ici, il pourrais incrémenter les nombreuses galeries photos... ^^

Sinon c'est pas mal, et je suis d'accord sur le principe que 1/10 c'est trop sévère. C'est pour ca que je met 6 pour équilibrer. Et puis pour le soutiens aussi ^^

Ce qui pourrais être pas mal, c'est de ne pas toujours commencer par la première photo, tu pourrais rajouter une fonction 'aléatoire' pour la sélection de l'image de base...

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.