CODEWITHSUNDEEP
jqueryvideoimage-galleryvimeofancybox-2
user2394818
user2394818

Reputation: 11

Using vimeo video and images in one fancybox pop-up

<section id="smoking-full">

  <a class="various" data-fancybox-group="group5" title="" data-fancybox-type="iframe"       href="http://player.vimeo.com/video/56039083">
  <a class="fancybox" data-fancybox-group="group4" title="" href="Images/cue/design/2.png">

  <img src="Images/smoking/smoking_full.jpg" alt="2" class="image_full"/></a>

</section>

I've given each item it's own fancy-box class, but is there anyway to combine them so the pop-up has both items in the carousel?

Upvotes: 1

Views: 4415

Answers (1)

JFK
JFK

Reputation: 41143

Basically all your anchors have to share the same class AND the same data-fancybox-group to be within the same gallery. Then each may have a different data-fancybox-type to differentiate the type of content.

so the html :

<a class="fancybox" data-fancybox-group="group01" title="" data-fancybox-type="image"  href="http://fancyapps.com/fancybox/demo/1_b.jpg">open image in gallery</a>
<a class="fancybox" data-fancybox-group="group01" title="" data-fancybox-type="iframe" href="http://player.vimeo.com/video/56039083">open video in gallery</a>

Since the fancybox's gallery navigation buttons may block some of the video controls, you may prefer to move them outside of the content (for iframe only) with css :

.fancybox-type-iframe .fancybox-nav {
    width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}
.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}
.fancybox-type-iframe .fancybox-next {
    right: -60px;
}
.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

And then you can use this script for your gallery

$(".fancybox").fancybox({
    // solves some issues with streamed media
    iframe: {
        preload: false
    },
    // Increase left/right margin for iframe content
    margin: [20, 60, 20, 60]
});

Notice the API options that I am recommending to set to avoid further issues.

See JSFIDDLE

Upvotes: 3

Related Questions