PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » jquery.fancybox插件点击放大图片

jquery.fancybox插件点击放大图片

此文被围观1682日期: 2014-01-17 分类 : 前端设计  标签:  ·····
官网: http://fancybox.net/
fancybox是一款jQuery插件,这个插件能让你在各种浏览器上部署图片浏览的效果。
基于jQuery插件,兼容性都比较强。可以兼容firefox,ie等浏览器。
当你需要实现点击图片,就能将图片放大来查看。就像QQ,校内,新浪,淘宝一些图片浏览模式一样。
fancybox还提供多种弹出的样式,让你可以选择,找出你最需要的效果,满足不同的设计和需求。
Fancybox的特点如下:
(1)可以支持图片、html文本、flash动画、iframe以及ajax的支持 (2)可以自定义播放器的CSS样式 (3)可以以组的形式进行播放 (4)如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 (5)Fancybox播放器支持投影,更有立体的感觉
Fancybox使用方法:
1、引入jquery核心库和Fancybox插件
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
可选 – 如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本
<script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>
 1
2、添加样式表文件
1
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
3、在页面上创建链接元素 A、图片元素
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>
 
B、普通文本
<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a>
<div style="display: none;">
    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
1
C、Iframe
1
<a href="http://www.example?iframe">This goes to iframe</a>
<!---或者--->
<a href="http://www.example">This goes to iframe</a>
1
D、Ajax
1
<a href="http://www.example/data.php">This takes content using ajax</a>
 
如果你要显示描述信息,可以在链接上加上title,将描述信息放到title中。 4、最终的jquery初始化代码
$(document).ready(function() {
    /* 最基本的,使用了默认配置 */
    $("a#single_image").fancybox();
    /* 使用了自定义配置 */
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });
    /* 一下配置支持组播放 */
    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600,
        'speedOut'      :   200,
        'overlayShow'   :   false
    });
});
用rel标签来创建相册
<a rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a>
<a rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a>
<a rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a>
<a rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a>
$("a.grouped_elements").fancybox();

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.