CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

Accueil Codes Tutoriels Forums Emploi Livres Connexion

begin process at 2008 09 07 07:02:03

[WPF] NOUVEL ARTICLE SUR C2I.FR par richardc

F# NOUVELLE CTP 1.9.6.2 (UPDATE) par pierrick

LA SUITE ...PROPOSITION DE COLLABORATION RéDACTIONNELLE ENTRE LES COMMUNAUTéS DE DéVELOPPEURS ET MICROSOFT FRANCE par malabar

[FUN] VOTRE SIMULATEUR DE VOL AVEC MICROSOFT ESP par neodante

[BEST PRACTICES] CUSTOMISATION DU MY SITE : COMMENT LE MODIFIER EN AMONT ET EN AVAL par themit

INSERT INTO OU BIEN ..? par marouanemarouane

RE : SCROLLBAR INVERSé par nicomilville

RE : SCROLLBAR INVERSé par didia78

RE : SCROLLBAR INVERSé par nicomilville

RE : SCROLLBAR INVERSé par didia78

+ de logiciels à télécharger

Indesit BAN 14 Congélateur en bas Réfrigérateur au meilleur prix

1 238 074 membres
48 nouveaux aujourd'hui
14 314 membres club

Trouver une ressource

Trouvez une ressource parmi 38 620 codes, 1 171 067 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DEFILEMENT D'IMAGES POUR ALBUMS PHOTOS

Information sur la source

Catégorie :Javascript / DHTML Classé sous : album, defilement, automatique, images Niveau : Débutant Date de création : 18/08/2006 Date de mise à jour : 18/08/2006 12:31:06 Vu : 21 897

Auteur : franco_se

Ecrire un message privé

Note :

5,43 / 10

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

Description

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

<?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>

<?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>

Historique

18 août 2006 12:31:06 :: le code a était modifier pour lister l'ensemble des images d'un dossier, au lieu de renseigner un tableau

Sources du même auteur

CLASSE DATABASE POUR CONNECTION ET MODIFICATION D'UNE BDD MY...

CHIFFRE DE VIGENÈRE

COMPARER DEUX IMAGES ET VOIR LEURS DIFFÉRENCES

GÉNÉRATEUR D'UNE CHAINE ALEATOIRE FACILEMENT MEMORISABLE

COMPARAISON DE 2 CHAINES , ET RETOUR DU POURCENTAGE DE RESSE...

Toutes les sources de franco_se

Sources de la même categorie

ONGLET GÉNÉRÉ EN PHP ET REQUETE AJAX par djmmix

LISTER DOSSIER AVEC UN ARBRE / TREE EN PHP / JAVASCRIPT par cyril6789

MAJAX UN TOOLS (AJAX EN PHP) par michelsto

AJAX TOOLKIT - PARTAGE DE CLASSES ENTRE PHP / JS par aKheNathOn

ORGANIGRAMME par ddempt

Toutes les sources de la catégorie Javascript / DHTML

Sources en rapport avec celle ci

SIMPLE CLASS D'UPLOAD D'IMAGE par keith166

