Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
260 lines (215 sloc) 8.9 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.3</title>
<link href="stylesheets/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/default.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
// We have multiple different boxes on this page so each one needs to be initalized and named differently otherwise we'd end up with one big gallery.
// A simple page can just declare it with:
// jQuery(document).ready(function($) {
// $('a[rel=facebox]').facebox();
// });
jQuery(document).ready(function($) {
$('a[rel=faceboxSingle]').facebox({
closeImage : "images/closelabel.gif",
loadingImage : "images/loading.gif",
previousImage : "images/prev.png",
nextImage : "images/next.png"
})
});
jQuery(document).ready(function($) {
$('a[rel=faceboxGallery]').facebox({
closeImage : "images/closelabel.gif",
loadingImage : "images/loading.gif",
previousImage : "images/prev.png",
nextImage : "images/next.png"
})
});
jQuery(document).ready(function($) {
$('a[rel=faceboxDiv]').facebox({
closeImage : "images/closelabel.gif",
loadingImage : "images/loading.gif",
previousImage : "images/prev.png",
nextImage : "images/next.png"
})
});
jQuery(document).ready(function($) {
$('a[rel=faceboxAjax]').facebox({
closeImage : "images/closelabel.gif",
loadingImage : "images/loading.gif",
previousImage : "images/prev.png",
nextImage : "images/next.png"
})
});
</script>
</head>
<body>
<div id="main">
<div id="shadow">
<div id="content">
<div id="logo">
<img src="demo_images/logo.png"/>
</div>
<div class="example">
<h2>What is it?</h2>
<p>
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
</p>
<p>
It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
</p>
</div>
<div class="example">
<h2>Download</h2>
<p>Requires at least <a href="http://jquery.com">jQuery 1.2.1</a>, but the current version is fine.</p>
<p>
You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included
in the tarball.
</p>
<p>
<strong><a href="releases/facebox-1.3.tar.gz">Download Facebox v1.3</a></strong>
</p>
<p>
You've probably already found it, but the cutting edge source for this plugin can befound on <strong><a href="http://github.com">GitHub</a></strong> here:<br />
<a href="http://github.com/kimos/facebox">http://github.com/kimos/facebox</a>
</p>
<p>
This release is a fork from the original Facebox by defunkt here:<br /><a href="http://github.com/defunkt/facebox">http://github.com/defunkt/facebox</a>
</p>
</div>
<div class="example">
<h2>Need help?</h2>
<p> There's a pretty inactive <a href="http://groups.google.com/group/facebox/">Google Groups mailing list</a>. </p>
<p>You can also try contacting me on gitub <a href="http://github.com/kimos">http://github.com/kimos</a> or email me at <a href="mailto:kimos-github@gleep.ca">kimos-github@gleep.ca</a>.</p>
</div>
<div class="example">
<h2>Image</h2>
<p> <a href="demo_images/image.jpg" rel="faceboxSingle"><img src="demo_images/thumb.jpg" /></a> </p>
<div class="code">
<h3>The Code</h3>
<code>&lt;a href="image.jpg" rel="facebox"&gt;text&lt;/a&gt;</code>
</div>
</div>
<div class="example">
<h2>Image Gallery</h2>
<p>
<a href="demo_images/image1.jpg" rel="faceboxGallery"><img src="demo_images/thumb1.jpg" /></a>
<a href="demo_images/image2.jpg" rel="faceboxGallery"><img src="demo_images/thumb2.jpg" /></a>
<a href="demo_images/image3.jpg?123123" rel="faceboxGallery"><img src="demo_images/thumb3.jpg" /></a>
<a href="demo_images/image4.jpg?234234" rel="faceboxGallery"><img src="demo_images/thumb4.jpg" /></a>
<div class="code">
<h3>The Code</h3>
<code>
&lt;a href="full_1.jpg" rel="facebox"&gt;&lt;img src="thumbnail_1.jpg" /&gt;&lt;/a&gt;<br />
&lt;a href="full_2.jpg" rel="facebox"&gt;&lt;img src="thumbnail_2.jpg" /&gt;&lt;/a&gt;
</code>
</div>
</div>
<div class="example">
<h2>Divs</h2>
<p> <a href="#info" rel="faceboxDiv">View the 'info' div in the Facebox</a> </p>
<div class="code">
<h3>The Code</h3>
<code>&lt;a href="#info" rel="facebox"&gt;text&lt;/a&gt;</code>
</div>
</div>
<div class="example">
<h2>Ajaxes</h2>
<p> <a href="remote.html" rel="faceboxAjax">View 'remote.html' in the Facebox</a> </p>
<div class="code">
<h3>The Code</h3>
<code>&lt;a href="remote.html" rel="facebox"&gt;text&lt;/a&gt;</code>
</div>
</div>
<div class="example">
<h2>Load Dependencies</h2>
<p>Make sure jQuery is loaded before Facebox.</p>
<div class="code">
<code>
&lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;<br/>
&lt;link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/&gt;<br/>
&lt;script src="facebox.js" type="text/javascript"&gt;&lt;/script&gt;
</code>
</div>
</div>
<div class="example">
<h2>Attach It onLoad</h2>
<p>While calling <code>facebox()</code> on any anchor tag will do the trick, it's easier to give your Faceboxy links a <code>rel="facebox"</code> and hit them all onLoad.</p>
<div class="code">
<code>
jQuery(document).ready(function($) {<br/>
&nbsp;&nbsp;$('a[rel=facebox]').facebox() <br/>
})
</code>
</div>
</div>
<div class="example">
<h2>Controlling Facebox Programmatically</h2>
<p>
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:
</p>
<div class="code">
<h3>Arbitrary Text</h3>
<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>
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 <code>facebox()</code>
method is passed a function.
</p>
<div class="code">
<h3>Loading Image Displayed</h3>
<code>
jQuery.facebox(function() { <br/>
&nbsp;&nbsp;jQuery.get('code.js', function(data) {<br/>
&nbsp;&nbsp;&nbsp;&nbsp;jQuery.facebox('&lt;textarea&gt;' + data + '&lt;/textarea&gt;')<br/>
&nbsp;&nbsp;})<br/>
})
</code>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li> Code &copy;2007/2008 Chris Wanstrath </li>
<li> Style &copy;2007 Facebook </li>
<li>MIT License</li>
</ul>
</div>
</div>
<div id="info" style="display:none;">
<p> Hey, I'm the 'info' div! </p>
<p> I look like this: </p>
<code>
&lt;div id="info" style="display:none;"&gt; <br/>
&nbsp;&nbsp;text<br/>
&lt;/div&gt;
</code>
</div>
</body>
</html>