/proto-facebox

Yet Another Facebox Clone for Prototype

Primary LanguageJavaScript

/*  Proto-Facebox version 1.2
 *  By Dennis Crall, http://github.com/dcrall
 *  @requires Prototype 1.6 & script.aculo.us 1.8

 *  Inspired by the original, Facebox by Chris Wanstrath - http://famspam.com/facebox
 *  First ported to Prototype by Phil Burrows - http://blog.philburrows.com
 *  Forked from Scott Davis http://github.com/jetviper21/prototype-facebox
 *  Additional forks at: http://github.com/robertgaal/facebox-for-prototype
 *
 *  Why another Facebox for Prototype?
 *    - Better feature parity with Facebox (for JQuery) v1.2
 *    - Written in idiomatic Prototype for better readability
 *
 *  Licensed under the MIT:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *  Usage:
 *   
 *  var facebox;
 *  document.observe('dom:loaded', function(e) {
 *  	facebox = new Facebox();		
 *	});
 *
 *  Customize settings by passing in a configuration object:
 *
 *  facebox = new Facebox({
 *      click_away: true,
 *      opacity: .5
 *  });		
 *
 *  Attach to mark-up unobtrusively using rel="facebox"
 *
 *  <a href="#terms" rel="facebox">Terms</a>
 *    Loads the #terms div in the box
 *
 *  <a href="terms.html" rel="facebox">Terms</a>
 *    Loads the terms.html page in the box
 *
 *  <a href="terms.png" rel="facebox">Terms</a>
 *    Loads the terms.png image in the box
 *
 *  <a href="#terms" rel="facebox.style-hook">Terms</a>
 *    Add class "style-hook" to $('facebox_content')
 *
 *  Use the display() method programmatically:
 *
 *    facebox.display({div: '#terms'})
 *    facebox.display({image: 'terms.gif'})
 *    facebox.display({ajax: 'terms.html'})
 *    facebox.display('some html', 'my-groovy-style')
 *
 *  Custom Events
 *    facebox:close			Close the facebox pop-up  
 *    facebox:init			Called as Facebox starts its initialize method  
 *    facebox:loading		Called as the loading sequence starts  
 *    facebox:beforeReveal	Called before content is revealed  
 *    facebox:reveal		Called after content is revealed  
 *    facebox:afterReveal	Alias for facebox:reveal
 *
 *  Trigger custom event: 
 *
 *    $('facebox').fire('facebox:loading');
 *
 *  Observe custom event:
 *
 *    document.observe('facebox:loading', function(e) {
 *	      console.log("Loading Facebox.");
 *    });
 * 
 */