[neil-hillman]

I am trying to trigger a FancyBox overlay when a DIV is clicked.

(I have seen several posts about triggering FancyBox from an Anchor click, but none address this. Also, I can’t use an Anchor instead of a DIV, because my clickable overlay will contain several block elements, and it is not kosher to have an inline element spanning block elements).

This is a simplified version of my code. (I will attach a JSfiddle at the end with the FULL code):

<div id="eAcon6LPgHo" class="youtube_box">
    <img src="http://img.youtube.com/vi/eAcon6LPgHo/0.jpg"/>
    <span class="caption">
        <h3>Dan Bull Raps Fast</h3>
    </span><!--/.caption-->
</div><!--/.youtube_box-->

.

$( document ).ready(function() {
    $( ".youtube_box" ).click(function() {
        var YouTubeID = this.id;
        // alert( "clicked: " + YouTubeID );
        $.fancybox({
            href : 'http://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
        });
    });
});

When my DIV is clicked, the YouTube ID is retrieved from the element ID, (I have testing this with the commented out alert). However, FancyBox is never triggered, nor do I get any error messages.

I have set-up a full JSfiddle with my code here:
http://jsfiddle.net/5pd6egbo/

Please help!

[zgood]

Specifying the type as iframe seems to make it work.

$( document ).ready(function() {
   $( ".youtube_box" ).click(function() {
      var YouTubeID = this.id;

      $.fancybox({
          href : 'https://www.youtube.com/embed/' + YouTubeID + '?autoplay=1'
      }, {
          type: 'iframe'
      });
   });
}); 

See this Fiddle.

[jfk]

One of the easiest ways to do it is using the special data-fancybox attributes in your <div> tag like :

<div id="eAcon6LPgHo" class="youtube_box" data-fancybox-href="http://www.youtube.com/embed/eAcon6LPgHo?autoplay=1" data-fancybox-type="iframe">
    <img src="http://img.youtube.com/vi/eAcon6LPgHo/0.jpg"/>
    <span class="caption">
        <h3>Dan Bull Raps Fast</h3>
    </span><!--/.caption-->
</div><!--/.youtube_box-->

Then you can use the usual fancybox initialization script :

jQuery(document).ready(function ($) {
    $('.youtube_box').fancybox();
}); // ready

No need to use the .click() method.

See JSFIDDLE

[Author]

Posts