Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click

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 :

17d560b
<a rel="lightbox" class="fancybox" href="#"> <h4 style="text-decoration: underline; cursor: pointer;">Jane Do</h4> </a>
Project manager
<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> </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 :

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

Voici le jsFiddle

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 :

17d560b
<a rel="lightbox" class="fancybox" href="#target"> <h4 style="text-decoration: underline; cursor: pointer;">Jane Do</h4> </a>
Project manager
<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> </div>

et le js corrigé :

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

 Et le jsFiddle 🙂

Voilà, c’est tout. Celà fait partie de ces subtilités inhérentes au javascript. Hope this’ll help 😉

3 commentaires sur “Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click

  1. $ = 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.

    J'aime

  2. 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 🙂

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s