CODEWITHSUNDEEP
javascriptjqueryblueimp
Zaki Aziz
Zaki Aziz

Reputation: 3872

Blueimp gallery with both images and youtube video

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?

Upvotes: 7

Views: 17083

Answers (5)

Buddhi
Buddhi

Reputation: 2324

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>

Upvotes: 1

Adrian Chapple
Adrian Chapple

Reputation: 11

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>

Upvotes: 0

Cosmitar
Cosmitar

Reputation: 1084

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.

Upvotes: 8

Robin Hansen
Robin Hansen

Reputation: 163

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>

Upvotes: 4

Christopher Will
Christopher Will

Reputation: 3064

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).

Upvotes: 2

Related Questions