jquery append et slim box-->incompatible?

[13pixels]

Allez, je rentre direct dans le vif du sujet.

Je suis en train de mettre une touche finale à mon site avant d'y ajouter son contenu.

J'utilise Wordpress comme moteur, jQuery comme bibliothèque JavaScript et slimbox2 comme script d'affichage pour mes images.

Le problème est dans mon portfolio de projets. J'utilise un script qui me permet d'afficher mes travaux grâce à un accordéon un peut améliorer.Celui-ci fonctionne bien, mais c'est le contenu qui déconne.

En fait, j'affiche 3 images cliquables par ligne. Le clic sur une de ces images me permet d'afficher le contenu de l'article en dessous de ces 3 images. Pour faire çà, je clone le contenu de l'article caché dans la div qui suit juste après les 3 images. Le contenu apparaît bien mis en page, mais le "slimbox" de ces images ne fonctionne pas et ouvre l'image dans une nouvelle page.

Par contre quand je "décache" le contenu de l'article (pas le clone mais l'original) et que je clic sur l'image, çà fonctionne.

Quelqu'un aurait une piste svp? Merci d'avance.

Le lien vers la page en question:

--> ici <--

[Sarc]

Bonjour,

Oui, je pense savoir ce qui ne va pas, à vue de nez, avec ton explication. En fait, les fonctions jquery de base ($('#machin').click() par exemple) ne fonctionnent que sur les projets qui ont été créés en HTML dur !

Si tu crées un objet en javascript, cette fonction n'aura aucun impact sur lui...

Pour faire en sorte que ça marche, il faut utiliser la fonction live() de jquery, qui marche comme ceci :

$('#machin').live('click', function(){...});

J'espère que ça pourra te faire avancer. N'hésite pas à aller voir l'API de live sur le site officiel.

[13pixels]

Ok, merci. Au moins, maintenant je sais ce qui déconnait. Je vais devoir trifouiller dans le code de slimbox pour faire en sorte que çà fonctionne avec "live". Je mettrais les modifs si je trouve le moyen d'y arriver tout seul.

[Sarc]

Il semble que quelqu'un ait résolu le problème sur le forum d'AlsaCréations.

[13pixels]

La, du coup, je suis un peut perdu. Je croyais que je devais utiliser "live". La solution d'AlsaCréation n'a pas l'air de fonctionner pour pour moi. Je l'ai peut-être mal mise. Je dois avouer que j'ai pas tout compris...

[Sarc]

Disons que je rajoutais de l'eau au moulin. Le mieux est effectivement d'utiliser live, avec l'événement "click", et de pouvoir faire en sorte que le slimbox se lance quand on clique sur l'élément. Mais je ne connais pas le code slimbox, donc je ne sais pas comment on peut le lancer...

Après, je te montrais le forum d'Alsa pour information, une autre piste à fouiller si jamais la solution avec le live ne marchait pas. Apparemment, quand l'état du DOM change, il relance une fonction qui applique lightbox à toutes les images concernées.

[13pixels]

T'inquiètes Sarc, j'ai pris ton message comme une nouvelle piste et c'est clair que çà m'aide à avancer. Je me sens juste un peut frustré qu'une chose pareil soit si compliqué à réaliser.

Je vais mettre le code qui me permet de gérer mon accordéon.

/*  Portfolio Scripts
       Grafikart, www.grafikart.fr */
$(document).ready(function(){
    var portfolioCourant = null;

     $(".work").click(function(){
            portfolio.show($(this));
            return false;
      });
});
var portfolio = {
    courant : null,
    clicked : null,
    show : function(clicked){
            portfolio.clicked = clicked;
            if(this.courant!=null && this.courant.text() == clicked.next(".detail").text()){
                this.courant.slideUp(500,function(){
                    portfolio.courant.remove();
                    portfolio.courant=null;
                });
                return false;
            }
            if(this.courant!=null){
                this.courant.slideUp(500,function(){
                    portfolio.courant.remove();
                    portfolio.courant=null;
                    portfolio.show(portfolio.clicked);
                    return false;
                });
                return false;
            }
            clicked.nextAll(".Space:first").append('<div class="detail">'+clicked.next(".detail").html()+'</div>');
            var clone = clicked.nextAll(".Space:first").find(".detail");
            this.courant=clone;

            clone.css({
				visibility: "visible",
				height: "auto",
			}).hide().slideDown(500,function(){
                   scrollTo(clone);
            });
    },
    hide : function(clicked){
        portfolio.courant.slideUp(500,function(){
            portfolio.courant.remove();
            portfolio.courant=null;
            scrollTo($(".work:first")); 
        });
    }};

