Thony Posté(e) le 10 octobre 2008 Posté(e) le 10 octobre 2008 (modifié) Bonsoir, ça fait un moment que je cherche et que je ne trouve pas alors je fais apel à vous... Je suis en train de tenter de faire une galerie en php en utilisant onclick voici ma syntaxe: php: echo '<img src="'.$donnees['adresse_mini'].'" value="image'.$donnees['id'].'" onclick="afficher_photo('.$donnees['adresse_normal'].', '.htmlspecialchars($donnees['description'],ENT_QUOTES).';"> js: function afficher_photo(adresse, description){ document.getElementById('montruc').innerHTML = description; document.getElementById('imagea').src = adresse;} Le but: afficher la photo en miniature et quand on clique dessus, la mettre en grand et afficher la description qui va avec. Le probleme: quand dans la description il y a un quote ou une apostrophe " ' " (exemle : c'est jojo qui joue) il coupe la description, ce qui fait que quand je clique sur la miniature rien ne se passe, la photo n'est pas en grand et la description ne s'affiche pas. solution1 -> rajouter des \ |consequence -> ça fonctionne mais il affiche aussi les \ dans la description solution2 -> transformer les " ' " en ascii |consequence -> àa ne fonctionne pas du tout, il coupe aussi la chaine de caractere à cause du " ; " pcq ça fait " #039; " donc si vous avez une autre idée... merci d'avance Modifié le 10 octobre 2008 par Thony
fornorst Posté(e) le 10 octobre 2008 Posté(e) le 10 octobre 2008 (modifié) Essaie avec un markup du style <html><head></head><body><ol id="miniaturesList"> <li> <img src="maPhoto1-mini.jpg" onclick="afficherPhoto(1)" /> <p id="miniature1-description" class="hide">Ceci est la description de ma première photo et je rajoute un display:none; sur la classe hide pour que ce paragraphe ne soit pas affiché</p> <p id="url-de-ma-grande-photo-1" class="hide">maPhoto1-grand.jpg</p> </li> <li> <img src="maPhoto2-mini.jpg" onclick="afficherPhoto(2)" /> <p id="miniature2-description" class="hide">Ceci est la description de ma seconde photo et je profite du display:none; sur la classe hide pour que ce paragraphe ne soit pas affiché</p> <p id="url-de-ma-grande-photo-2" class="hide">maPhoto1-grand.jpg</p> </li> ...</ol><div id="bloc-pour-grande-photo" class="hide"> <img id="photo-en-grand" src="une-image-de-1px-par-1px.jpg" /> <p id="description-de-ma-photo-en-grand">Description masquée car le div est masqué grâce à l'ajout d'un display:none sur la class "hide"</p></div><script type="text/javascript">function $(myId) { return document.getElementById(myId);}function afficherPhoto(photoNum) { $("photo-en-grand").src = $("url-de-ma-grande-photo-" + photoNum).innerHTML; $("description-de-ma-photo-en-grand").innerHTML = $("miniature" + photoNum + "-description").innerHTML; if ($("bloc-pour-grande-photo").className == "hide") { $("bloc-pour-grande-photo").className = "show"; }}</script><style type="text/css" media="all">.hide {display:none;}.show {display:block;}</style></body></html> C'est crade mais sans tirer de librairie externet et sans trop jouer avec le DOM, c'est le plus simple (et le plus compréhensible) à faire. Note que j'ai mis une photo bidon de 1px par 1px dans le div masqué au chargement pour éviter d'avoir une 404 dans les logs quand ton user est sur IE6. Tu t'en fous surement mais c'est une bonne habitude à prendre : toujours mettre un "src" non vide dans une image. Par contre, il existe plein de belles galleries en JS qui se basent sur des librairies Front End (jQuery, Dojo, Mootools, YUI, ...). Tu auras un rendu bien supérieur à ce que je t'ai fait là mais ça te fera tirer un poil plus de JS et si tu n'en as jamais fait, ce n'est pas forcément simple à customiser Edit : j'ai aussi rajouté un wrapper vers la fonction document.getElementById pour rendre le code plus lisible Modifié le 10 octobre 2008 par fornorst
Thony Posté(e) le 10 octobre 2008 Auteur Posté(e) le 10 octobre 2008 Bonsoir, merci pour l'aide... J'ai pas tout compris, je vais essayre de relire ça du week end pour mieux comprendre... Sinon non je connais rien au js, je compte apprendre un peu avec le site du zero quand j'aurai le temps... c'est là aussi que j'ai appris pour le PHP, html et css. Sinon je connaissais la librairie mootools mais juste de nom pcq un pote l'utilise pour son site.... Mais bon je vais déjà comprendre ton code, ensuite on verra... Merci, bonne soirée
Thony Posté(e) le 12 octobre 2008 Auteur Posté(e) le 12 octobre 2008 Bon j'y arrive pas :s Je suis perdu :s voici mon code complet en fait: <script language="javascript" type="text/javascript" src="galerie.js"></script>.... <?php include("connexion.php"); $reponse = mysql_query('SELECT * FROM galerie WHERE id_album=\''.$_GET['id_al'].'\' ORDER BY id'); $reponse_album = mysql_query('SELECT * FROM album WHERE id=\''.$_GET['id_al'].'\' ORDER BY id'); $premiere_image = mysql_fetch_array($reponse); $premier_album = mysql_fetch_array($reponse_album); ?> <center><p>Nom de l'album: <span id="all"> <?php echo $premier_album['nom_album']; ?></span> </p></center> <?php echo '<center><img src="'.$premiere_image['adresse_normal'].'" id="imagea" width="400" ></center><br />'; ?> <center><p>description : <span id="montruc"> <?php echo $premiere_image['description']; ?></span> </p></center> <?php $album_choisi=$_GET['id_al']; $reponse = mysql_query('SELECT * FROM galerie WHERE id_album=\''.$album_choisi.'\' ORDER BY id'); ?> <p><center> <?php while ($donnees = mysql_fetch_array($reponse)) { echo '<img src="'.$donnees['adresse_mini'].'" value="image'.$donnees['id'].'" onclick="afficher_photo('.$donnees['adresse_normal'].' , '.htmlspecialchars($donnees['description'],ENT_QUOTES).';"> '; } mysql_close(); ?> </center><br /></p> function afficher_photo(adresse, description){ document.getElementById('montruc').innerHTML = description; document.getElementById('imagea').src = adresse;} Ce qui a c'est que la premiere photo de la galerie ne commence pas toujours par 1...
fornorst Posté(e) le 13 octobre 2008 Posté(e) le 13 octobre 2008 hum... t'as essayé la méthode que je t'ai donnée ? Arrêtes de mettre tes données dans le onclick de ton image : 1/ C'est super crade 2/ C'est super pas sécurisé 3/ Tu vas te prendre la tête avec tous les caractères spéciaux possibles et imaginables. 4/ ton site sera très mal ranké par les moteurs de recherche et donc sera plus dur à trouver. Ta description, tu la mets dans un "span", un "p", un "div", ... tout ce que tu veux en fait tant que ta description est un noeud text. Tu fous un id dessus qui est généré en fonction de ton image ("description-" suivi de ton nom d'image par exemple) et une class de type "hide" pour le masquer par défault. Idem pour l'URL de ton image en grand (avec un id type "image-en-grand-" suivi du nom de ton image). Ensuite, tu ne mets que le nom de ton image comme paramètre de ta fonction JS. C'est vraiment pas compliqué. Mais si tu ne veux pas passer par une librairie toute faite, faudra que tu te mettes vraiment au JS.
sephirothff Posté(e) le 13 octobre 2008 Posté(e) le 13 octobre 2008 ca va pas t'aidé mais vu que ca a un rapport , j'ai récement installé la galerie éxposé 4 sur mon site , et c'est super bien foutu , entierement en flash ,installé en 30 secondes et gere photo et vidéo une ptite demo ici ==> http://www.gotgtek.net/15/expose-demo.html
Thony Posté(e) le 17 octobre 2008 Auteur Posté(e) le 17 octobre 2008 Voilà, j'ai enfin réussi... J'ai fait un petit mix... bon, c'est toujours crade mais pour le moment ça fonctionne... merci pour le coup de main ++
Messages recommandés
Créer un compte ou se connecter pour commenter
Vous devez être membre afin de pouvoir déposer un commentaire
Créer un compte
Créez un compte sur notre communauté. C’est facile !
Créer un nouveau compteSe connecter
Vous avez déjà un compte ? Connectez-vous ici.
Connectez-vous maintenant