PhotoWall
Download | Projects Page | Technology Page
What is It?
PhotoWall is a jQuery extension that creates stunning interactive photo galleries.
How Does it Work?
PhotoWall detects and organizes images in any block-level element on your webpage, creating a beautiful collage with optional slide show functionality. See a demo!
Documentation
The full documentation is available here, or you can check out the quick start guide below and explore the examples.
Quickstart
PhotoWall needs to be passed a block-level element containing the images to be displayed in the collage. PhotoWall assumes that the images are contained in link (<a>) tags, but it can be used with bare images without the slideshow functionality. Download and unzip PhotoWall to your website directory. Then add the following lines to the <head> section of your webpage:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery-photowall.pack.js"></script>
Then add something like this to your webpage:
<script type="text/javascript">
$(document).ready(function(){
$('#container').photoWall({bannerText:'My Photo Gallery'});
});
</script>
The '#container' part is a jQuery selector to a block-level element that contains your images. Your webpage markup might look something like this:
<div id="container">
<a href="[address of an image]"><img src="[address of thumbnail]" /></a>
<a href="[address of another image]"><img src="[address of thumbnail]" /></a>
. . . for all other images
</div>
You can also dispense with the link tags and use only <img> tags.
<script type="text/javascript">
$(document).ready(function(){
$('#container').photoWall({bannerText:'My Photo Gallery',links:false});
});
</script>
That's pretty much all there is to the basic demo. For more options and customization, keep reading, or check out the source code comments. Also check out how you can tweak options to integrate PhotoWall into your website. For a more advanced example, see my web design gallery.