在网上down下facebox1.2版的源码,
重新整理了下(原来是不兼容ie6的),
附件中jquery用的是1.3版的,我只写了展示图片的弹出层。
方法:
Load Dependencies
Make sure jQuery is loaded before Facebox.
<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
Attach It onLoad
While calling facebox()
on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox"
and hit them all onLoad.
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Extra Classes
You can give the facebox container an extra class (to fine-tune the display of reusable remote pages)
with the facebox[.class]
rel syntax.
Maybe your Terms and Conditions
can be loaded standalone or via Facebox. When loaded in Facebox,
you might want to tweak some styles -- like making the h1
positioned absolutely?
We do this on FamSpam.
View an an example which makes the remote.html
page bigger and bolder using css.
The Code
<a href="remote.html" rel="facebox[.bolder]">text</a>
Controlling Facebox Programmatically
It's possible to attain a higher level control over Facebox by calling methods directly.
The following will open the Facebox and insert the passed string into it:
Arbitrary Text
jQuery.facebox('something cool')
If you plan to fill the Facebox with the result of an Ajax call, you'll want the loading graphic
displayed whilst your asynchronus task runs. This is the automatic behavior if the facebox()
method is passed a function.
Loading Image Displayed
jQuery.facebox(function() {
jQuery.get('code.js', function(data) {
jQuery.facebox('<textarea>' + data + '</textarea>')
})
})
具体教程参见:http://plugins.jquery.com/project/facebox
或者http://famspam.com/facebox
分享到:
相关推荐
内容索引:脚本资源,jQuery,facebox Facebox 基于jQuery的一款带动画特效的华丽弹出层插件,当然华丽还是需要你去实现的,它只提供一些方法和效果,比如渐入渐出显示层,折叠展开等,本例这个不很华丽,只是为了测试...
jQuery Facebox lightbox效果华丽弹出层插件(灰色与蓝色).zip
facebox-height-with-iframe-... Facebox 高度、宽度 iframe 支持与 Facebox 插件兼容。 使用 rev 标签中的第一个值是为变量定义“iframe”添加的,它旁边的第一个值定义为“height”,下一个值定义为“width”。
这个插件主要是提供jquery的插件,是控制facebox中
弹出层 thickbox colorbox facebox jqueryalert shadowbox,很多,可以看着用
facebox是一个jquery为基础的lightbox,可显示图像, divs ,或者远程页面。 它的使用简单,容易。下载js,请查看例子,然后开始享受facebox给我们带来的乐趣。 经过自己的改装,现在已经可以支持拖拽了,效果相当炫...
Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript...在线示例6.FaceBox 在线示例7.jQuery Lightbox 在线示例8.Milkbox 在线示例9.jQuery L
最近发现一个不错的基于jquery的插件thickBox ,感觉比facebox好用。但因为jquery官方不推荐使用。所以这个只是学习的朋友,不建议使用这个。
使用Zend FrameWork 1.10.7内核,集成了SyntaxHighlighter代码高亮和facebox图片浏览插件。 这个BLOG很初级,很菜。。开源的目的只是想和有兴趣的人一起学习提高。。。 后台用户名密码:admin
54dev-blog是一套开源...使用Zend FrameWork 1.10.7内核,集成了SyntaxHighlighter代码高亮和facebox图片浏览插件。 这个BLOG很初级,很菜。。开源的目的只是想和有兴趣的人一起学**提高。。。 后台用户名密码:admin
使用Zend FrameWork 1.10.7内核,集成了SyntaxHighlighter代码高亮和facebox图片浏览插件。 这个BLOG很初级,很菜。开源的目的只是想和有兴趣的人一起学习提高。 安装使用说明: devcom_54dev.zip是数据库文件...
定制jQuery中FaceBox提供效果很酷的lightbox,FaceBox现在已经是一个jQuery的插件。 Visit Site Grooveshark Widget Creator 没有提供一个常见的flash菜单,而是通过jQuery提供了定制菜单,让你能够拥有自己的m
54dev-blog是一套开源个人...使用ZendFrameWork1.10.7内核,集成了SyntaxHighlighter代码高亮和facebox图片浏览插件。 这个BLOG很初级,很菜。。开源的目的只是想和有兴趣的人一起学习提高。。。 后台用户名密码:admin