All geek questions in one place

Blueimp Gallery with both images and YouTube videos

This is the software that I use: https://github.com/blueimp/Gallery

When I click on a thumbnail that links to a video, I get an 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 created JSFiddle: http://jsfiddle.net/HhU4K/

When I manually enter some data to submit to blueimp, the youtube video works great (for example: http://jsfiddle.net/HhU4K/1/ EDIT: it works on my localhost, but apparently just shows a rotating icon on the JSFiddle for me. Hope you guys can see the video, not just the turn indicator.)

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

+6
source share
6 answers

I struggled with this after a couple of hours. Finally, it works from an html source. Take a look at this fiddle. Make sure the attribute is set with the youtube video id. Not only "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.

+7
source

WordPress blueimp lightbox WordPress Plugins

I slightly changed 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>
+4
source

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

 <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 NO. 1

I updated your script to simultaneously support both images and YouTube videos.

See this example.

As far as I understand, you need to create an instance of the BlueImp gallery using JavaScript with the given JSON resources. I could not get it to work using the list of HTML thumbnails.

Although you can create this JSON based on thumbnail images dynamically (on the fly).

+2
source

Here is a snippet of code that I put together using the blueimp, jquery and bootstrap gallery.

The first line shows the videos, the second line is the images, so you can use this as a video gallery or 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>
+1
source

I tried my best to work, even with the code given here. The key I found for me - and this is not clear from the Blueimp setup on GitHub - is to enable the YouTube JS link.

I added this link and everything starts to work.

 <script src="js/blueimp-gallery-youtube.js"></script>
0
source 
 blueimp-gallery.js -> getItemProperty: function (obj, property) {....

replace if (prop === undefined) { with if (prop === undefined || prop == '') {

then put some element "A" data-youtube = "...", data-type = "text / html", data-poster = "..."

eg:

 <a class="thumbnail center-all" href="imageLink" style="height: 185px; width: 185px;"> <img src="imageThumb" class="additional-image"> </a><a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E" data-youtube="zv9jHNwaV2E" data-poster="http://img.youtube.com/vi/zi4CIXpx7Bg/0.jpg" data-type="text/html" style="height: 185px; width: 185px;"> <img src="http://img.youtube.com/vi/zi4CIXpx7Bg/0.jpg" class="additional-image"> </a>

sorry for bad english

-2
source

Source: https://habr.com/ru/post/957463/

More articles:


All Articles