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 !

DIAPORAMA PHP / JS


Information sur la source

Catégorie :Navigation Classé sous : diaporama, photo, image, picture, slideshow Niveau : Débutant Date de création : 28/07/2005 Date de mise à jour : 08/07/2006 12:59:08 Vu / téléchargé: 40 059 / 5 162

Note :
8,8 / 10 - par 5 personnes
8,80 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (36)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Bonjour, voila ne trouvant pas de diaporama à mon goût, j'ai décidé d'en faire un moi même ;)
C'est un diaporama PHP / Javascript qui à la qualité de passer sous toutes résolutions et d’être simple de navigation.
Etant encore débutant en Javascript, je ne sais si ce programme passe sur tous les navigateurs, mais en tout cas ça passe sous FF et IE.
Merci de me laisser vos remarques afin d’améliorer ce dernier !

 

Conclusion

Exemple de mon diaporama (sans fonction de téléchargement , exemple oblige): http://bckimg.free.fr/diapoplus/
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

08 juillet 2006 12:55:02 :
Le lien d'exemple à changer
08 juillet 2006 12:59:08 :
modif dans la description

Commentaires et avis

signaler à un administrateur
Commentaire de rttb le 28/07/2005 20:43:27

Sympa le diaporama, il manque quand même le défilement automatique (un coup de flemme ???)
Sinon, super l'idée de cacher le haut et de le faire apparaître à la souris.

signaler à un administrateur
Commentaire de MATHIS49 le 28/07/2005 21:12:41

Merci ! , le défilement automatique à vrai dire je n'y ai même pas pensé car je l'utilise jamais !
Mais pourquoi pas , je le ferais dans une prochaine mise à jour ;)

signaler à un administrateur
Commentaire de pdl le 29/07/2005 07:44:57

Très bien comme source. Je trouve aussi originale l'idée de cacher les miniatures pour montrer l'image. Comme le dis RTTB, le défilemenet automatique serait un petit plus.

Si non, quand tu charges une image, tu devrais soit mettre un lien  pour revenir à la page principale, ou alors une redirection au bout de quelques secondes. Autres trucs que tu pourrais essayer de prévoir, c'est de mettre les photos dans différents répertoires, comme si on les classais par catégories. Je pense que c'est pas trop compliqué, il faudrait changer dans index.php, le répertoire de départ (le passé en POST ou GET).

Merci pour cette source.

signaler à un administrateur
Commentaire de massacr le 29/07/2005 10:05:36

Très bonne source !!
Je ne suis pas très bon en javascript (moi,  c'est le PHP), mais si tu arrivais à faire un truc, ton code en serait beaucoup mieux. Pourtant c'est un détail, et peut etre difficile : L'affichage du bandeau des miniatures progressivement, soit en fading, soit, mieux, en se déroulant à partir du haut.
Voilà, a+

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 10:16:34

J'ai pris toutes vos remarques en compte, je ferais une mise à jour très bientôt ;)
D'autres remarques ?

signaler à un administrateur
Commentaire de GiUsTiNo le 29/07/2005 14:22:10

Oui, je t'aurais mis 9/10 pour la qualité du code et ce qu'il produit, mais avec la fille ca donne un bon pti 10/10 ^^

signaler à un administrateur
Commentaire de GiUsTiNo le 29/07/2005 14:23:25

Sinon, plus sérieusement, je pense que tu aurais plutôt du poster ce code sur la partie php et non javascript (car tu ne nies pas qu'il y a plus de php que de js :p)
Bonne continuation

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 14:41:32

lol merci pour ma copine ;)
J'ai mis ça sur Javascriptfr car l'interface est gérée en Javascript, après pour le PHP, je l'utilise que  pour l'Upload, donc mon choix s'est porté plutôt sur ce site ;)

signaler à un administrateur
Commentaire de GiUsTiNo le 29/07/2005 15:05:13

Oui, mais si tu postes sur php, on pourra sûrement t'aider pour la "sécurité" de l'upload, contre les piratages (bien connus d'ailleurs :p)
Alors, à toi de voir ;)

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 16:02:09

oui c'est vrai, mais ai je le droit de poster deux fois la même source sur code-source?

signaler à un administrateur
Commentaire de kangoo75 le 29/07/2005 16:26:18

Interface très efficace et code bien organisé ! Félicitation

signaler à un administrateur
Commentaire de massacr le 29/07/2005 16:43:59

Ne met pas ton code deux fois.
Je vais le regarder pour la sécurité, et, avec la newsletter, la plupart des utilisateurs de PHP ont vu ta source.

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 17:02:48

Merci Massacr, c'est sympa de m'aider à améliorer mon script ;)

