Fancybox prend 2 clics pour ouvrir le contenu chargé dynamiquement

Question

En utilisant JQuery, je charge un div d'une page HTML externe dans fancybox et je construis le lien en utilisant des variables. Il faut deux clics pour l'ouvrir. Le premier, je crois, ne fait que l'initier. Mais je ne sais pas comment le réparer. Y a-t-il une meilleure façon de faire cela?

Le code HTML est ici:

<a class="BannerVideoAwesome fancybox" id="series900" border="0" href="/mkting/Videos/Speakers.html"><img src="/images/titles/CM/series-speakers-video.jpg" border="0" align="left" /></a> 

Le jQuery est ici:

$('a.BannerVideoAwesome').live('click', function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var grabVid = '#' + $(this).attr('id'); 
    vidObject = url + grabVid; 
    var vidContents = vidObject.html(); 
    alert(vidContents); 
    $.fancybox({ 
      //'href': url, 
      'content':'vidContents' 
        }); 

Merci beaucoup d'avance pour toute personne d'aide peut me donner. J'ai lutté avec cela pendant des jours.

Answer 1

Je pense que le titre de votre message est un peu trompeur. Quoi qu'il en soit, si j'ai bien compris, vous voulez juste charger un contenu partiel (DIV) à partir d'un fichier html externe dans fancybox. Dans votre exemple, le fichier contient un episodeSpeakers.html DIV avec ID = « series900 »

<div id="series900">selected content</div> 

Si ce qui précède est exact, alors vous n'avez pas besoin d'utiliser en direct jQuery(), mais la liaison fancybox à un Cliquez sur() et utilisez ajax et dataFilter pour sélectionner le contenu.

Avec le même html, ce script devrait faire l'affaire:

$("a.BannerVideoAwesome").click(function() { 
var grabVid = "#"+$(this).attr('id'); 
$.fancybox(this,{ 
'type': 'ajax', 
'ajax': { 
    dataFilter: function(data) { 
    var vidContents = $(data); 
    vidContents = $(grabVid, vidContents); 
    return(vidContents); 
    } // datafilter 
} // ajax 
}); // fancybox 
return false; 
}); //click 

ou vous pouvez utiliser

$("a.BannerVideoAwesome").click(function(event) { 
event.preventDefault(); 
. 
. 

au lieu de

return false; 

---

IMPORTANT: En raison de problèmes de navigateur, n'utilisez pas la solution dataFilter ci-dessus. Il serait préférable d'utiliser la méthode inline de fancybox, en ajoutant le contenu partiel (à partir du fichier html externe) dans une DIV divisée dans votre document html appelant, puis déplacez-le de là dans fancybox. Il faut (bien sûr) ajouter un tel DIV. .: par exemple

<div style="display: none;"> 
<div id="fancyContent"></div> 
</div> 

Ensuite, utilisez ce script:

$("a.BannerVideoAwesome").click(function() { 
var grabVid = "#"+$(this).attr('id'); 
$.ajax({ 
type: "GET", // default 
dataType: "html",  
cache: false,      
url: this.href, 
success: function (data) { 
    $("#fancyContent").html(grabVid ? $("<div>").append(data).find(grabVid) : data); 
    $.fancybox({ 
    'href': "#fancyContent", 
    'onCleanup': function() { 
    var fancyContent = this.href; 
    $(fancyContent).unwrap().empty(); 
    } // onCleanup 
    }); // fancybox 
} // success 
}); //ajax 
return false; 
}); //click 

qui fonctionne sur la plupart des navigateurs. BTW, l'option onCleanup fixe this bug

Answer 2

Essayez de passer de cliquez sur événement dans mouseover.

$('a.BannerVideoAwesome').live('mouseover', function(e){ 
... 

Answer 3

$('a.BannerVideoAwesome').live('click', function (event) { 
    $.fancybox(this,{ 
     'autoDimensions': true, 
     'autoScale': true, 
     'transitionIn': 'none', 
     'transitionOut': 'none', 
     'type': 'ajax', 
     'padding': 0 
    }); 
    event.preventDefault(); 
});