Andy's Blog » » FaceBox

FaceBox

FaceBox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

FaceBox下载

下载 facebox-1.0.tar.gz

FaceBox预览

FaceBox
 FaceBox

FaceBox
 FaceBox

FaceBox 使用方法:

Images

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

Divs

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

Ajaxes

<a href="/facebox/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.

<a href="/facebox/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>')
  })
})

Incoming search terms:

Tags: jQuery, lightbox, facebox

本文地址: http://blog.21andy.com/20080228/1018.html

1 评论 to “PHP开源CMS之MODx”

  1. 痞子C 于 2008-09-04 19:57:51 发表:

    Load Dependencies和Attach It onLoad那块看不太懂啊
    Load Dependencies是不是应该放到标签之间算是把jqurey库按上了?
    Attach It onLoad就真的不知道放哪了?请博主指教~~