CRÉATEUR AUTOMATIQUE DE SITE(MERCI A GUISX POUR SON SITE V3... par dydjy940

ALBUM PHOTO SIMPLE ET RAPIDE par jean84

PHOTOS ALBUMS MANAGER par davwart

ALBUM PHOTO AUTOMATIQUE par coucou747

Commentaires et avis

Commentaire de lefter le 18/08/2006 08:45:10

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.

Commentaire de malalam le 18/08/2006 09:05:29 administrateur CS

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.

Commentaire de coockiesch le 18/08/2006 11:30:00

Salut!
Oui, je ne comprends pas: pk pas javascriptfr.com?

@++

R@f

Commentaire de franco_se le 18/08/2006 12:27:25

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 ..........

Commentaire de WhiteDwarf le 18/08/2006 18:15:09

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...

Commentaire de lefter le 18/08/2006 19:57:33

Heu, c'est maintenat un peu plus interressant en listant un répertoire.

Quelques petites erreurs dans ton code, voici une rectification

// Modifier pour que les extentions soit de même taille
$extensions_ok = array(".jpg",".gif",".png","jpeg", ".JPG", ".GIF", ".PNG", "JPEG");
$dossier = opendir($nom_repertoire);
$i = 0;
$photos = array();
while ($fichier = readdir($dossier)){
// Modifier le -3 par -4 sinon il y a pas de détection
if(in_array(strtolower(substr($fichier, -4)),$extensions_ok)) $photos[] = $fichier;
}

closedir($dossier);

Web plus qu'un métier, une passion ^^

Commentaire de franco_se le 19/08/2006 00:49:47

oui, c'est vrai que ac un -3, un fichier nommé machinjpg passerais, j'avais oublié.
mais j'avoue avoir corrigé ça un peu a la va-vite

Commentaire de fsi80 le 21/08/2006 15:00:08

ben moi je le trouve utile.
Mais le nom du repertoire est inutile.
Moi j'aimerais passer en argument le nom du répertoire ou se trouve mes images et pouvoir les affichers.

ex : <a href="../Photos/photos.php?match=couvin" class="lien"> photos >>></a>

je récupère la variable match et je garnit $nom_repertoire avec celle-ci.
puis j'exécute le scripts mais il ne trouve pas les images.
Si je met les images dans le répertoire courant la il les trouves.

HELP?

Commentaire de franco_se le 25/08/2006 01:00:09

essaye ac
$nom_repertoire = $_GET['match'];

Commentaire de fsi80 le 25/08/2006 08:11:29

Cool, Merci.

Commentaire de aquarius74 le 12/12/2007 23:33:53 6/10

Salut, j'aime bien ce petit script, c'est exactement ce que je recherche, cependant, j'ai un soucis, il trouve bien le nombre de photos (donc je suppose qu'il arrive à lire le répertoire), mais il ne me les affiche pas, il affiche une croix rouge. Quand je fais 1 clique doit sur la croix, il me met correctement le nom de fichier, mais pas du bon dossier.

Commentaire de binz94 le 27/12/2007 00:38:13

Bonsoir,
Je crois que ton problème devrais être résolu avec cette modification .

if(in_array(strtolower(substr($fichier, -3)),$extensions_ok)) $photos[] = $nom_repertoire."/".$fichier;

Le tableau photos ne contient pas le chemin complet, c'est pour ça je crois .

Commentaire de FuckingRabits le 04/01/2008 20:32:09

Bonsoir,
j'avoue je suis néophyte et autodidacte (ok ça fait beaucoup) je ne comprend encore que les bases...
En utilisant ce code qui a l'air fort sympa, je rencontre un petit soucis...
Il apparait un " Il y a Photo1)? "s": ""); ?> " et naturellement les photos ne s'affichent pas...
Peut tu me débloquer?
Un grand merci

Commentaire de funkysnip le 09/03/2008 17:15:29

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

Commentaire de funkysnip le 10/03/2008 08:22:37

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

php/mysql et album photo sécurisé [ par pumbaa ]  Salut!!   Jai crée un album dimage avec php/MySQL. Les images ce trouvent Afficher images automatique [ par sensosofttunisiee ] Salut,j'ai un bouton "Auto" qui me permet d'afficher un groupe d'images du maniere automatique cad image apres l'autre et autre bouton "Stop" pour int images [ par picogunsy ] Bonjour à tous... voila j'ai un ptit problème ... aussi non je poserais pas de question lol j'importe des images de ma bd pour un systeme Envoi d'email automatique [ par atchoumen ] Bonjour,Je suis actuellement en train de développer un site et j'ai mis en place un systeme de newsletter. Cependant ce systeme néccessite e saisie semi automatique [ par el_bassir ] Bonjour;j'aimerai faiire un script dans ma page web permettant de faire la meme chose que la saisie semi automatique. en fait  j'ai une zone de t PHP mélangé à Javascript [ par paraconcept ] bonjour à tous,j'ai trouvé un diaporama en JS.J'aimerais seulement remplacer les images présentes dans le code par une requête SQL clic sur un tableau d'images lues à partie de mysql/php [ par amewole ] Voici mon problème : Je suis debutant php j'extrais des données images d' une table mysql et je mets ces données images dans un tableau Passage de parametres images(JPG, GIF ..) ---> Javascript [ par amewole ] J'ai une fonction Javascript qui reçoit deux paramètres depuis PHP et ces paramètres sont en fait deux URL qui pointent sur des im images cliquables et agrandissement en PHP [ par amewole ] Je lis des images stockées en base de données que j'affiche par dizaine dans un tableau HTML avec l'instruction suivante :echo "<img src= images associées à une valeur ? [ par gabs77 ] bonjour, je voudrais savoir si il est possible de faire un tableau comportant un certain nombre de case de couleur différentes(jusque la rien de