Youtube Video & Images In the SAME ColorBox?

Question

I'm trying to allow users click on a group of thumbs which will open a colorbox and display the corresponding image/video. The thumb could refer to an image or a video, so colorbox should (hopefully) display it correctly. My current implementation works, but I have two instances of the colorbox, one for the video and one for the images. I was hoping I could find a way to combine both into the same instance and allow for navigation between the two... Is that even possible? Here's what I'm doing:

<div id="imageGallery">
    <ul id="thumbs">
        @if (!string.IsNullOrEmpty(Model.Youtube))
        {
            <li class="galleryImage"><a href="http://www.youtube.com/embed/@YoutubeId(Model.Youtube)" class="detailColorBox" id="youtubeVideo"
            title=""><img src="http://img.youtube.com/vi/@YoutubeId(Model.Youtube)/1.jpg" alt="image thumb" /></a></li>
        }
        @foreach (var img in Model.Images)
        {
            <li class="galleryImage"><a href="@Html.ResolvePath(img, "710x560")" class="detailColorBox" 
rel="itemDetailGallery"  title=""><img src="@Html.ResolvePath(img, "135x135")" alt="image thumb" /></a></li>
        }
    </ul>
</div>

And inside a script tag:

        $("a[rel='itemDetailGallery']").colorbox();

        $("#youtubeVideo").colorbox({iframe:true, innerWidth:425, innerHeight:344});

P.S: I also tried to have an iframe fed with the Youtube video id and display it in the colorbox but that failed as well.

Any thoughts?

Answer 1

Try this...

$(".detailColorBox").colorbox({rel:'group1'});
$("#youtubeVideo").colorbox({rel:'group1',iframe:true, innerWidth:425, innerHeight:344});