我希望能够以 3 种方式关闭隐藏显示的弹出式画廊:点击我已经拥有的图像。当我单击外部框时关闭并在选择另一个菜单链接时关闭,即单击主页并弹出重置关闭。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascrip" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
<script type="text/javascript">
$(function() {
$("#gallery a").lightBox();
});
</script>
<script type="text/javascript">
$(".gallery").click(function(e){
e.stopPropagation();
});
</script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.stopPropagation();
});
</script>
</head>
<body>
<a name="home"></a>
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
<li><a href="#box4">Box 4</a></li>
<li><a href="#box5">Box 5</a></li>
<li><a href="#box6">Box 6</a></li>
<li><a href="#box7">Box 7</a></li>
<li><a href="#box8">Box 8</a></li>
</ul>
</div>
<div id="box6" class="box">
<h2><a name="box6">Sixth Box</a></h2>
<p><div id="gallery">
<li>
<a href="photos/image1.jpg" title="Image 1 $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Image 2 $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Image 3 $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Image 4 $('#gallery a').lightBox();">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="Image 5 $('#gallery a').lightBox();">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
</li>
</div></p>
</div>