Blueimp gallery with both images and youtube video

Asked 5/11, 2013 at 23:1 Answered 2/12, 2016 at 7:32

This is the software I am using: https://github.com/blueimp/Gallery

When I click on a thumbnail that link to the video I get the error sign.

This is my HTML:

<div id="gallery">
<!-- main image -->
<ul class="thumbnails">
    <li class="span12 margin-bottom-0">
        <a class="thumbnail center-all" href="http://i.imgur.com/mdqQTPT.jpg" style="max-height: 375px; width: 375px;" data-gallery>
            <img src="http://i.imgur.com/mdqQTPT.jpg" class="main-image">
        </a>
    </li>
</ul>
<!-- other images / video -->
<ul class="thumbnails"> 
    <li class="span6">
        <a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E"  style="height: 185px; width: 185px;">
            <img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
        </a>
    </li>               
</ul>

I've created a JSFiddle: http://jsfiddle.net/HhU4K/

When I manually enter some data to feed to blueimp, the youtube video works fine (example: http://jsfiddle.net/HhU4K/1/ EDIT: this works on my localhost but seems to just show the spinning icon on JSFiddle for me. Hope you guys are able to see the video and not just the spinning indicator.)

When I add a youtube video link to the href of the <a> tag it does not work. Any idea what I'm doing wrong?

Example answered 5/11, 2013 at 23:1 Comment(2)

I'm also having this issue, I would love to know if you found a solution. – Campo 4/12, 2013 at 15:30

@BadDog Sorry nothing yet. I just scrapped Blueimp and went with FancyBox. Much better software! – Example 4/12, 2013 at 19:22

I was struggling with this a couple of hours. Finally it works from html source. Take a look at this Fiddle Make sure to set the attribute with the youtube video id. Not just "youtube", use "data-youtube" or will not work :S

<a href="http://www.youtube.com/watch?v=zv9jHNwaV2E"
title="LES TWINS - An Industry Ahead"
type="text/html"
data-youtube="zv9jHNwaV2E"
poster="http://img.youtube.com/vi/zv9jHNwaV2E/0.jpg"
></a>

Hope this helps.

Ferine answered 11/10, 2014 at 6:36 Comment(0)

WordPress blueimp lightbox WordPress Plugins

I slightly modifyed the youtube example in the link above - this should work :)

<a href="https://www.youtube.com/watch?v=zi4CIXpx7Bg" type="text/html" data-youtube="zi4CIXpx7Bg" data-poster="http://img.youtube.com/vi/zi4CIXpx7Bg/0.jpg" data-gallery>LES TWINS - An Industry Ahead</a>

Sessler answered 28/4, 2014 at 13:47 Comment(0)

I think you just forgot the data-gallery attribute in the latter one.

<a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E"  style="height: 185px; width: 185px;" data-gallery>
  <img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
</a>

EDIT #1

I updated your fiddle to support both images and youtube videos at once.

See this example

As of my understanding you need to instantiate the BlueImp gallery via JavaScript with a given resources JSON. I could not get it working using the HTML thumbnail list.

Though you may build this JSON based on the image thumbnails dynamically (on the fly).

Ti answered 6/2, 2014 at 23:7 Comment(2)

jsfiddle.net/HhU4K/16 Still not working for me. Thanks for the answer though. – Example 7/2, 2014 at 0:41

Any ideas on how to have a poster image gallery that opens to a Cloudfront served video in Rails 4? – Pricking 13/8, 2014 at 15:40

Here is a code snippet which i have put together using the blueimp gallery, jquery and bootstrap.

