facebox插件

在网上down下facebox1.2版的源码,

重新整理了下(原来是不兼容ie6的),

附件中jquery用的是1.3版的,我只写了展示图片的弹出层。

 

方法：

Images

View '/facebox/stairs.jpg' in the Facebox

The Code

<a href="stairs.jpg" rel="facebox">text</a>

Divs

View the 'info' div in the Facebox

The Code

<a href="#info" rel="facebox">text</a>

Ajaxes

View 'remote.html' in the Facebox

The Code

<a href="remote.html" rel="facebox">text</a>

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

评论

2 楼 ice-cream 2009-01-19  

hozaka 写道

过年了还折腾技术啊，哈哈，貌似最近都在搞这类gallery的js，工作需要？

年前工作不是很忙，刚好搜集一下平时喜欢的插件

1 楼 hozaka 2009-01-19  

过年了还折腾技术啊，哈哈，貌似最近都在搞这类gallery的js，工作需要？