8791 sujets

Développement web côté serveur, CMS

[résolu] Galerie de photo PhP (et ajax... je crois...)

Bien le bonjour,
J'en appelle une fois encore à votre grand savoir pour me sortir du pétrin. Plutôt calé en xhtml et CSS, je suis en revanche un gros zéro en langages de développeurs.

J'ai suivi un tutorial dans un magazine pour faire une galerie de photos, mais il est bien incomplet. Le but, c'est que les images miniatures appellent leur version agrandie dans un div dédié. Rien que du classique, je suppose.
Le problème, c'est que les miniatures appellent toujours la même image (et le même texte). Comment faire pour personnaliser chacune ?

Voici le code html de la partie concernée :

<div class="portfolio-section" id="web"> 
                
                                  <div class="background"></div>
                
                <div class="overlay">
                
                  <div class="header">	
                <a class="hide" onclick="CollapsiblePanel1.close(); return false" href="#"><img src="slices/ProjectFile_42.jpg" alt="Hide" /></a>
                <a class="show" onclick="CollapsiblePanel1.open({duration: 500}); return false" href="#"><img src="slices/ProjectFile_41.jpg" alt="Show" /></a>
                <h3>WEB (sites html, flash, bannières, emailing...)</h3>          
                </div>
                
                <div class="ajax-content"></div>
                               
                  <div id="CollapsiblePanel1" class="CollapsiblePanel">
            	    <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
            	    <div class="CollapsiblePanelContent">
                    
                                           <div>

                             <ul>
                                <li><img src="slices/ProjectFile_50.jpg" width="42" height="39" /></li>
                               <li><img src="slices/ProjectFile_51.jpg" width="42" height="39" /></li>
                               <li><img src="slices/ProjectFile_52.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_54.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_56.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_58.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_60.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_62.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_64.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_76.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_77.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_78.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_79.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_80.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_81.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_82.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_83.jpg" width="42" height="39" /></li>
                                <li><img src="slices/ProjectFile_84.jpg" width="42" height="39" /></li>
                             </ul>
                      </div>
                    </div>
          	    </div>
            	</div>
                </div>


Les informations affichées après clic sur ces images miniatures se trouvent ici, dans le fichier PHP :

<?php

$response = '<div id="ajax-response"><div class="background"></div><div class="overlay">'; 
$response .= '<img src="images_portfolio/intranetpp_grande.jpg" width="300" height="200" />';
$response .= '<p>Ceci est un site bla bla bla...</p>';
$response .= '</div></div>';
echo $response; // echo or print the ajax response;

?>

Le fichier ne propose donc l'affichage que d'une seule image (et d'un seul texte). Comment faire pour que chaque miniature appelle sa propre image et son propre texte ?

Merci infiniment pour votre aide.

PS : je précise que ça marche aussi avec du "jquery", mais je suis quasi sûr qu'il n'y a pas besoin de toucher à ces fichiers. Si vous pensez qu'il est au contraire important d'afficher leur code, je le ferai avec plaisir.
Modifié par Ralf (30 Jun 2009 - 19:52)
Voilà la ligne qui devrait être fausse.
$response .= '<img src="images_portfolio/intranetpp_grande.jpg" width="300" height="200" />';


Dans cette ligne tu affiches l'image "intranetpp_grande.jpg", hors ce que tu veux c'est "ProjectFile_54.jpg" (par exemple). Je ne sais pas si tu utilise une base de données mais je vais partir du principe que non, ce qui rend la chose un peu plus difficile, à mon avis.

Si j'ai bien compris lorsque tu cliques sur une image, le navigateur va appeler la page "example.com/script_get_img.php" grâce à JQuery et sa fonction $.ajax(). En PHP il existe des variables appelées "Super globales" qui permettent de passer des arguments dans l'adresse ou dans les "headers" (invisibles pour l'utilisateur "de base"), ces arguments sont des tableaux que l'ont peux récupérer grâce aux variables $_GET[] (pour l'adresse) ou $_POST[] (pour les "headers").

Ici on utilisera $_GET[]. Par exemple dans la page "réponse" de ce topic, l'adresse est "forum.alsa..../posting.php?action=newp&tid=42...".
Le script "posting.php" saura que je poste un nouveau message grâce "action=newp" (obtenu en faisant "$_GET["action"]"). Lorsque le script est généré "$_GET["action"]" est remplacé par "newp". Voilà pour la partie théorie.

Pour ton petit souci, il va falloir que l'adresse appelé par Javascript soit "example.com/script_get_img.php?imgid=xx" (tu peux remplacer "imgid" par "id" ou autre chose). "xx" correspondra à ton l'identifiant unique de ton image. Pour générer l'identifiant on va utiliser le nombre qui se trouve dans le nom de tes images, le tout avec JQuery (ça sera plus facile à mettre en place à mon avis).

Attention : Le plus facile serait d'ajouter un id dans la balise img "manuellement"

<img id="..." src="....">


Là je vais un peu deviner ton script en JQuery, faudra que tu l'adaptes un peu. Donc tu devrais avoir


$("ul>li>img").click(function(){
  $.ajax({
    type:"GET"
    url:"./script_get_img.php"
    success:"La fonction qui affiche l'image"
  });
});


Et voilà ce qu'il faut ajouter


// ajoute id="idimg" à tte les img
[b]$("ul>li>img").each(function() {
  var idRecup = $this.attr("src");[/b]
// Attention là j'utilise du javascript "pur", malheureusement je ne sais pas si ça fonctionne mais vu que JQuery n'a pas cette fonction pour manipuler les chaînes de caractères je vois pas d'autres moyens
  [b]var idArray = idRecup.split(".");
  idRecup = idArray.split("_");
  $(this).append("id = " + idRecup[1] + " ")[/b]
});

// fonction ajax modifiée pour "donner" l'id de l'img appelée
$("ul>li>img").click(function(){
  [b]var id = $this.attr("id");[/b] 
  $.ajax({
    type:"GET",
    [b]url:"./script_get_img.php?imgid=" + id.text("id"),[/b]
    success:"La fonction qui affiche l'image",
  });
});


Maintenant il faut modifier un peu ton script en PHP et ça devrait être fini.


$response .= '<img src="images_portfolio[b]/ProjectFile_'.$_GET["imgid"].'[/b].jpg width="300" height="200" />';


Voilà normalement c'est bon, je relirai dans quelques heures pour supprimer les fautes.
Modifié par kurt11 (29 Jun 2009 - 14:41)
Merci beaucoup !
Du coup j'ai honte que tu aies passé tant de temps à m'aider, vu que je comprends vraiment rien de rien à ton code. J'espérais qu'il faille juste changer un ou deux trucs, vu que c'est un tuto d'un magazine que j'ai suivi à la lettre...

Je t'envoie un mp avec des précisions.

Au pire je partirai sur un truc à moi, plus simple Smiley smile
Voilà, tout est parfait. Désolé d'avoir réglé ça en privé, ce n'était pas une démarche égoïste, mais il y avait trop de choses ici et là à chambouler, un cas aussi particulier n'aurait pas aidé qui que ce soit d'autre sur un plan plus général...

En tous cas je remercie kurt pour sa grande patience, avec quelqu'un qui n'a jamais su dépasser la page 10 du "PhP pour les nuls" (j'ai l'air de plaisanter, mais même pas...)
Sujet clos
Aller à