Blueimp画廊同时包含图像和YouTubevideo

这是我正在使用的软件： https ： //github.com/blueimp/Gallery

当我点击链接到video的缩略图时，我会收到错误信号。

这是我的HTML：

我创建了一个JSFiddle： http ： //jsfiddle.net/HhU4K/

当我手动输入一些数据来提供给blueimp时，youtubevideo工作正常（例如： http ： //jsfiddle.net/HhU4K/1/编辑：这适用于我的localhost，但似乎只是在JSFiddle上显示旋转图标对我来说希望你们能够看到video，而不仅仅是旋转指示器。）

当我将youtubevideo链接添加到标签的href ，它不起作用。 知道我做错了什么吗？

Answer 1

几个小时我一直在努力。 最后它适用于html源代码。 看看这个小提琴确保用youtubevideoID设置属性。 不只是“youtube”，使用“data-youtube”或不起作用：S

希望这可以帮助。

Answer 2

WordPress blueimp灯箱WordPress插件

我稍微修改了上面链接中的youtube示例 – 这应该工作:)

 LES TWINS - An Industry Ahead 

Answer 3

我想你刚刚忘记了后者的数据库属性。

编辑＃1

我更新了你的小提琴，一次支持图像和youtubevideo。

看这个例子

据我所知，您需要通过JavaScript使用给定的资源JSON实例化BlueImp库。 我无法使用HTML缩略图列表。

虽然您可以动态（动态）基于图像缩略图构建此JSON。

Answer 4

这是一个代码片段，我使用blueimp库，jquery和bootstrap放在一起。

第一行显示video，第二行是图像，因此您可以将其用作video库或照片库或两者。

             
 
 
 
 
 
 ‹ › ×  
 
 
 
 
 
 
VIDEO GALLERY
 
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
List4n to #MorganMovie's original score by Max Richter
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
Listen to #MorganMovie's original score by Max Richter
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
Listen to #MorganMovie's original score by Max Richter
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
Listen to #MorganMovie's original score by Max Richter
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
Listen to #MorganMovie's original score by Max Richter
 
 
 
 
 
    
 
Original Motion Picture Soundtrack
 
Listen to #MorganMovie's original score by Max Richter
 
 
 
 
 
 
 
 
       

Answer 5

即使使用此处提供的代码，我仍然努力使其正常工作。 我找到的关键 – 而且GitHub上的Blueimp设置并不清楚是否包含对YouTube JS的引用。

我添加了这个参考，一切都开始工作了。