Question

我试图将jquery bootstrap插件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一样，而不是在灯箱中。我做错了什么？！

谢谢你们：）

Answer 1

与此同时，我发现了故障。我在标题

中遗漏了这个jquery片段

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

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

希望这可以帮助你：）

在lightbox中使用youstube视频和bootstrap3

1 个答案: