遇到JQuery Lightbox代码问题

时间:2014-07-25 00:32:08

标签: jquery html5 css3 lightbox

JQuery灯箱代码无法正常工作,已多次查看并阅读文档,仍然无法找到问题,任何帮助表示感谢,谢谢。我是新手。这是一个bootstrap框架网站。

enter code here <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

<title>Blank Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-lightbox.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="new.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->

    

      <!--Start Of Lightbox Code-->
<div class="container">
    <div class="row">
        <div class="span12">
            <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="lightbox-content">
                    <img src="img/1.jpg">
                    <div class="lightbox-caption">
                        <p>Image Caption</p>
                    </div>
                </div>
            </div>
            <a data-toggle="lightbox" href="#demoLightbox" class="span2">
                <img src="img/1.png">
            </a>
        </div>
    </div>
</div>
<!--End Of LIghtbox Code-->

</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap-lightbox.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

1 个答案:

答案 0 :(得分:1)

通过你的代码行,似乎没问题。但后来我意识到<script>包含了订单。 Lightbox是大型机{{​​1}}的扩展,这意味着它与bootstrap library有很多依赖关系。

所以你需要将订单改为这样的,

bootstrap

以下是Working Fiddle,以下是维持订单的Non-working Fiddle