又一个绝对棒的对话框插件fancybox v1.3.4

http://www.jsfoot.com/jquery/demo/2011-07-30/fancybox/index.html

jquery插件:fancybox

Fancybox的特点如下:

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

使用方法:

1、引入jquery核心库和Fancybox插件库


1

2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可选 - 如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本


1

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本


1

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、添加样式表文件


1

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

以下是一个实现小图缩放效果的例子:

<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>FancyBox 1.3.1 | Demonstration</title> <script type="text/javascript" src="js/jquery-1.4.min.js"></script>    <!--调用jquery核心库-----> <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script><!--调用可用鼠标控制的库--> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="js/pngobject.js"></script>      <!--correctly handle PNG transparency in Win IE 5.5 & 6.-->  <link rel="stylesheet" href="style/style.css" type="text/css"/> <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css"/>

<script type="text/javascript">  $(document).ready(function() {  /**  运行的代码  */

   $("a[rel=example_group]").fancybox({    ‘transitionIn‘  : ‘fade‘,  //设置动画效果. 可以设置为 ‘elastic‘, ‘fade‘ 或 ‘none‘    ‘transitionOut‘  : ‘fade‘,  //同上    ‘titlePosition‘  : ‘over‘,  //设置标题显示的位置.可以设置成 ‘outside‘, ‘inside‘ 或 ‘over‘    ‘titleFormat‘  : function(title, currentArray, currentIndex, currentOpts) { //可以自定义标题的格式     return ‘<span id="fancybox-title-over">Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘ &nbsp; ‘ + title : ‘‘) + ‘</span>‘;    }   });

<!-------------------------------------以下属于测试代码,不在此例子效果实现的代码内------------------------------------>       /*   *   单独设置每个图片或文件的效果   */

   $("a#example1").fancybox({    ‘titleShow‘  : true    //是否显示标题   });

   $("a#example2").fancybox({    ‘titleShow‘  : true,    ‘transitionIn‘ : ‘elastic‘,    ‘transitionOut‘ : ‘elastic‘   });

   $("a#example3").fancybox({    ‘titleShow‘  : true,    ‘transitionIn‘ : ‘none‘,    ‘transitionOut‘ : ‘none‘   });

   $("a#example4").fancybox();

   $("a#example5").fancybox({    ‘titlePosition‘ : ‘outside‘   });

   $("a#example6").fancybox({    ‘titlePosition‘ : ‘outside‘   });

   /*   *   设置id号为various效果   */

   $("#various1").fancybox({    ‘titlePosition‘  : ‘over‘,//标题显示的位置    ‘transitionIn‘  : ‘none‘,    ‘transitionOut‘  : ‘none‘   });

   $("#various2").fancybox();

   $("#various3").fancybox({    ‘width‘    : ‘75%‘,    ‘height‘   : ‘75%‘,    ‘autoScale‘   : false,    ‘transitionIn‘  : ‘fade‘,    ‘transitionOut‘  : ‘fade‘,    ‘type‘    : ‘iframe‘

   });

   $("#various4").fancybox({    ‘padding‘   : 0,    ‘autoScale‘   : false,  //如果为true,fancybox可以自适应浏览器窗口大小    ‘transitionIn‘  : ‘none‘,    ‘transitionOut‘  : ‘none‘

   });  }); </script>

</head><body><div id="content"> <h4>jQuery FancyBox 实现点击小图显示大图</h4> <p>  <a rel="example_group" href="example/4_b.jpg" title="Lorem ipsum dolor sit amet"><img  src="example/4_s.jpg"/></a>

  <a rel="example_group" href="example/5_b.jpg" title=""><img  src="example/5_s.jpg"/></a>

  <a rel="example_group" href="example/6_b.jpg" title=""><img  src="example/6_s.jpg"/></a> </p> <p>  <a rel="example_group" href="example/7_b.jpg" title="Lorem ipsum dolor sit amet"><img  src="example/7_s.jpg"/></a>

  <a rel="example_group" href="example/8_b.jpg" title=""><img  src="example/8_s.jpg"/></a>

  <a rel="example_group" href="example/9_b.jpg" title=""><img  src="example/9_s.jpg"/></a> </p></div><div><p>&nbsp;</p></div></body></html>

时间: 2024-10-07 05:23:39

又一个绝对棒的对话框插件fancybox v1.3.4的相关文章

一个非常棒的星星评分插件

现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观. 像这样的星星评分插件用得非常普遍,几乎要成为你随手捻来的小菜,任何一个不具备使用这样插件的前端程序员都是毫无战斗力的. 这里给大家介绍一个实现这样的评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移步这里. 基

图片预览插件 fancyBox

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox. 它除了能够展示图片之外,还能够展示 flash.iframe 内容.html 文本以及 ajax 调用.我们能够通过 css 来自己定义外观. 原文与源代码来自:http://tqcto.com/article/web/53337.html 中文文档网址:点击打开链接 Demo下载地址:点击打开链接 效果图 fancybox 特点: 能够支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持:

jquery图片播放插件Fancybox使用详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

大流量网站性能优化:一步一步打造一个适合自己的BigRender插件(转)

BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片的延迟加载.一个庞大的页面,有时我们并不会滚动去看下面的内容,这样就浪费了非首屏部分的渲染,而这些无用的渲染,不仅包括图片,还包括其他的 DOM 元素,甚至一些 js/css(某些js/css 是根据模块请求的,比如一些 ajax),理论上,每增加一个 DOM,都会增加渲染的时间.有没有办法能使得

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

十分钟开发一个调用Activity的PhoneGap插件

在HybridApp开发中,非常多业务我们是没有办法通过HTML5+js实现的,比方调用第三方的包括Activity的jar包,一些必须使用原生代码才干实现的功能,比方复杂的UI的效果,调用通讯相关的协议栈,第三方支付sdk等.这样的情况我们须要通过写cordova插件的方式,包装android原生代码为插件,供上层javascript调用.本文解说一个调用Activity并返回Activity结果的cordova插件样例,帮助大家掌握cordova plugin的开发 . Cordova插件是

一个好用的Dialog插件

网页中经常需要弹出dialog,虽然很多JS开源框架都提供这个功能,但是效果都不是很好,比如easy-UI.修改样式这些又不是我擅长的,身边又没有美工兄弟,苦逼啊! (Easy-UI的BasicDialog) 而且如果使用这个,只能在div中添加内容,Source Code如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Dialog -

一个很棒的手机app:金手指音乐曲谱&#8203;

http://apk.hiapk.com/appinfo/com.jh.APPfbf19bf66a8a4ed0a11f952a11fa6e07.news 一个很棒的手机app:金手指音乐曲谱