Question

Using JQuery, I am loading a div from an external HTML page into fancybox and am building the link using variables. It is taking two clicks to open it. The first, I believe, is only initiating it. But I don’t know how to fix it. Is there a better way to be doing this?

The HTML is here:

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

The jQuery is here:

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

Thank you so much in advance for any help someone can give me. I have been struggling with this for days.

Answer 1

I think the title of your post is a little bit misleading. Anyway, if I understood right, you just want to load a partial content (DIV) from an external html file into fancybox.
In your example, the file episodeSpeakers.html contains a DIV with ID=’series900′

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

If the above is correct, then you don’t need to use jQuery live(), but binding fancybox to a click() and use ajax and dataFilter to select the content.

With the same html, this script should do the trick:

$("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

or you may use

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

instead of

return false;

---

IMPORTANT : Due to some cross-browser issues, don’t use the dataFilter solution above.
It would be better to use the fancybox’s inline method, adding the partial content (from the external html file) into a hidden DIV within your calling html document and then move it from there into fancybox. It requires (of course) to add such DIV. e.g.:

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

Then use this 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

that works on most browsers.
BTW, the onCleanup option fixes this bug