gallerie"s" en jquery dans le style zoombox
Bonjour a tous et a toutes,
je me tourne vers vous pour un petit conseille. J'ai dans mon menu principal un lien "galerie" qui m'envoie vers "index.php?p=galerie".
Arriver sur cette page j'ai plusieurs galerie qui s'affiche.
Je clique sur une galerie pour voir son contenu, l'url alors deviens "index.php?p=galerie&n=nomGalerie".
En php il n'y a pas de soucis je récupère bien toutes les images de cette galerie.
Jusque la tout fonctionne bien.
Ce que je voudrais parvenir à faire c'est ouvrir cette url dans une box du genre zoombox ou lightbox.
Pourriez-vous me conseiller s'il vous plait.
Cordialement.
7 réponses
Si tu veux passer des variables à ta page php qui les reçoit en GET tu utiliseras la fonction get d'Ajax et tu feras une concaténation de ta variable.
Pour afficher les données tu renvoies les données que tu pourras traiter et ajouter sur ta page à l'endroit désiré avec la fonction append de jquery par exemple.
Je suis pas expert de Javascript n'ayant eu que très peu l'utilité de ce dernier néanmoins ton append je pense qu'il faudrait faire au retour de ta fonction php donc exactement là où tu le dis.
En gros tu envoies une requête ajax en GET à ta page php qui va se charger de te renvoyer le contenu que tu veux afficher et t'affiche le tout à l'endroit souhaité en utilisant le append enfin j'imagine que ça se fait ainsi.
Si tu regardes ici tu peux aussi utiliser le raccourci $.get() qui te permettra d'envoyer une requête php dans ta fonction de retour tu récupères les données renvoyées par ta page php et tu fais ton append à l'endroit voulu.
Sinon avec ta manière tu peux rajouter un argument dataType : "html", pour récupérer du html que tu pourras insérer où tu le souhaites.
Et dans ton data:"n="+param, veut dire que tu vas envoyer un argument GET à ta php donc ajax va faire ceci automatique:
"mapage.php?n=" la valeur de param. Donc ta page récupérera un GET'n'] avec pour valeur ce qui est contenu dans param de ton script javascript.
Alors en fait, il faut créer une div vide avec un id
pour charger tes urls dans cette div tu utilise la fonction jQuery $.load
Il ne te reste plus qu'a mettre ta div en position absolute et tu auras une box type zoombox ;)
Tu mets la classe "zoombox zgallery (numéro de la galerie)" au lien tout simplement pour zoombox qui propose aussi le thème ligthbox.
Merci Xtr3me.
Mais en faite je voulais le faire par moi même sans reprendre un plugin déjà existant.
J'ai vue qu'il y a le $.ajax ainsi que $.post et $.get.
En faite j'arrive a récupère le dernier paramètre de mon URL mais je n'arrive pas a l'envoyer comme variable
$(".galleries").click(function(){
var url = $(this).attr("href").split("&");
var elem = url[1].split("=");
var param = elem[1];
return false;
});avec ce code je récupère le paramètre qu'il me faut et je voudrais l'envoyer à mon fichier php ou il y a ma requête pour récupérer les images correspondantes a cette galerie.
Ensuite je voudrais récupérer ces données pour les afficher.
je vous demande pas de me le faire juste de m’expliquer ca j'ai du mal a comprendre comment passer ces variables.
Merci encore.
si je comprends bien ca donnerais quelque chose comme :
$(".galleries").click(function(){
var url = $(this).attr("href").split("&");
var elem = url[1].split("=");
var param = elem[1];
$.ajax({
type: "GET",
url: "mapage.php", // la page ou je fais la rêquete sql
data: "n="+ param, // et le "n" je le recupere dans la page avec $_GET'n'] ??
success: function(data){
// et ici je fais le append ?
}
});
return false;
});je vais essayer merci
Merci bien pour les conseils en faite j'ai choisi de passer par le raccourci $.get et ca donne ceci
$.get("/module/galerie/core/affiche.php",{n : param}, function(data){
$("#boxGal").append(data);
});je récupère et affiche bien les données dans ma div vide bien. je n'ai plus qu'a m'attaquer au css.
Merci beaucoup de votre aide.
Amicalement,
Édit : je me suis tromper lors du clique "valider cette réponse" je voulais valider le dernier message de "Xtr3me" et celui de "2b3ez". encore désolé