first row is shown videos, second row is images, so you can use this as a video gallery or a photo gallery or both.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/css/blueimp-gallery.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        .ig_i5{
            position: relative;
        }
        .ig_i6{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right:0;
            background-color: rgba(0, 0, 0, 0.48);
            color: white;
            font-size: 16px;
            opacity: 0;
            -webkit-transition: opacity 0.2s ease-in-out;
            -moz-transition: opacity 0.2s ease-in-out;
            -o-transition: opacity 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out;
        }
        .ig_i7{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .ig_i4 img{
            width: 100%;
            display: block;
        }
        .ig_i9{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -32px;
            margin-top: -28px;
            -webkit-transition: transform 0.2s ease-in-out;
            -moz-transition: transform 0.2s ease-in-out;
            -o-transition: transform 0.2s ease-in-out;
            transition: transform 0.2s ease-in-out;
            font-size: 60px;
        }
        .blueimp-gallery>.indicator>li {
            width: 40px !important;
            height: 30px !important;
            border-radius: 1px !important;
            background-size: auto 100% !important;
            opacity: 0.8!important;
        }
        .blueimp-gallery>.next, .blueimp-gallery>.prev {
            width: 70px !important;
            height: 70px !important;
            line-height: 60px !important;
            border-radius: 50% !important;
            text-indent: 3px !important;
        }
        .blueimp-gallery>.prev {
            text-indent: -3px !important;
        }
        .blueimp-gallery>.slides>.slide>.video-content>a {
            margin: -47px auto 0 !important;
            background-size: 110px !important;
        }
        .blueimp-gallery>.close {
            font-size: 60px !important;
            top: 35px !important;
            font-weight: normal !important;
        }
        .ig_i10 img{
            display: block;
        }
    </style>
</head>
<body>
<div class="container-fluid ig_i3">
    <div class="row">
        <div class="col-md-12">
            <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
                <div class="slides"></div>
                <h3 class="title"></h3>
                <a class="prev show">‹</a>
                <a class="next show">›</a>
                <a class="close show">×</a>
                <a class="play-pause"></a>
                <ol class="indicator show"></ol>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 ig_i2">
                        <div class="ig_i1">
                            <h1>VIDEO GALLERY</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" href="https://www.youtube.com/watch?v=IVx6ZlksMJw"
                               data-youtube="IVx6ZlksMJw" type="text/html"
                               poster="http://img.youtube.com/vi/IVx6ZlksMJw/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/IVx6ZlksMJw/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>List4n to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" href="https://www.youtube.com/watch?v=E5ln4uR4TwQ"
                               data-youtube="E5ln4uR4TwQ" type="text/html"
                               poster="http://img.youtube.com/vi/E5ln4uR4TwQ/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/E5ln4uR4TwQ/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>Listen to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" href="https://www.youtube.com/watch?v=onXpKXbnbE0"
                               data-youtube="onXpKXbnbE0" type="text/html"
                               poster="http://img.youtube.com/vi/onXpKXbnbE0/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/onXpKXbnbE0/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>Listen to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" type="img" href="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>Listen to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" type="img" href="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>Listen to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail ig_i4">
                            <a class="ig_i10" type="img" href="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg" title="">
                                <img src="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg" alt="...">
                            </a>

                            <div class="caption">
                                <h4>Original Motion Picture Soundtrack</h4>

                                <p>Listen to #MorganMovie’s original score by Max Richter</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/js/blueimp-gallery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.ig_i4').click(function (event) {
            event = event || window.event;
            var link = $('.ig_i4').index(this),
                    options = {
                        index: link,
                        event: event,
                        youTubeClickToPlay: false
                    },
                    links = $('.ig_i4 .ig_i10').toArray();
            blueimp.Gallery(links, options);
        });
        $('.ig_i4').on({'mouseenter':function(){
            if($(this).find('.ig_i5').length==0){
                $(this).find('img').wrap("<div class='ig_i5'></div>");
                if($(this).find('a').attr('type')=='img'){
                    $(this).find('.ig_i5').append("<div class='ig_i6'><div class='ig_i7'><i class=\"fa fa-search ig_i9\" aria-hidden=\"true\"></i></div></div>");
                }else{
                    $(this).find('.ig_i5').append("<div class='ig_i6'><div class='ig_i7'><i class=\"fa fa-youtube-play ig_i9\" aria-hidden=\"true\"></i></div></div>");
                }
                var el=$(this);
                setTimeout(function(){
                    el.find('.ig_i6').css('opacity','1');
                    el.find('.ig_i9').css('transform','scale(1.1)');
                },1);
            }
        }});
        $('.ig_i4').on('mouseleave',function(){
            $(this).find('img').unwrap();
            $(this).find('.ig_i6').remove();
        });
    });
</script>
</body>
</html>

Amaleta answered 2/12, 2016 at 7:32 Comment(0)

I struggled to get this working, even with the code provided here. The key I found for me - and it's not clear from the Blueimp setup on GitHub is to include the reference to the YouTube JS.

I added this reference & everything starts working.

<script src="js/blueimp-gallery-youtube.js"></script>

Zoon answered 24/7, 2016 at 21:10 Comment(0)

Recommended topics

Hot tags