javascript 包含图像和 YouTube 视频的 Blueimp 画廊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19800798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blueimp gallery with both images and youtube video
提问by Zaki Aziz
This is the software I am using: https://github.com/blueimp/Gallery
这是我正在使用的软件：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:
这是我的 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/
我创建了一个 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.)
当我手动输入一些数据以提供给 blueimp 时，youtube 视频工作正常（例如：http: //jsfiddle.net/HhU4K/1/编辑：这适用于我的本地主机，但似乎只是为我显示了 JSFiddle 上的旋转图标. 希望你们能够看到视频，而不仅仅是旋转指示器。）
When I add a youtube video link to the hrefof the <a>tag it does not work. Any idea what I'm doing wrong?
当我添加YouTube视频链接href的的<a>标签这是行不通的。知道我做错了什么吗？
回答by Cosmitar
I was struggling with this a couple of hours. Finally it works from html source. Take a look at this FiddleMake sure to set the attribute with the youtube video id. Not just "youtube", use "data-youtube" or will not work :S
我为此苦苦挣扎了几个小时。最后它从 html 源代码开始工作。看看这个Fiddle确保使用 youtube 视频 ID 设置属性。不只是“youtube”，使用“data-youtube”或将不起作用：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.
希望这可以帮助。
回答by Robin Hansen
WordPress blueimp lightbox WordPress Plugins
WordPress blueimp 灯箱 WordPress 插件
I slightly modifyed the youtube example in the link above - this should work :)
我稍微修改了上面链接中的 youtube 示例 - 这应该可以工作:)
<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>
回答by Christopher Will
I think you just forgot the data-galleryattribute in the latter one.
我想你只是忘记了后一个中的data-gallery属性。
<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
编辑#1
I updated your fiddle to support both images and youtube videos at once.
我更新了您的小提琴以同时支持图像和 YouTube 视频。
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.
据我了解，您需要使用给定的资源 JSON 通过 JavaScript 实例化 BlueImp 库。我无法使用 HTML 缩略图列表使其正常工作。
Though you may build this JSON based on the image thumbnails dynamically (on the fly).
尽管您可以动态地（即时）基于图像缩略图构建此 JSON。
回答by Buddhi
Here is a code snippet which i have put together using the blueimp gallery, jquery and bootstrap.
这是我使用blueimp 库、jquery 和 bootstrap组合在一起的代码片段。
first row is shown videos, second row is images, so you can use this as a video galleryor a photo galleryor 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>回答by Adrian Chapple
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.
即使使用此处提供的代码，我也很难使其正常工作。我为我找到的关键 - 从 GitHub 上的 Blueimp 设置中不清楚是包含对 YouTube JS 的引用。
I added this reference & everything starts working.
我添加了这个参考，一切都开始工作了。
<script src="js/blueimp-gallery-youtube.js"></script>
