Discussion :

[brisso]

Bonjour à tous, ou plutôt re-bonjour...
Me voilà avec un petit soucis que je ne comprend absolument pas.
Sur mon blog wordpresse, j'utilise un effet lightbox grâce à pirobox.
Jusque là tout va bien. J'ai fait un petit script jQuery que voilà :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
     <script type="text/javascript">  
          $(document).ready(function($) {
            $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").each(function(){
                if (!$(this).hasClass('pirobox')) {
                    $(this).addClass('pirobox');
                }
            });
        })
    </script>

Qui me permet d'ajouter la class pirobox à toutes mes images dont l'url pointe vers les images en questions...

Le hick, c'est qu'avec mon script, la class est bien ajouté dans mon image, mais rien ne se passe lorsque je clique dessus. En gros le lien pointe bien vers l'image mais sans effet lightbox.
Le plus incompréhensible c'est qu'en écrivant class="pirobox" manuellement lors de l'édition de mon article, ça fonctionne !

Voilà un exemple sur l'article que je viens d'écrire : article

En regardant la source de l'image d'entête vous vérez bien class="pirobox hovering" (hovering étant pour l'effet d'opacité blanc), dans ce cas, la classe est ajouté en php lors de la création de page.

Dans l'autre cas, sur l'image au coeur de l'article, vous verrez également class="pirobox", cette fois ajouté en js mais rien ne se passe...

Je suis un peu perdu , des éclairages ou des réponses à des cas similaires pourraient m'aider.
Merci

[brisso]

je m'auto-répond...
J'ai finalement trouvé le problème.
La fonction pirobox n'était éxécutée qu'une fois lors du chargement de la page et mon script injectait la class alors que pirobox était déjà éxécuté...du coup. Ba la class était bien là mais ça ne fonctionnait pas.
Après beaucoup de tests de repositionnement de mes différentes lignes de code dans ma page. J'ai finalement positionné mon petit script juste avant que que la fonction pirobox soit éxévutée. Ainsi, la class est créée avant que pirobox ne crée les différentes tables html pour afficher les lightbox.
Je ne sais pas si c'est claire...mais ça fonctionne.

La fin de pirobox.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
...
...
...
$("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").each(function(){
				if (!$(this).hasClass('pirobox')) {
					$(this).addClass('pirobox');
				}
			});
		start_pirobox();
	}
})(jQuery);

[SpaceFrog]

voir aussi live() , on() ou delegate() ...

[brisso]

Merci pour ton conseil, bien que je ne m'y connaisse que très peu et je ne penses pas que les fonctions dont tu parles me concernent ici.

Dans la mesure où pirobox.js est exécuté une fois seulement au chargement de la page. Il n'est déclencher par aucun évènement.

Je m'explique. Pirobox va ajouter dans le DOM les différentes balises nécessaires à l'affichage de la lightbox puis les cacher. C'est seulement lors du click sur l'image que l'évènement "click" pour le coup intervient et affiche les différents éléments préalablement générés puis cachés.

Si j'ai bien compris, live() et on() permettent de liés des éléments à une fonctions même si ils sont générés après l’exécution de cette dernière, hors là, c'est la fonction qu'il aurait fallu exécuter après la création des éléments.

[SpaceFrog]

sisi justement ce sont des methodes qui permettent de faire heriter aux elements crées dynamiquement après le ready, les evenements attibués dans le ready

[brisso]

Et bien alors je n'ai pas bien compris. Si tu pouvais me rediriger vers un exemple ou autre je suis preneur. Je n'ai pas trouvé d'explication ni de démonstration.
Merci