您的位置：首页 > Web前端 > JQuery

(Jquery功能篇) jquery 插件fancybox查看图片原图

2013-08-19 09:47 369 查看

效果截图：

fancybox相关介绍：

1.可以支持图片、html文本、flash动画、iframe以及ajax的支持
2.可以自定义播放器的CSS样式
3.可以以组的形式进行播放
4.如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
5.Fancybox播放器支持投影，更有立体的感觉

项目实例

加载相关资源文件：

<!--相关资源文件 (js核心文件) -->
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>	
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
	<!--相关样式文件(css文件)  -->
	<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />

相关js 和css 代码

<!--相关css文件  -->
	<style type="text/css"> 
		body {
			max-width: 700px;
			margin: 0 auto;
		}
	</style>
	<!--相关javascript代码  -->
	<script type="text/javascript">
	$(document).ready(function() {
			$('.fancybox').fancybox({
			//配置关闭选项 
			closeClick :true
			});
			
	});
	
	</script>

源文件和相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Jquery的fancybox控件</title>	
	<!--相关资源文件 (js核心文件) -->
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>	
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
	<!--相关样式文件(css文件)  -->
	<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<!--相关css文件  -->
	<style type="text/css"> 
		body {
			max-width: 700px;
			margin: 0 auto;
		}
	</style>
	<!--相关javascript代码  -->
	<script type="text/javascript">
	$(document).ready(function() {
			$('.fancybox').fancybox({
			//配置关闭选项 
			closeClick :true
			});
			
	});
	
	</script>
	
	
  </head>
  
  <body>   
   <h3>简单的图片缩放功能演示</h3>
	<p>
		<a class="fancybox" href="css/img/b1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="css/img/1_s.jpg" alt="" /></a>
 
		<a class="fancybox" href="css/img/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="css/img/2_s.jpg" alt="" /></a>
 
		<a class="fancybox" href="css/img/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="css/img/3_s.jpg" alt="" /></a>
 
		<a class="fancybox" href="css/img/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="css/img/4_s.jpg" alt="" /></a>
	</p>
   
  
       
  </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航