Question

I’m trying to get a video list w/ thumbnails working with Fancybox – the problem is that it seems each link uses classes to launch the fancybox

What if i want this to be more dynamic, a list of video links and each one opens a new video? I shouldnt have to create a new click function defintion for each one do i?

<script type="text/javascript">

    $(document).ready(function () {

$(“.fancyvideo5”).click(function () {
$.fancybox({
‘padding’: 0,
‘overlayOpacity’: 0.7,
‘autoDimensions’: false,
‘content’: ‘myConent’,
‘onComplete’: function () { $(“#fancybox-inner”).css({ ‘overflow’: ‘hidden’ }); },
‘onClosed’: function () { $(“#fancybox-inner”).empty(); }
});
return false;
}); // fancyvideo

and the body will have something like:

<ul>

    <li>
        <a title="test" href="javascript:;" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>
    </li>                                                                              

</ul>

id like to have something like

<a title="test" href="javascript:openVideo(1);" class="fancyvideo5"><img  src="thumbnail.jpg" /></a>

So i can pass the video information and call the function instead of everything on document ready.

Thanks

Answer 1

I haven’t used fancybox in awhile, but if I remember correctly you can use one fancybox function.

$(document).ready(function () {
    $(a.fancyvideo).fancybox(
         //settings
));

Then, for you links

<a href="#video" class="fancyvideo" />
<a href="#video2" class="fancyvideo" />
<a href="#video3" class="fancyvideo" />
<a href="#video4" class="fancyvideo" />

and

<div id="video" style="display: none;"> 
//insert embed code here
</div>
<div id="video2" style="display: none;"> 
//insert embed code here
</div>

<div id="video3" style="display: none;"> 
//insert embed code here
</div>

<div id="video4" style="display: none;"> 
//insert embed code here
</div>