<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 :

// 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 :

<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é :

// 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

L’article Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click est apparu en premier sur DesireLabs.