问Ekko-Lightbox播放YouTube视频/链接的图像不显示的问题
EN

Stack Overflow用户

提问于 2016-04-02 22:56:08

回答 1查看 1.3K关注 0票数 0

我正在尝试学习/弄清楚如何在带有ekko-lightbox插件属性的Bootstrap模式中成功播放youtube视频。我已经设法让Vimeo链接工作了，但是YouTube链接不会检索视频，按钮图像(外部链接)也不会出现。我的工作文件保存在我的桌面/本地。为了使YouTube和图像链接正常工作，我是否需要将文件上载到ISP？我还想知道如何让视频播放模式，而不必依赖于互联网。这样，如果我想展示一个网站的概念，但没有互联网接入，我仍然可以拥有功能。

这是我的索引文件中显示的代码。只有Vimeo视频链接和静态瀑布图像链接有效。按钮图像链接也不会出现。请帮帮我！

<!DOCTYPE html>
<html>
    <head>
        <title>Mixed Lightbox Gallery in Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/ekko-lightbox.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">


                    <h3 class="page-header" id="mixed-gallery">Mixed gallery</h3>
                    <div class="row">
                        <div class="col-md-offset-1 col-md-10">
                            <div class="row">
                                <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
                                </a>
                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
                                </a>
                                <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
                                </a>
                            </div>
                        </div>
                    </div>



                            </div>
                        </div>
                    </div>



        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ekko-lightbox.js"></script>

        <script type="text/javascript">
            $(document).ready(function ($) {
                // delegate calls to data-toggle="lightbox"
                $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
                    event.preventDefault();
                    return $(this).ekkoLightbox({
                        onShown: function() {
                            if (window.console) {
                                return console.log('Checking our the events huh?');
                            }
                        },
                        onNavigate: function(direction, itemIndex) {
                            if (window.console) {
                                return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                            }
                        }
                    });
                });

                //Programatically call
                $('#open-image').click(function (e) {
                    e.preventDefault();
                    $(this).ekkoLightbox();
                });
                $('#open-youtube').click(function (e) {
                    e.preventDefault();
                    $(this).ekkoLightbox();
                });

                // navigateTo
                $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
                    event.preventDefault();

                    var lb;
                    return $(this).ekkoLightbox({
                        onShown: function() {

                            lb = this;

                            $(lb.modal_content).on('click', '.modal-footer a', function(e) {

                                e.preventDefault();
                                lb.navigateTo(2);

                            });

                        }
                    });
                });


            });
        </script>
    </body>
</html>