How can I make a FancyBox overlay appear when a DIV is clicked?
I have searched for ways to trigger FancyBox through an Anchor click, but none of the solutions address my specific situation. I need to use a DIV instead of an Anchor because my clickable overlay will contain multiple block elements, and it is not recommended to have an inline element spanning block elements.
Below is a simplified version of the code I am working with (the complete code will be included in a JSfiddle link at the end):
<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 the DIV is clicked, the YouTube ID is retrieved from the element ID (I confirmed this with the commented out alert). However, FancyBox does not get triggered, and there are no error messages shown.
You can view the full code on JSfiddle here: http://jsfiddle.net/5pd6egbo/
I would greatly appreciate your assistance!