<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Simple Image Viewer | Demo page by http://www.codefans.net</title>
<link rel="stylesheet" href="style.css" />
<style>
#gallery img {
border: none;
}
#gallery_nav {
float: left;
width: 150px;
text-align: center;
}
#gallery_output {
float: left;
width: 600px;
height: 550px;
overflow: hidden;
}
#gallery_output img {
display: block;
margin: 20px auto 0 auto;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#gallery_output img").not(":first").hide();
$("#gallery a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
$("#gallery_output img").slideUp();
$("#" + this.rel).slideDown();
}
});
});
</script>
</head>
<body>
<div id="content">
<h1>Simple Image Viewer</h1>
<p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/simple-image-viewer">here</a></p>
<hr />
<p> </p>
<div id="gallery">
<div id="gallery_nav">
<a rel="img1" href="javascript:;"><img src="iphone_1.jpg" /></a>
<a rel="img2" href="javascript:;"><img src="iphone_2.jpg" /></a>
<a rel="img3" href="javascript:;"><img src="iphone_3.jpg" /></a>
<a rel="img4" href="javascript:;"><img src="iphone_4.jpg" /></a>
</div>
<div id="gallery_output">
<img id="img1" src="iphone_1b.jpg" />
<img id="img2" src="iphone_2b.jpg" />
<img id="img3" src="iphone_3b.jpg" />
<img id="img4" src="iphone_4b.jpg" />
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
image_viewer.rar （12个子文件） 
image_viewer 
jquery.min.js 56KB
iphone_1.jpg 9KB iphone_2.jpg 7KB iphone_4b.jpg 55KB iphone_3.jpg 3KB iphone_2b.jpg 48KB
index.html 2KB iphone_3b.jpg 22KB iphone_1b.jpg 63KB iphone_4.jpg 5KB Thumbs.db 49KB style.css 571B资源评论
