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

Ce site au démarrage

begin process at 2012 02 15 19:04:53

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Javascript / DHTML

> DEFILEMENT D'IMAGES POUR ALBUMS PHOTOS

DEFILEMENT D'IMAGES POUR ALBUMS PHOTOS

Information sur la source

Note :

5,43 / 10

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 :45 732

Auteur : franco_se

Ecrire un message privé

Commentaire sur cette source (18)

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

PHPJSVFORM : DES CLASSES PHP, DES JAVASCRIPTS POUR CRÉER FAC... par synanceia

BOUTON POUR SITE WEB PAYMENT par Tom56340

PETIT CLIENT + AJAX + PHP par kiki67100

BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / D... par Heirem

JUKEBOX EN LIGNE par Flachy Joe

Toutes les sources de la catégorie Javascript / DHTML

Sources en rapport avec celle ci

SYSTÈME DE PAGINATION AVEC BDD ET IMAGES (FICHIERS) par begueradj

CLASSE DE REDIMENSIONNEMENT D'IMAGES PHP par beejeridou

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

Commentaire de Becca le 01/07/2009 11:02:37

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 ?

Commentaire de jujucara le 29/06/2010 13:55:05

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!

Commentaire de assouma488 le 07/12/2010 17:20:50

s'il vous plait comment j'intègre le dossier qui contient les images et ou ?????

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

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 php/mysql et album photo sécurisé [ par pumbaa ]  Salut!!   Jai crée un album dimage avec php/MySQL. Les images ce trouvent Afficher une image en fonction d'un pourcentage [ par loupile ] Bonjour à tous, je m'explique alors voilà j'ai un album dans lequel j'ai une ou plusieurs images stockées dans une base de données. ces images dans ajouter des images [ par samia22 ] Bonsoir; j'ai un probleme... je travaille coté administrateur... j'ajout des produits a la base de données avec ses images... l'ajout de prod comment afficher des images une popup php javascript [ par tupense ] Bonjour je me perd un peu dans les rubriques désolé j'ai fait un script en php pour lister des dossiers dans un dossier puis je l'ai ai mis sous forme upload d'images en php [ par azorkot ] salut je travail sur mon projet de fin d'année et là j'essaie d'uploader des images!! mais j'arrive pas à les stocker ou plutôt à les afficher dans le Est-il possible?? [ par djibidl ] Est-il possible, De créer un répertoire et d'y mettre des fichiers de manière automatique en PHP? J'ai un mini-projet qui consiste à générer automatiq ImageFlow Lightbox [ par code32 ] Bonjour, J'utilise ImageFlow, et maintenant j'ai besoin d'activer l'effet lightbox sur les images. ImageFlow me permettre d'écrire la fonction onc infobulles-affichage d'images [ par azorkot ] salut! j'ai un problème et j'aimerais que vous m'aidiez. je dois faire une page html ou je devrais afficher des images d'articles. j'ai fais les étape création d'une imagette à l'aide imagecreatefromjpeg [ par azorkot ] bonsoir j'ai un problème avec la création de la miniature d'une image en utilisant la fonction imagecreatefromjpeg. avant j'avais un fatalerror j'ai p

Nos sponsors

Derniers Blogs

GESTION D'EXCEPTION AVEC LES TASKS par richardc

DéMARRONS AVEC LES TASKS par richardc

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

Forum

TABLE TEMPORAIRE MYSQL par ryosaebasgc

SCRIPT DE SUPPRESSION DE FICHIER TEMPORAIRE par belzebate

PB APACHE CRASH AVEC L'EXTENSION SNMP.DLL par Arafetdab

RE : RéFéRENCEMENT par syndrael

DURéE D'UNE SESSION par sebalex

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System