IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] slimbox + Ajax


Sujet :

AJAX

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    825
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 825
    Par défaut [AJAX] slimbox + Ajax
    Bonjour à tous,

    je réalise une galerie d'image et j'utilise slimbox pour un effet sur les images. mon problème se situe lors de l'exécution d'ajax.

    Je clique sur une catégorie, qui exécute de l'ajax+page php et me retourne les images dans un div.

    Le problème c'est qu'avec slimbox lorsque je sélectionne une un catégorie (donc ajax) l'effet slimbox n'est plus (ouverture d'une pagewweb classique).

    en fait slimbox check les a href de la page , mais quand je modifie le contenue de la page (div) avec de l'ajax, slimbox ne voit rien.

    Je recherche de l'aide pour résoudre mon problème (j'ai regardé google, mais j'ai pas trouvé).

    Comment dire a slimbox de relister la page avec les modifications?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    function select_categore(nb)
    {
     var xhr = getXhr();
     
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                   if(xhr.readyState == 4 && xhr.status == 200){
                      leselect = xhr.responseText;
     
                      // On se sert de innerHTML pour rajouter les options a la liste
                      document.getElementById('bg-gallery').innerHTML = leselect;
     
    				}
    				}
                // Ici on va voir comment faire du post
     
               xhr.open("POST","ajax/ajax_select_categorie.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                //alert(idauteur);
    			idauteur = nb;
                xhr.send("idauteur="+idauteur);
    php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
       include ("../fonction/bdd.php");
    connexion();
    if(isset($_POST['idauteur']))
    {
     
    $id_categorie=$_POST['idauteur'];
     $sql3 = "select id_gallery, titre_image, des_image, mini_image, normal_image, DATE_FORMAT(date_image,'%d/%m/%Y') as date_image  FROM gallery WHERE id_categorie='$id_categorie' ORDER BY date_image LIMIT 1";
    echo $sql3;
       $query3 = mysql_query($sql3) or die('erreur');
       $nb3= mysql_num_rows($query3);
       if ($nb3 == null){
       echo "<br/> Pas";
       } 
       else 
       {
       while($row = mysql_fetch_assoc($query3))
       {
       echo 'div class="image><a href="img/galerie/normal/'.$row["normal_image"].'" rel="lightbox" title="my caption" ><img src="img/galerie/mini/'.$row["mini_image"].'" alt="creation" /></a>';
       echo '<p>Titre:'.$row["titre_image"].'<p><p>Date:'.$row["date_image"].'<p><p>Logiciel:';
       $id_gallery=$row["id_gallery"];
     
    	}
    }
    }

    Merci

    guigui69

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut.
    Citation Envoyé par guigui69 Voir le message
    j'ai regardé google, mais j'ai pas trouvé
    C'est pourtant un problème déjà traité et expliqué dans la FAQ : http://javascript.developpez.com/faq/?page=Ajax#majAjax
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    825
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 825
    Par défaut
    Merci pour ton aide,

    j'ai lu la FAQ mais je ne sais pas quoi mettre dans l'afterajax,

    Car lorsque ma page des images s'exécute hormis le fait de mettre les fichiers javascript dans le head et mettre ref="slimbox" dans les a href c'est tout , je n'ai rien indiquer de plus.

    jquery.js et silmbox2.js:

    silmbox2.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    /*
    	Slimbox v2.03 - The ultimate lightweight Lightbox clone for jQuery
    	(c) 2007-2009 Christophe Beyls <http://www.digitalia.be>
    	MIT-style license.
    */
    (function(w){var E=w(window),u,g,F=-1,o,x,D,v,y,L,s,n=!window.XMLHttpRequest,e=window.opera&&(document.compatMode=="CSS1Compat")&&(w.browser.version>=9.3),m=document.documentElement,l={},t=new Image(),J=new Image(),H,a,h,q,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));h=w('<div id="lbImage" />').appendTo(a).append(q=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(f)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+((e?m.clientHeight:E.height())/2);L=u.initialWidth;s=u.initialHeight;w(a).css({top:Math.max(0,y-(s/2)),width:L,height:s,marginLeft:-L/2}).show();v=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();k(1);g=O;u.loop=u.loop&&(g.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=e?m.clientWidth:E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function k(M){w("object").add(n?"select":"embed").each(function(O,P){if(M){w.data(P,"slimbox",P.style.visibility)}P.style.visibility=M?"hidden":w.data(P,"slimbox")});var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",p)}function p(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?f():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function f(){return b(D)}function b(M){if(M>=0){F=M;o=g[F][0];x=(F||(u.loop?g.length:0))-1;D=((F+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";l=new Image();l.onload=j;l.src=o}return false}function j(){a.className="";w(h).css({backgroundImage:"url("+o+")",visibility:"hidden",display:""});w(q).width(l.width);w([q,I,d]).height(l.height);w(A).html(g[F][1]||"");w(K).html((((g.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(x>=0){t.src=g[x][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;s=h.offsetHeight;var M=Math.max(0,y-(s/2));if(a.offsetHeight!=s){w(a).animate({height:s,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+s,marginLeft:-L/2,visibility:"hidden",display:""});w(h).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,i)})}function i(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function r(){l.onload=null;l.src=t.src=J.src=o;w([a,h,c]).stop(true);w([I,d,h,G]).hide()}function C(){if(F>=0){r();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,k)}return false}})(jQuery);
     
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    	jQuery(function($) {
    		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    		});
    	});
    }
    Merci d'avance pour votre aide

    guigui69

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut.

    Tout d'abord, même s'il est bon de mettre un peu les mains dans le cambouis pour comprendre le fonctionnement d'AJAX, c'est dommage d'utiliser jQuery pour un effet et pas pour le reste de ta page...

    Pour revenir à ton soucis, le "afterajax de la FAQ correspond au callback de ta requête, donc à priori, dans ton cas, il suffit d'ajouter une ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    document.getElementById('bg-gallery').innerHTML = leselect;
    $('#bg-gallery').slimbox({/* Put custom options here */}, null, function(el) {
    	return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    825
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 825
    Par défaut
    Tout d'abord, même s'il est bon de mettre un peu les mains dans le cambouis pour comprendre le fonctionnement d'AJAX, c'est dommage d'utiliser jQuery pour un effet et pas pour le reste de ta page...

    qu'entends tu par la?Utiliser jquery sur tout ma page?


    Merci pour ces indications je regarde ca debut de semaine.

    guigui69

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ben le code de ton premier post n'utilise pas les fonctions AJAX de jQuery qui permettent de simplifier la syntaxe.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    825
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 825
    Par défaut
    D'accord je regarde ca

    Merci encore.

    guigui69

Discussions similaires

  1. [AJAX] Utilisation ajax
    Par Benjiijneb dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 10/04/2006, 18h48
  2. [AJAX] Source Ajax
    Par Hesiode dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 15/03/2006, 21h04
  3. [AJAX] Affichage ajax
    Par matique dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 11/03/2006, 19h28
  4. [AJAX] Utilisation AJAX
    Par topolino dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/02/2006, 09h30
  5. [AJAX] Utilisation AJAX
    Par illegalsene dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 24/01/2006, 11h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo