Fancybox images and youtube in 1 gallery

Question

Hello StackOverflowers,

I am having a problem with fancybox, I want to have images and 2 youtube video's in 1 gallery.

It does load and show my images, but it does not putt my videos in the gallery. It is hard to explain so I will link the page where i have this problem here

I load my scripts as following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/jquery.fancybox.css" media="screen" />
    <script type="text/javascript" src="/js/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox-media.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/style.css">
    <link rel="stylesheet" type="text/css" href="/style/jquery.fancybox-thumbs.css" />
    <link rel="stylesheet" type="text/css" href="/style/3dsmax.css" />

I am using some helpers:

$('a.fancybox').fancybox({
        prevEffect : 'none',
        nextEffect : 'none',

        closeBtn  : true,
        arrows    : true,
        nextClick : true,


        helpers : {
            thumbs : {
                width  : 50,
                height : 50
            }
        }
    });

Answer 1

according to fancybox's doc:

You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc)

you should also use the embed url of the video, your <a> tags should now look like this :

<a class="fancybox hidden fancybox.iframe" data-fancybox-group="gallery4" href="https://www.youtube.com/embed/8so-fsGxXZ8"><img src="./Chris Holstein's Portfolio_files/cdpreview.jpg"></a>
<a class="fancybox hidden fancybox.iframe" data-fancybox-group="gallery4" href="https://www.youtube.com/embed/USNfjkTny78"><img src="./Chris Holstein's Portfolio_files/doospreview.jpg"></a>

BTW you should avoid file names with spaces, sometimes it leads to weird behaviour...