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 に回転アイコンが表示されるだけのようです)回転インジケーターだけでなく、動画もご覧いただければ幸いです。)

hrefタグのにYouTube ビデオ リンクを追加すると、<a>機能しません。私が間違っていることは何か分かりますか？

4

5 に答える 5

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を使用してまとめたコード スニペットです。

最初の行はビデオ、2 番目の行は画像です。これをビデオ ギャラリーまたはフォト ギャラリー、またはその両方として使用できます。

<!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 に答える