在bootstrap中没有加载lightbox
prettyPhoto in bootstrap not loading lightbox
我想做一个简单的灯箱画廊,使用pretypto和bootstrap。由于某些原因,当我单击图像缩略图时,它只是在空白图像页面中打开它,而不是使用js。
Chrome开发工具给我这个:
Uncaught TypeError: undefined is not a function - bootstrap.min.js:6
Uncaught ReferenceError: jQuery is not defined - jquery.prettyPhoto.js:7
Uncaught ReferenceError: $ is not defined - portfolio.html:10
这已经困扰我几个小时了,任何帮助都非常感谢!谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kim Pirring Design</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script language="JavaScript" type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel='prettyPhoto']").prettyPhoto();
});
</script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/prettyPhoto.css">
</head>
<body>
<div class="container">
<h1>Kim Pirring Design</h1>
<div class='navbar navbar-inverse'>
<div class='navbar-inner nav-collapse' style="height: auto;">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="portfolio.html">My Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<ul class="thumbnails">
<li class="span3">
<a class="thumbnail" rel="prettyPhoto" href="images/fullscreen/1.jpg"><img class="group1" src="images/fullscreen/1.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/2.jpg"><img class="group1" src="img/pics/2.jpg" title="Image Title" /></a>
</li> <!--end thumb -->
<li class="span3">
<a class="thumbnail" rel="lightbox[group]" href="img/pics/3.jpg"><img class="group1" src="img/pics/3.jpg" title="Image Title" /></a>
</ul><!--end thumbnails -->
<footer>
<p>© Kim Pirring 2013</p>
</footer>
</div><!-- .container -->
</body>
</html>
显示jQuery没有加载。检查外部脚本是否指向正确的位置。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 跟踪在页面加载时应用内联样式的JavaScript
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- jQuery Lazy加载动画滚动
- Html页面上的多个Base64图像和平滑加载
- jquery库不会加载lightbox
- 在页面加载Ceraboox+Mootools时启动Lightbox
- 正在加载Magento中产品图像的Bootstrap Lightbox
- Lightbox未加载动态选择器
- 在页面加载时启动Lightbox
- 在ajax内容加载后重新加载lightbox
- 在单击Lightbox之前不要加载iFrame谷歌地图
- 从Flickr将图像加载到Lightbox 2中的更有效方法是什么?