[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

[jfk]

you can bind fancybox to all elements with the same rel attribute (and without having any class) like

$("a[rel=hotel_img]").fancybox();

See JSFIDDLE

---

EDIT :

You could also group elements with different rel attributes within the same fancybox initialization script like :

$("a[rel=hotel_img], a[rel=standart_room_img], a[rel=agents_room_img]").fancybox();

See updated JSFIDDLE

[Author]

Posts