Blueimp画廊有图像和youtube视频 [英] Blueimp gallery with both images and youtube video

问题描述

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

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

When I click on a thumbnail that link to the video I get the error sign.

这是我的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>

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

I've created a JSFiddle: http://jsfiddle.net/HhU4K/

当我手动输入一些数据输入blueimp时，youtube视频工作正常（例如： http：// jsfiddle .net / HhU4K / 1 / 编辑：这适用于我的本地主机，但似乎只是为我显示JSFiddle上的旋转图标。希望你们能够看到视频而不仅仅是旋转指示器。）

When I manually enter some data to feed to blueimp, the youtube video works fine (example: http://jsfiddle.net/HhU4K/1/ 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.)

当我将YouTube视频链接添加到< a>的 href 时标记它不起作用。知道我做错了什么吗？

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?

推荐答案

我几个小时都在苦苦挣扎。最后它适用于html源代码。看看这个小提琴确保使用youtube视频ID设置属性。不只是youtube，使用data-youtube或不起作用：S

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>

希望这有帮助。

这篇关于Blueimp画廊有图像和youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！