Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Full commit this time. Added the argument so a css class can be passe…

…d when using facebox

programmatically. Improved the documentation around programmatic usage and
added a test file for programmatic usage.
  • Loading branch information...
commit b24c1a8d6a2a460886efd6649494d7ae3aa0ac58 1 parent 6a3115a
Sean Johnson authored
Showing with 30 additions and 7 deletions.
  1. +10 −5 facebox.js
  2. +19 −1 index.html
  3. +1 −1  test.html
View
15 facebox.js
@@ -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)
}
View
20 index.html
@@ -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>
View
2  test.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 {
Please sign in to comment.
Something went wrong with that request. Please try again.