@@ -29,6 +29,7 @@ * You can also use it programmatically: * * jQuery.facebox('some html') + * jQuery.facebox('some html', 'my-groovy-style') * * The above will open a facebox with "some html" as the content. * @@ -39,10 +40,14 @@ * The above will show a loading screen before the passed function is called, * allowing for a better ajaxy experience. * - * The facebox function can also display an ajax page or image: + * The facebox function can also display an ajax page, an image, or the contents of a div: * * jQuery.facebox({ ajax: 'remote.html' }) - * jQuery.facebox({ image: 'dude.jpg' }) + * jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style') + * jQuery.facebox({ image: 'stairs.jpg' }) + * jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style') + * jQuery.facebox({ div: '#box' }) + * jQuery.facebox({ div: '#box' }, 'my-groovy-style') * * Want to close the facebox? Trigger the 'close.facebox' document event: * @@ -64,9 +69,9 @@ $.facebox = function(data, klass) { $.facebox.loading() - if (data.ajax) fillFaceboxFromAjax(data.ajax) - else if (data.image) fillFaceboxFromImage(data.image) - else if (data.div) fillFaceboxFromHref(data.div) + if (data.ajax) fillFaceboxFromAjax(data.ajax, klass) + else if (data.image) fillFaceboxFromImage(data.image, klass) + else if (data.div) fillFaceboxFromHref(data.div, klass) else if ($.isFunction(data)) data.call($) else $.facebox.reveal(data, klass) } facebox.js @@ -163,7 +163,25 @@ <div class="code"> <h3>Arbitrary Text</h3> - <code>jQuery.facebox('something cool')</code> + <code> + jQuery.facebox('something cool');<br/> + jQuery.facebox('something cool', 'my-groovy-style'); + </code> + <h3>Remote files</h3> + <code> + jQuery.facebox({ ajax: 'remote.html' });<br/> + jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style'); + </code> + <h3>Image</h3> + <code> + jQuery.facebox({ image: 'stairs.jpg' });<br/> + jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style'); + </code> + <h3>A Page Element</h3> + <code> + jQuery.facebox({ div: '#box' });<br/> + jQuery.facebox({ div: '#box' }, 'my-groovy-style'); + </code> </div> <p> index.html @@ -4,7 +4,7 @@ <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"/> - <title>Facebox 1.0</title> + <title>Facebox 1.2</title> <link href="facebox.css" media="screen" rel="stylesheet" type="text/css" /> <style> #facebox { test.html 6a3115ad2dba545eca67fda95b34e1280d3b8c30 Sean Johnson sean@Seans-Mac-Pro.local http://github.com/defunkt/facebox/commit/b24c1a8d6a2a460886efd6649494d7ae3aa0ac58 b24c1a8d6a2a460886efd6649494d7ae3aa0ac58

2008-06-21T16:12:02-07:00

Full commit this time. Added the argument so a css class can be passed when using facebox programmatically. Improved the documentation around programmatic usage and added a test file for programmatic usage. 387e28856281f883f00d521955e8df3500149b12 Sean Johnson sean@Seans-Mac-Pro.local