0
我想實現一個網站上的這個畫廊：http://ashleydw.github.io/lightbox/如何獲得收藏的引導3工作
沒有說明，所以我很失落，一直在試圖得到它的工作。
我從上面的鏈接的源代碼中複製了或多或少的內容。
我將github下載中包含的所有文件移至新文件夾dist/lightbox（例如ekko-lightbox.css，ekko-lightbox.js）。
它沒有做任何事情，當你點擊一個圖像，它只是打開圖像的網址。
我錯過了什麼？我是否需要鏈接到一些其他文件或有什麼問題？
<head>
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- this is from the source code, just updated the images -->
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see <a href="#wrappers">example #11</a>. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive"
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(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>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="dist/lightbox/ekko-lightbox.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>