在带有 bootstrap3 的灯箱中使用 youtube 视频答案

【问题标题】：Using youtube video in lightbox with bootstrap3在带有 bootstrap3 的灯箱中使用 youtube 视频
【发布时间】：2015-03-03 01:49:10
【问题描述】：

我正在尝试将 jquery 引导插件 ekko-lightbox 添加到我的网站，但我无法让它工作

我在脑海中加载了默认的 css 和 jquery 文件，如下所示：

<head>
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
    <?php //display website title ?><title><?php if (is_front_page() ) { bloginfo('name'); echo ' - ';  bloginfo('description'); } else {  wp_title(''); echo ' - '; bloginfo('name');  };?></title> 
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="http://www.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/flexslider.css">
        <!-- Lightbox css -->
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ekko-lightbox.css">
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ekko-lightbox.min.css">
        <!-- jQuery -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
        <!-- Flex Slider -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider-min.js"></script>
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider.js"></script>  
        <script type="text/javascript" charset="utf-8">
          $(window).load(function() {
            $('.flexslider').flexslider();
          });
        </script>
        <!-- Bootstrap JavaScript -->
        <script src="http://www.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <!-- Google fonts -->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300' rel='stylesheet' type='text/css'>
        <!-- Lightbox -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ekko-lightbox.min.js"></script>
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ekko-lightbox.js"></script>

    </head>

在我的页面中，我尝试让它像这样工作：

<!-- lightbox -->

                    <div class="row" style="padding-bottom: 5%">
                                <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                                    <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
                                </a>
                                <a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                                    <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
                                </a>
                                <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                                    <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
                                </a>
                            </div>

                    <!-- end lightbox -->

视频像常规 ahrefs 一样在新窗口中打开，而不是在灯箱中打开。我做错了什么？！

谢谢大家:)

【问题讨论】：

标签： css twitter-bootstrap youtube lightbox

【解决方案1】：

与此同时，我发现了故障。我在标题中缺少这个 jquery sn-p

<script type="text/javascript" >
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        }); 
</script>

现在我需要强制关闭按钮和所有 YT 控件工作：/

希望对你有帮助:)

【讨论】：