个人中心
gpt4 book ai didi

css - 在带有 bootstrap3 的灯箱中使用 youtube 视频

转载 作者：行者123 更新时间：2023-11-28 08:41:57 31 4
gpt4 key购买 nike

我正在尝试将 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 -->

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

谢谢大家:)

最佳答案

与此同时，我发现了故障。我在标题中遗漏了这个 jquery 片段

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

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

希望这对你有帮助:)

关于css - 在带有 bootstrap3 的灯箱中使用 youtube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27780969/

31 4 0
文章推荐： javascript - 我的加速度计和canvas 2d 做错了什么？安卓
文章推荐： JavascriptInterface 与 Phonegap。 (安卓网络应用程序)
文章推荐： javascript regexp，从某种类型的 url 中选择
文章推荐： javascript - 如何将不同的列表框项目拖放到一起
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com