【发布时间】：2017-11-14 17:38:23
【问题描述】：
我正在为一个包含图片库和视频库的网站使用 bootstrap 4。我正在从http://ashleydw.github.io/lightbox/#image-gallery 那里获取一些资源，用于灯箱工作。
我已经在我的身体底部实现了 css 和 jQuery 脚本。图片库完美运行，所以我知道实施似乎没问题。但是，当我输入视频库的 html 时，单击时会出现模式框，但没有视频运行。即使网站上列出了他们的默认视频也是如此。
应该是这样的：
使用此默认代码：
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Band Homepage" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css"/>
<link rel="stylesheet" href="css/main-style.css">
<title>Truth Takes Time</title>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Truth Takes Time</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">News</a>
<a class="nav-item nav-link" href="#">Photos</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Music</a>
<a class="nav-item nav-link" href="#">Tour</a>
<a class="nav-item nav-link" href="#">Store</a>
</div>
</div>
</div>
</nav>
<!--jumbotron-->
<div class="jumbotron jumbotron-fluid">
<div class="container text-center">
<h1 class="display-3">Truth Takes Time</h1>
</div>
</div>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-newspaper-o fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Latest News</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all news <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="news">
<div class="container">
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-257909.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Tis the Treason Holiday Bundle</h4>
</a>
<p class="card-text">We’ve added a few new items the webstore, including this limited Tis the Treason...</p>
<p class="card-text"><small>November 3, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-69212.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Vevo "Why I Vote"</h4>
</a>
<p class="card-text">Tim recently sat down with Vevo to discuss why it's improtant to vote. Check it out </p>
<p class="card-text"><small>October 23, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-167523.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">Synthesis available everywhere now!</h4>
</a>
<p class="card-text">Our new album, Synthesis, is available everywhere now!</p>
<p class="card-text"><small>September 12, 2017</small></p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<a href="#">
<img class="card-img-top" src="img/pexels-photo-167580.jpeg" alt="Card image cap">
</a>
</div>
</div>
<div class="col-md-3">
<div class="card-body">
<a href="#">
<h4 class="card-title">2017 Fall Tour</h4>
</a>
<p class="card-text">We’re hitting the road this Fall for a run of headline dates across the US + Canada with special guests!</p>
<p class="card-text"><small>August 9, 2017</small></p>
</div>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-camera fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Photos</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all pics <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="picGallery">
<div class="container mt-5">
<div class="row mb-3">
<div class="col-md-3">
<a href="img/pexels-photo-92080.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-92080.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167378.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167378.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-417473.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-417473.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-354304.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-354304.jpeg" class="img-fluid" alt="#">
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<a href="img/pexels-photo-167609.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167609.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167382.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167382.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-167466.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-167466.jpeg" class="img-fluid" alt="#">
</a>
</div>
<div class="col-md-3">
<a href="img/pexels-photo-141376.jpeg" data-toggle="lightbox" data-gallery="picGallery">
<img src="img/pexels-photo-141376.jpeg" class="img-fluid" alt="#">
</a>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-video-camera fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Videos</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all videos <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="vidGallery">
<div class="container mt-5">
<div class="row mb-3">
<div class="col-sm-3">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-3">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos">
<img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-sm-3">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<section class="section-header mt-5 mb-5">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<i class="fa fa-shopping-basket fa-3x mr-4 mt-2" aria-hidden="true"></i><h4 class="display-4"> Store</h4>
<a href="#" class="btn btn-link ml-auto mt-3">View all merch <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</section>
<script src="https://use.fontawesome.com/9a90c9b9d4.js"></script>
<!--bootstrap standard Javascript-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!--lightbox js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
</body>
</html>
唯一的区别是我从默认代码中删除了 class="col-md-4"，因为我的标签已经在 col-md-3 中。
我的出来是这样的：
【问题讨论】：
-
你有额外的代码吗？我正在运行您提供的代码，当我单击视频链接时，它不会以模式打开。它会加载包含视频的新页面。
-
我没有想到与本节相关的任何其他代码。我什至重新开始了整个 html 页面，它仍然可以这样做。
-
您提到：“我已经在我的身体底部实现了 css 和 jQuery 脚本。”我可以看看你的整个实现，看看错误是否在其他地方。
-
好的。用完整的 html 更新了原始帖子。
标签： javascript jquery html css twitter-bootstrap