Галерея Blueimp с изображениями и видео на YouTube

Это программное обеспечение, которое я использую: 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>

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

Когда я вручную ввожу некоторые данные для передачи в blueimp, видео на YouTube работает нормально (пример: http://jsfiddle.net/HhU4K/1/ РЕДАКТИРОВАТЬ: это работает на моем локальном хосте, но, похоже, для меня просто показывает вращающийся значок на JSFiddle. Надеюсь, вы, ребята, сможете увидеть видео, а не только индикатор вращения.)

Когда я добавляю ссылку на видео YouTube в href тега <a>, она не работает. Любая идея, что я делаю неправильно?


javascript jquery blueimp
person Zaki Aziz    schedule 05.11.2013    source источник
comment
У меня тоже такая проблема, хотелось бы узнать, нашли ли вы решение.   -  person itsclarke    schedule 04.12.2013
comment
@BadDog Извините, пока ничего. Я просто отказался от Blueimp и перешел на FancyBox. Программное обеспечение намного лучше!   -  person Zaki Aziz    schedule 04.12.2013

Ответы (5)


arrow_upward
8
arrow_downward

Я боролся с этим пару часов. Наконец, он работает из источника html. Взгляните на этот Fiddle. Обязательно установите атрибут с идентификатором видео YouTube. Не просто "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>

Надеюсь это поможет.

person Cosmitar    schedule 11.10.2014

arrow_upward
4
arrow_downward

Плагины WordPress blueimp lightbox

Я немного изменил пример 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>
person Robin Hansen    schedule 28.04.2014

arrow_upward
2
arrow_downward

Я думаю, вы просто забыли атрибут 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.

см. этот пример

Насколько я понимаю, вам нужно создать экземпляр галереи BlueImp через JavaScript с заданными ресурсами JSON. Я не мог заставить его работать, используя список эскизов HTML.

Хотя вы можете создать этот JSON на основе эскизов изображений динамически (на лету).

person Christopher Will    schedule 06.02.2014
comment
jsfiddle.net/HhU4K/16 У меня все еще не работает. Спасибо за ответ. - person Zaki Aziz; 07.02.2014
comment
Любые идеи о том, как сделать галерею постеров, которая открывается для видео, обслуживаемого Cloudfront, в Rails 4? - person zero_cool; 13.08.2014

arrow_upward
1
arrow_downward

Вот фрагмент кода, который я собрал, используя галерею 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">‹</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>

person Buddhi    schedule 02.12.2016

arrow_upward
0
arrow_downward

Я изо всех сил пытался заставить это работать, даже с приведенным здесь кодом. Ключ, который я нашел для себя — и из настройки Blueimp на GitHub неясно, — включить ссылку на YouTube JS.

Я добавил эту ссылку, и все начинает работать.

<script src="js/blueimp-gallery-youtube.js"></script>
person Adrian Chapple    schedule 24.07.2016