jquery - JQuery Lightbox 代码有问题

标签 jquery html css lightbox

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

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>

最佳答案

查看你的代码行,似乎没问题。但后来我意识到 <script>包括订单。 Lightbox是主机的扩展 bootstrap library这意味着它与 bootstrap 有很多依赖关系.

所以你需要把顺序改成这样,

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-lightbox.min.js"></script>

这里是Working Fiddle这是你的 Non-working Fiddle保持秩序。

关于jquery - JQuery Lightbox 代码有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24946199/

相关文章:

Javascript:链接运行功能不起作用

html - 根据内容制作固定宽度的 HTML 表格

jquery - 如果内容从第一行流出,请将 <a> 标记移至新行?

javascript - 使用 JavaScript 和 jQuery 显示多级嵌套 JSON 数据

html - 相对 img src 被解析为绝对...我错过了什么?

html - 始终将 div 放置在右下角的 div 内,并保持最小边距

css - 向右移动重力提交按钮

javascript - 防止透明div内的图像透明

javascript - 将 border-radius 属性添加到 D3js 圆环图

css - 防止 DIVS 移动