我打算在我的作品集库中使用这个名为ekko lightbox的灯箱。我在这里关注本教程,https://www.youtube.com/watch?v=8TcXHpdyqm0
它在我的本地工作,这是一个很容易学习的教程,但是当我将它上传到googledrive时,灯箱停止工作。我在谷歌浏览器检查,发现没有错误。 :/我计划稍后使用host gator来托管我的网站但是现在我正在googledrive上进行测试。我是否应该担心它不能用于googledrive或忽略它?我没有问题让灯箱在本地工作,我没有看到任何错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="dark.css">
</head>
<body>
<div class="col-sm-3">
<a href="my_bmw.jpg" data-toggle="lightbox" data-title="My BMW" data-footer="A the fsdlkfldk">
<img src="my_bmw.jpg" alt="" class="img-responsive">
</a>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="lightbox.min.js"></script>
<script>
$(document).delegate('*[data-toggle="lightbox"]','click', function(){
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script>
</body>
</html>
这是他提供的CSS
.modal-backdrop {
width: 100% !important;
min-height: 2000px !important;
}
.modal-backdrop.in {
-webkit-opacity: 0.95;
-moz-opacity: 0.95;
opacity: 0.95;
background-color: #333333;
}
.ekko-lightbox .modal-content {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: none;
background-color: transparent;
}
.ekko-lightbox .modal-header {
border: 0;
padding-left: 0;
padding-right: 0;
}
.ekko-lightbox .modal-header .close {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
color: #fff;
text-shadow: 0;
font-weight: 100;
margin-top: 5px;
}
.ekko-lightbox .modal-header .close:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.ekko-lightbox .modal-header h4.modal-title {
font-weight: 100;
color: #fff;
padding: 0;
}
.ekko-lightbox .modal-body {
padding: 0;
}
.ekko-lightbox .modal-footer {
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
border: 0;
color: #fff;
font-weight: 100;
padding: 0;
}
.ekko-lightbox-nav-overlay a {
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
text-shadow: none;
}