signaler à un administrateur
Commentaire de GiUsTiNo le 29/07/2005 17:13:57

Sinon y'a pas de problème, tu peux le poster sur phpcs vu que c'est différent d'ici ...
Mais comme je l'ai dit, c'est à toi de voir :)

signaler à un administrateur
Commentaire de massacr le 29/07/2005 18:26:06

Voilà. Je n'ai pas trouvé de failles de sécurité (mais bon, je ne suis pas un pro dans la matière), par contre, j'ai trouvé et modifié unt as de trucs inutiles, (comme ce champ caché qui n'a aucune utilisé), j'ai amélioré l'interface, le javascript, la gestion des erreurs, etc...
Enfin bon, plein de nouveautés, que tu peux voir ici :
http://racine.librastuces.sanspub.org/diapoplus.zip

PS : Pour l'opacité, je travaille avec FireFox, et je ne sais pas si cela marchera avec IE. Mais je crois qu'il y a un filtre pour faire pareil sous IE. A voir.

A+

signaler à un administrateur
Commentaire de massacr le 29/07/2005 18:31:19

Voilà, rajoutes la ligne de code ci dessous dans le fichier style.css après la ligne 38 (après opacity).

filter:alpha(opacity=85);

Cela fera marcher l'effet alpha sur IE.

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 18:46:43

Nikel ! Merci ;) le rendu est super sur FF, moi pour ma part, je vais m'occuper de la gestion des catégories et de l'ajout de commentaires sur les photos ;)
Massacr pourrais tu toccuper de l'affichage progressif du menu et du défilement automatique et de la transparence sous IE ?

PS : tes pas obligé d'accepter ;)
RE PS : pour la transparence je crois que la solution se trouve sur :http://www.domedia.org/oveklykken/css-transparency.php

Merci encore

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 18:51:32

lol désolé j'avais pas vus ton post pour la transparence

signaler à un administrateur
Commentaire de massacr le 29/07/2005 21:48:49

lol
T'es exigeant !!
Mais j'accepte. J'ai un dossier Projets sur mon bureau, et je n'y place que des projets FINIS, et complets.

Je vais essayer de faire l'affichage progressif, mais je ne suis pas très bon en javascript. Ca me fera l'occasion de m'améliorer.
Pour le défilement automatique, j'hésite. Soit par PHP, soit par javascript, soit par envoi de données en POST, soit par envoie de données en GET, soit par header(location:""); en PHP, soit par meta, soit par javascript, etc...
Pour ca, ce n'est pas la technique qui m'embete, mais le choix, chaque méthode ayant ses avantages et ses inconvénients.
A voir, je vais y réfléchir. Je te dit demain le compte rendu de ma nuit blanche. lol
A+

signaler à un administrateur
Commentaire de MATHIS49 le 29/07/2005 22:43:55

Pour le défilement automatique, je parlais plutôt du défilement automatique des images tailles réelles ,lorsqu’on clic sur une case à cocher par exemple, pas du défilement des miniatures :D car je trouve que l'ascenseur est bien plus pratique ;)

Pour cela il faut juste utiliser le tableau javascript et la fonction setTimeOut ;)

PS : merci :p

signaler à un administrateur
Commentaire de massacr le 29/07/2005 22:47:13

Ok
Et, ca serait bien aussi d'encadrer la miniature en cours. Détail, mais c'est ca qui fera que ton code se détachera de la multitude de sources de diaporama.
A demain

signaler à un administrateur
Commentaire de kangoo75 le 30/07/2005 09:35:50

Encore un bel exemple de synergie, bravo les gars et vive le open source !

signaler à un administrateur
Commentaire de Missions_courtes le 21/08/2005 15:32:42

Bonjour,
Je recherche moi aussi un outil faisant un diaporama d'images réduites avec un défilement automatique.
Cordialement.

