Je vais parler aujourd’hui d’une petite aventure qui m’est arrivée avec fancybox. Pour les besoins d’un projet WordPress utilisant le plugin Team, j’avais pour mission de masquer les éléments affichés sauf la photo, puis d’afficher ces éléments dans une fancybox au click sur la photo. Problème : fancybox ne s’exécute qu’au second click. Et il y a une raison à celà !Voici la partie html :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="ns-bp-team-box"> <div class="ns-bp-team-box-inner"> <div class="member-img"> <img width="400" height="400" alt="17d560b" class="attachment-full wp-post-image" src="http://site.me/img/17d560b.jpg"> </div> <a rel="lightbox" class="fancybox" href="#"> <h4 style="text-decoration: underline; cursor: pointer;">Jane Do</h4> </a> <div class="member-role">Project manager</div> <p style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="member-social"> <ul> <li class="member-social-email"><a data-original-title="Mail" href="mailto:mail@mail.me">Email me</a> </li> </ul> </div> </div> </div> |
Le but du jeu est de masquer par exemple la balise <p> pour ensuite l’injecter lors du clic sur le nom (<a> <h4>) dans une fancybox.
La démarche me semblait simple :
- masquer le contenu
- créer un click event
- récupérer le contenu dans une variable à ce moment là
- le passer en valeur de « content » dans fancybox
Voici le code js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Team View $ = jQuery.noConflict(); $(document).ready(function () { var teamBox = $('.ns-bp-team-box'); // hide contents var contents = teamBox.find($('.ns-bp-team-box-inner p')).hide(); // fancybox - on click on the name, fancybox appears with the p content text $('.fancybox').on('click', function(e){ var content = $(this).parent().parent().find($('p')).text(); $(this).fancybox({ content: content, padding : 20, maxWidth : '600px', maxHeigh : '800px' }); }); }); |
Erreur : obligé de cliquer 2x pour faire apparaitre la fancybox.
En réalité ce qui se passe, c’est que lorsqu’on attache l’event click, on se contente de binder le lien .fancybox, mais aucun trigger event n’est initialisé.
Ce qu’il faut faire, c’est chaîner le .fancybox() directement après l’event click.
Voici la partie html à nouveau avec un href qui pointe vers une div vide et masquée :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="ns-bp-team-box"> <div class="ns-bp-team-box-inner"> <div class="member-img"> <img width="400" height="400" alt="17d560b" class="attachment-full wp-post-image" src="http://site.me/img/17d560b.jpg"> </div> <a rel="lightbox" class="fancybox" href="#target"> <h4 style="text-decoration: underline; cursor: pointer;">Jane Do</h4> </a> <div class="member-role">Project manager</div> <p style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="member-social"> <ul> <li class="member-social-email"><a data-original-title="Mail" href="mailto:mail@mail.me">Email me</a> </li> </ul> </div> </div> </div> <div id="target" style="display:none"></div> |
et le js corrigé :
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 27 | // Team View $ = jQuery.noConflict(); $(document).ready(function () { var teamBox = $('.ns-bp-team-box'); var content; var target = $('#target'); // hide contents var contents = $(this).find($('.ns-bp-team-box-inner p')).hide(); // Binds .fancybox to fancybox THEN trigger it right after $('.fancybox').on('click', function (e) { e.preventDefault(); // Get content and had it to the #target div content = $(this).parent().parent().find($('p')).text(); target.html(content); }).fancybox({ // trigger fancybox content: target, padding: 20, maxWidth: '600px', maxHeigh: '800px', afterClose: function () { // empty the #target target.html(); } }); }); |
Voilà, c’est tout. Celà fait partie de ces subtilités inhérentes au javascript. Hope this’ll help 😉
$ = jQuery.noConflict();
Cette ligne permet de redéclarer l’objet jQuery en mode sans conflit, pour l’utilisation éventuelle d’une autre bibliothèque qui utiliserait également le symbole $ comme Mootools ou Angular.
Redéfinir cet objet et le restoquer dans un $ n’aura aucun effet.
j = $ = jQuery.noConflict();
j(document).ready(function () {
………….
On utilisera plutôt un nom d’objet différent du $.
Cheers.
Exact. C’est également le cas lorsqu’on veut faire cohabiter plusieurs version différentes de jQuery (exemple avec Liferay…)
Niquel l’article j’avais le même problème puis je cherchais à mettre du contenu HTML directement dans la fancy et à chaque fois que je le fais je ne me souviens plus de la bonne méthode pour y arriver, il devrait sincèrement pouvoir le proposer nativement avec comme cible le href d’un lien cliqué href= »#target-container », ça simplifierai les choses.
Encore merci de l’article 🙂