7

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

当我单击链接到视频的缩略图时，我得到了错误标志。

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

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

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

4

5 回答 5

8

我为此苦苦挣扎了几个小时。最后它从 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>

希望这可以帮助。

于 2014-10-11T06:36:28.377 回答
4

WordPress blueimp 灯箱 WordPress 插件

我稍微修改了上面链接中的 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>
于 2014-04-28T13:47:28.397 回答
2

我认为您只是忘记了后者中的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>

编辑#1

我更新了你的小提琴以同时支持图像和 youtube 视频。

看这个例子

据我了解，您需要使用给定资源 JSON 通过 JavaScript 实例化 BlueImp 库。我无法使用 HTML 缩略图列表让它工作。

尽管您可以动态地（动态地）基于图像缩略图构建此 JSON。

于 2014-02-06T23:07:17.113 回答
1

这是我使用blueimp 库、jquery 和 bootstrap整理的代码片段。

第一行显示视频，第二行显示图像，因此您可以将其用作视频库或照片库或两者兼而有之。

<!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">‹&lt;/a>
                <a class="next show">›&lt;/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>

于 2016-12-02T07:32:19.163 回答
0

即使使用此处提供的代码，我也很难使其正常工作。我为我找到的关键——从 GitHub 上的 Blueimp 设置中并不清楚是否包含对 YouTube JS 的引用。

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

<script src="js/blueimp-gallery-youtube.js"></script>
于 2016-07-24T21:10:30.480 回答