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:
Solution 1:
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.
Solution 2:
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>
Solution 3:
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>
<imgsrc="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.
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).
Solution 4:
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><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/css/blueimp-gallery.min.css"rel="stylesheet"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><styletype="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_i4img{
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_i10img{
display: block;
}
</style></head><body><divclass="container-fluid ig_i3"><divclass="row"><divclass="col-md-12"><divid="blueimp-gallery"class="blueimp-gallery blueimp-gallery-controls"><divclass="slides"></div><h3class="title"></h3><aclass="prev show">‹</a><aclass="next show">›</a><aclass="close show">×</a><aclass="play-pause"></a><olclass="indicator show"></ol></div><divclass="container"><divclass="row"><divclass="col-md-12 ig_i2"><divclass="ig_i1"><h1>VIDEO GALLERY</h1></div></div></div><divclass="row"><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="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=""><imgsrc="http://img.youtube.com/vi/IVx6ZlksMJw/maxresdefault.jpg"alt="..."></a><divclass="caption"><h4>Original Motion Picture Soundtrack</h4><p>List4n to #MorganMovie’s original score by Max Richter</p></div></div></div><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="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=""><imgsrc="http://img.youtube.com/vi/E5ln4uR4TwQ/maxresdefault.jpg"alt="..."></a><divclass="caption"><h4>Original Motion Picture Soundtrack</h4><p>Listen to #MorganMovie’s original score by Max Richter</p></div></div></div><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="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=""><imgsrc="http://img.youtube.com/vi/onXpKXbnbE0/maxresdefault.jpg"alt="..."></a><divclass="caption"><h4>Original Motion Picture Soundtrack</h4><p>Listen to #MorganMovie’s original score by Max Richter</p></div></div></div><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="ig_i10"type="img"href="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg"title=""><imgsrc="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg"alt="..."></a><divclass="caption"><h4>Original Motion Picture Soundtrack</h4><p>Listen to #MorganMovie’s original score by Max Richter</p></div></div></div><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="ig_i10"type="img"href="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg"title=""><imgsrc="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg"alt="..."></a><divclass="caption"><h4>Original Motion Picture Soundtrack</h4><p>Listen to #MorganMovie’s original score by Max Richter</p></div></div></div><divclass="col-sm-4 col-md-4"><divclass="thumbnail ig_i4"><aclass="ig_i10"type="img"href="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg"title=""><imgsrc="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg"alt="..."></a><divclass="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><scriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/js/blueimp-gallery.min.js"></script><scripttype="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>Solution 5:
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.
<scriptsrc="js/blueimp-gallery-youtube.js"></script>
Post a Comment for "Blueimp Gallery With Both Images And Youtube Video"