This is the software I am using:
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=".jpg" style="max-height: 375px; width: 375px;" data-gallery>
<img src=".jpg" class="main-image">
</a>
</li>
</ul>
<!-- other images / video -->
<ul class="thumbnails">
<li class="span6">
<a class="thumbnail center-all" href="" style="height: 185px; width: 185px;">
<img src=".jpg" class="additional-image">
</a>
</li>
</ul>
I've created a JSFiddle: /
When I manually enter some data to feed to blueimp, the youtube video works fine (example: / 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?
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?
- I'm also having this issue, I would love to know if you found a solution. – itsclarke Commented Dec 4, 2013 at 15:30
- 1 @BadDog Sorry nothing yet. I just scrapped Blueimp and went with FancyBox. Much better software! – Zaki Aziz Commented Dec 4, 2013 at 19:22
5 Answers
Reset to default 8I 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.
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>
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).
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>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>