我正在尝试将 JQuery 插件、Lightbox、http ://leandrovieira.com/projects/jquery/lightbox/ 安装到我的图片库页面,但图片点击正在向容器和背景下方发送一个 div出现在主要区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/HTML5CSSReset.css">
<link rel="stylesheet" type="text/css" href="styles/jquery.lightbox-0.4.css" media="screen" />
<link rel="shortcut icon" href="images/favicon.ico">
<title>Circle Bar</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
</head>
<body>
<div id="ground">
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><a href="index.html">Information</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="imageGallery.html">Images</a></li>
<li><a href="informationContact.html">Contact & Directions</a></li>
</ul>
</div>
<div id="gallery" class="sidePage"><br><br><br><br><br>
<ul>
<li><a href="images/gallery/1.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/1.jpg"></a></li>
<li><a href="images/gallery/2.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/2.jpg"></a></li>
<li><a href="images/gallery/3.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/3.jpg"></a></li>
<li><a href="images/gallery/4.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/4.jpg"></a></li>
<li><a href="images/gallery/5.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/5.jpg"></a></li>
<li><a href="images/gallery/6.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/6.jpg"></a></li>
</ul>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>