Je devrais rajouter le live dans ce code ou en dehors?

Merci pour ton aide en tout cas.

[Sarc]

En fait, ce n'est pas trop le code ton accordéon qui est important ici, mais plutôt celui qui gère le slimbox. Ton accordéon marche sans souci, et te crée le contenu que tu souhaitais, donc c'est bon. Maintenant, il faut s'assurer que le slimbox marchera partout, même sur les objets nouvellement créés.

Dans le code de ton slimbox.js, il doit sûrement y avoir "$(truc).click()" quelque part, où il met "quand on clique sur une image dont l'attribut rel est ça, alors on lance l'effet slimbox".

A la place de click, il faut mettre live('click', function{}).

J'espère que je suis compréhensible... A peu près.

[13pixels]

Tu es très compréhensible merci.

Pour éviter de toucher au code du 'lightbox", est-ce que c'est possible de faire un fonction dans mon fichier javascript qui automatise le live('click',function{}) sur mes images.

J'ai rajouté çà tout à la fin du fichier pour tester et çà me change bien le background:

$('a[rel=gallery]').live('click', function() {
  $(".Space").css({'background-color':"red"},500);
  return false;
});

De la même manière est-ce qu'il y a des chances que çà fonctionne?

[Sarc]

Je viens de regarder un peu le code de slimbox, que je ne connaissais pas.

En effet, c'est du côté de l'AUTOLOAD CODE BLOCK qu'il faut modifier des choses. Eux, ils donnent ça :

// 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));
		});
	});
}

Essaye voir en modifiant un peu ça, et par exemple en mettant :

$("a[rel^='lightbox']").live('click', function(){
slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});

Pas certain que ça marche en l'état, mais il faut voir...

[13pixels]

Merci pour ta persévérance sarc mais j'ai essayé sur l'exemple fourni avec le plugin et çà fonctionne pas. C'est vraiment bizarre ce truc...

[Sarc]

C'est pas bizarre, c'est juste que le web francophone manque énormément de ressources en jquery, et que donc, soit on cherche sur l'anglophone, soit on se dépatouille.

Bref, en fait, c'était tout bête : une fois que tu as fait ton append, il suffit que tu relances un coup de :

$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});

Comme ça, ça remet un slimbox sur tous les objets qui existent après ton append, et donc, ta nouvelle image sera concernée...

Enfin, tu changes lightbox par gallery, si j'ai bien fait gaffe à ton code, bien entendu.

J'ai fait un test rapidement sur l'exemple de base, et ça marche comme il faut.

Bonne chance, et excuse-moi d'avoir tourné autour du pot (et de la solution).

[13pixels]

:!: :!:

T'assures, c'est tout bon. Tu peux te dire que tu as passé une journée à aider quelqu'un qui te revaudra çà pendant un bon bout de temps. Ca fonctionne comme sur des roulettes. Grand merci.

Je mets le code pour tout le monde, on sait jamais.

/*  Portfolio Scripts
       Grafikart, www.grafikart.fr */
$(document).ready(function(){
    var portfolioCourant = null;

     $(".work").click(function(){
            portfolio.show($(this));
            return false;
      });
});
var portfolio = {
    courant : null,
    clicked : null,
    show : function(clicked){
            portfolio.clicked = clicked;
            if(this.courant!=null && this.courant.text() == clicked.next(".detail").text()){
                this.courant.slideUp(500,function(){
                    portfolio.courant.remove();
                    portfolio.courant=null;
                });
                return false;
            }
            if(this.courant!=null){
                this.courant.slideUp(500,function(){
                    portfolio.courant.remove();
                    portfolio.courant=null;
                    portfolio.show(portfolio.clicked);
                    return false;
                });
                return false;
            }
            clicked.nextAll(".Space:first").append('<div class="detail">'+clicked.next(".detail").html()+'</div>');

			var clone = clicked.nextAll(".Space:first").find(".detail");
            this.courant=clone;
			clone.css({
				visibility: "visible",
				height: "auto",
			})

			.hide().slideDown(500,function(){
                   scrollTo(clone);
            });






//réinitialise le slimbox après l'ajout de code html via le code ci-dessus pour que le nouveau code soit pris en compte

	$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});






},


    hide : function(clicked){
        portfolio.courant.slideUp(500,function(){
            portfolio.courant.remove();
            portfolio.courant=null;
            scrollTo($(".work:first")); 
        });
    }};

J'ai beaucoup appris grâce à toi.