signaler à un administrateur
Commentaire de rrk275 le 17/10/2005 23:20:38

<INPUT TYPE=HIDDEN NAME=MAX_FILE_SIZE VALUE=1024>
peut etre etes vous au courant mais voici un moyen de limiter la taille des fichier a telecharger ...
tres bonne source j'aurais peut etre ajouter une modif de la config en ligne et un mot de passe eventuel (pour qu'elle puisse etre disponible dans les grand nombre de cas)(genre un input texte sur la page d'upload et une verification par if ($_POST['PASS']=="PASSWORD"){..} m'enfin sa ne servirait pas a tout le monde
PS: pour la securité le best c'est de faire un pass random qu'on garde sur une session et qu'on verifie par un hidden mais je vois pas qui voudrait trafiquer un truc comme ca( vu qu'il n'y  a pas de mot de passe ...)

signaler à un administrateur
Commentaire de azerty1212 le 13/11/2005 15:47:32

il a l'air super bien ce diapo, mais j'ai un probleme :
mes images ne sont pas redimmensionnés à la taille de mon écran.
Pourtant il y a l'air d'avoir un truc comme img_resize dans ton script : c'est pas fait pour redimmensionner automatiquement  l'image en foncton de la resolution de l'ecran ??

Merci pour ton aide
azerty12@hotmail.com

signaler à un administrateur
Commentaire de MATHIS49 le 08/07/2006 12:57:17

non c'est pour créér les miniaturees :), ps le lien d'exemple est désormais : http://bckimg.free.fr/diapoplus/ (par contre j'ai enlever la possiblité de telecharger pour lexemple)

signaler à un administrateur
Commentaire de GwedGwed le 16/01/2007 00:03:45

En effet excellent code mais j ai un pb d affichage des miniatures sous IE je crois que le pb viens de la fonction diapo.js je crois que IE ne supporte pas l instruction 'background-repeat:no-repeat ' avez vous une idee pour regler ce pb ?
Cordialement

signaler à un administrateur
Commentaire de fleubix le 25/06/2007 00:03:13

j'ai voulu l'utiliser et j'ai eu un message d'erreur :
" Fatal error: Cannot redeclare scandir() in /www/sites/1/ifrance.com/f/l/fleubix2/site/fonctions/php/scandir.php on line 27 " ... sinon j'ai vu le l'exemple de ce que ça devrait donner et ça a l'air vraiment bien :D

signaler à un administrateur
Commentaire de madmaxou91 le 08/02/2008 11:54:56

Effectivement j'ai le même problème, il semble que ce soit le $Return qui pose problème, je ne suis pas expert mais je trouve étrange de calculer la longueur d'une chaîne qu'on est en train de définir ( $Return=substr($Return, 0, strlen($Return)-1); )
C'est là que le bas semble blesser :o

signaler à un administrateur
Commentaire de Arimaze le 21/07/2008 14:34:13

Salut,

Un peu tard mais bon si des personnes veulent utiliser ce script comme moi aujourd'hui, c'est bon à prendre
Concernant le Fatal error: Cannot redeclare scandir(), il faut changer le nom de la fonction (ex function ScanDir2($Directory)) dans scandir.php.

Ensuite, dans la page index.php changer la ligne :
var TabImages= new Array(<?php echo ScanDir('images/miniatures/') ; ?>);
par :
var TabImages= new Array(<?php echo ScanDir2('images/miniatures/') ; ?>);

L'erreur du Return vient du fait que la variable n'est pas initialiser, il faut juste mettre en haut du script $Return="";

Voilà la page scandir.php :

<?
function ScanDir2($Directory)
{
$Return="";
$MyDirectory = opendir($Directory);

while($Entry = readdir($MyDirectory))
{

if( !is_dir($Entry) &&  $Entry != "." && $Entry != "..")
{

if (eregi(".jpg",$Entry))
{
$Return.="\""."$Entry"."\"".",";

}

}


}

closedir($MyDirectory);

$Return=substr($Return, 0, strlen($Return)-1);
return $Return;
}
?>

Voilà en espérant que cela aide quelqu'un.
Par contre j'ai les miniatures qui ne sont pas bien redimensionner.
Je vais résoudre ce problème et essayer d'apporter les améliorations postées dans les messages précédents mais qui n'ont pas étaient écrites.

Bonne journée.

signaler à un administrateur
Commentaire de Arimaze le 21/07/2008 14:35:53

Ah oui j'ai oublié de dire pourquoi changer le nom de la fonction scandir.
C'est une fonction déjà utilisée par php et donc on ne peut pas en créer une du même nom.

signaler à un administrateur
Commentaire de jack0five le 11/08/2008 00:53:59

Salut

je viens d'essayer en mettant les fichiers sur un site en ligne.

Les images se chargent bien et le JS semble fctionner mais aucun image ne s'affiche donc pas de diapo?!

Qq'un peut m'expliquer?

Merci

signaler à un administrateur
Commentaire de Arimaze le 11/08/2008 20:20:25

Salut,

Pour le moment j'ai pas le temps mais demain, je peux te donner un autre type de diaporama que je trouve bien mieux que celui ci, bien plus jolie.

Donne moi ta réponse.

Bye

signaler à un administrateur
Commentaire de jack0five le 11/08/2008 21:30:40

pas de souci, je suis partant pour un autre aussi mais  pour en revenir à celui-ci meme en l'installant sur un serveur en local, j'ai pas plus de succès et pourtant les images sont bien chargées dans le bon repertoire !!!

signaler à un administrateur
Commentaire de Arimaze le 12/08/2008 10:04:49

Je sais pas si tu connais la librairie Mootools sinon je te conseilles d'aller faire un tour ici : http://demos.mootools.net/Effects pour voir un peu comment ça marche .

En combinaison avec Mootools, je te conseille de réaliser le diaporama suivant que tu peux customizer assez facilement. le lien : http://www.digitalia.be/software/slimbox#download.

Tu as tout ce qu'il faut pour que ca marche du premier coup.
Voilà si tu as un problème n'hésite pas.

Amicalement. Arimaze

signaler à un administrateur
Commentaire de jack0five le 12/08/2008 12:13:10

Salut

Merci pour tes liens.
Ca à l'air très "classieux" tous ces modules.
Faut que je les essaie.
Dommage pour le diaporama présenté ici que je ne parviens vraiment pas à faire fonctionner.

Je vais voir tout ca.
Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Controle SlideShow [ par Miloflyer ] Bonjours a tous. J'ai trouver cet bribe de code qui permet de faire une sorte de petit diaporama avec des photos, mais j'aimerai l'adapter... J'aimera ne sais pas par où commencer! [ par unpeuperdu ] bonjour &#224; tous, j'ai un probl&#232;me que j'imagine de d&#233;butant mais je ne sais pas par o&#249; commencer pour le r&#233;gler. c'est, je !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (tr&#232;s int&#233;ressant).Voil&#224;, je recherche un script pour mes pages album photos.Mais comme j'ai nombre d'image pour diaporama [ par bosto ] Bonjour,Je suis super d&#233;butant et surtout graphiste pas technicien. Ma question est peut etre tres simple mais je ne trouve pas de reponse sur le script de telechargement d'image ? [ par benoitquintard ] je cherche un script qui puisse faire ceci :quand je passe la sourie sur un lien de photo, je ve que une fenetre de telechargement s'ouvre, et me dema Problème avec les caractères spéciaux ! [ par Ruffneck2045 ] Bonjour, j'ai cr&#233;er un diaporama &#224; l'aide&nbsp;de php &amp; javascript et j'ai un petit probl&#232;me.En cliquant sur une image du diaporama phototeque [ par guycnoel ] bonjour voici une page&nbsp;avec un code hyper simplifi&#233; qui affiche des petites photos (thumbs). quand on clique sur une de ces photos, une fen& appel de fct javascript [ par ksaillard ] je souhaite faire un diaporama dans ma page html je fais appel à une focntion javacript qui est dans 'ejs_visionneuse_image.js' : exec_vignette(chemi diaporama en html [ par CPoPo ] Bonjour, je cherche à créer un diaporama : quand on clic sur "image suivante", une nouvelle image se télécharge. Mias je ne trouve pas le code html à Chargement et redimentionnement image [ par maxinfos ] Bonjour, je suis actuellement en train de faire une page web dans laquelle je met des photos de petites tailles et que lorsque l'on clique dessus, ouv


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.