Lightbox在本地工作但停止在googledrive上工作

时间:2015-09-27 03:01:08

标签: javascript jquery css twitter-bootstrap lightbox

我打算在我的作品集库中使用这个名为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;
}

enter image description here

0 个答案:

没有答案