Using Fancy Box show image list


Step 1: Reference Scripts / Styles



<head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
	</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />


</head>




Note ,remember add this script:


	<script>
		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
	</script>




This is important as so far as i know, Jquery Fancybox only workable with this jquery version : 1.4.3




Step 2: write HTML & scripts





<body>


<p>
	<a id="example1" href="./uploads/1_b.jpg"><img alt="example1" src="./uploads/1_s.jpg" /></a>


		<a id="example2" href="./uploads/2_b.jpg"><img alt="example2" src="./uploads/2_s.jpg" /></a>


		<a id="example3" href="./uploads/3_b.jpg"><img alt="example3" src="./uploads/3_s.jpg" /></a>
		
		<a id="example4" href="./uploads/4_b.jpg"><img alt="example4" src="./uploads/4_s.jpg" /></a>
	</p>	
<script type="text/javascript">
$(document).ready(function(){
$("a").fancybox();
});
</script>


</body>




note :

do remember set <img altvalue to "example1" which is the id value of "a" tag . so that fancy box will be able to find .



Resource :



URL : http://fancybox.net


once downloaded , a demo also will be included .



你可能感兴趣的:(image)