Fancybox Images and Video in same Gallery

Question

I'm using fancy box for my pop-up gallery but I'm having a problem. I want to have images and videos in the same gallery. I have a thumbnail that shows different work in my portfolio and we are a design and video firm so its essential that I'm have the ability to do both in the same pop-up-gallery. Has anyone else ran into this problem before? I'd imagine it's pretty common for people to want to do this.

Here is my mark up...I have the same rel attribute so they are in the same gallery but I'm calling a different script so that the type can be properly set.

$("a#brianguehring").fancybox();

$("a#brianguehring-video").fancybox({ 
    'type'          : 'swf',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
});

<span>
<a class="grouped_elements icon_camera" rel="group-brian" id="brianguehring" title="Brian Guehring Website" href="images/portfolio/brianguehring-one.png"></a>
</span>

<span>
<a class="grouped_elements" rel="group-brian" id="brianguehring-video" title="Pasquale Vitello'Showreel 2010" href="http://vimeo.com/24081323">&nbsp;</a>
</span>

Answer 1

Here I have got it working. I assume you want the image and the video in the same group. I put the working example here on JS Fiddle - http://jsfiddle.net/4pAQz/1/

Your JS call would look like this. And it all has to be in one call.

$(document).ready(function(e) {
$("a[rel=example_group]").fancybox({
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'titlePosition'     : 'over',
    'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-over">Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
    }
});
});

Your HTML would look like this: NOTICE: notice that the href for the Vimeo player is the player.vimeo.com/video/YourIDHere. No need for the SWF code. It just works. You also need both anchor rel="" to be the same name so the objects are put into the same group.

<div>
 <a rel="example_group" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">
 <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" />
 </a>
 <a rel="example_group" title="Title of video here" class="various iframe" href="http://player.vimeo.com/video/24081323?title=0&amp;byline=0&amp;portrait=0">
 <img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" />
 </a></div>