PhotoWall.js

A lightweight jQuery plugin for displaying photos

View the demo or download from GitHub or view it on the official jQuery plugin registry.

Current version: 2.0.0

Changes

Version 2.0.0 - Complete rewrite of the entire code to get inline with best practice and to fix a few bugs..

Version 1.0.0 - First major version - Complete restructure of the code; more efficient initialisations, no need for the user to use specific class names, ability to have multiple PhotoWalls on a page and now fully responsive.

Version 0.1.0 - Creation point.

Basic Usage

1. Upload the PhotoWall folder to your server and link the required files into your page (usually in the head section). For best results use the minified version of the javascript as it is faster for browsers to load.

		
	<!-- basic stylesheet -->
	<link rel="stylesheet" href="photowall/jquery.photoWall.css">

	<!-- Plugin requires jQuery 1.9+  -->
	<!-- Ensure jQuery appears only once on your page for performance. -->
	<script src="photowall/jquery-1.9.1.min.js"></script>

	<!-- Main PhotoWall JS script file -->
	<!-- Use the minified version for better performance. -->
	<script src="photowall/jquery.photoWall.min.js"></script>
		
		

2. Add the photo wall HTML code to the body section. Please use the recommended setup below; using the same tag types. Otherwise the plugin will break, without any manual code adjustments.

		
	<div class="photowall">
	    <div>
	        <img src="images/image-filename.jpg" />
	        <div>
	            <!-- Any HTML content can go in here. -->
	            <!-- Be inventive. Be cool. -->
	        </div>
	    </div>

	    <!-- ... add more children in here - it's awfully lonely ... -->
	</div>
		
		

3. Initialise the wall (usually at the end of the body section). For optional settings, callbacks and calls to the PhotoWall API check out the advanced sections below.

		
	<script>
	    jQuery(document).ready(function($) {
	        $('.photowall').photoWall();
	    });
	</script>
		
		

So there you have it, all in three easy steps. You may want to edit the supplied stylesheet to get the wall to display as desired on your site, it has been designed to be a fixed width (in the same way that it's inspiration is at a fixed width). This is first and foremost a photo display plugin for the average screen size, it is not intended to be responsive (yet!).

Options

If you want to customise your experience you can change some of the default options. Where possible the defaults are set to the jQuery defaults. Since this is a new plugin there aren't many (just the one actually) but if you want a feature added just let me know...or write the code and share it with me ;)


speed

Type: Integer

Default: 500

The speed of all animations within the plugin. For example, the speed of the image previewer while it shows and hides.


	$('.photowall').photoWall({ speed: 500 });
				

Events

In order to extend the functionality of the photo wall's API you can use the following callback functions.


beforeInit()

Type: Callback

Triggered when the photo wall construct is called.

Code examples:

Initialise the photo wall with the beforeInit callback specified:


	$('.photowall').photoWall({
	    beforeInit: function(){}
	});
				

afterInit()

Type: Callback

Triggered after the photo wall construct is called.

Code examples:

Initialise the photo wall with the afterInit callback specified:


	$('.photowall').photoWall({
	    afterInit: function(){}
	});
				

beforeNextPrev()

Type: Callback

Triggered before either next/previous photo slide is displayed.

Code examples:

Initialise the photo wall with the beforeNextPrev callback specified:


	$('.photowall').photoWall({
	    beforeNextPrev: function(){}
	});
				

afterNextPrev()

Type: Callback

Triggered after either next/previous photo slide is displayed.

Code examples:

Initialise the photo wall with the afterNextPrev callback specified:


	$('.photowall').photoWall({
	    afterNextPrev: function(){}
	});
				

beforeNext()

Type: Callback

Triggered before next photo slide is displayed.

Code examples:

Initialise the photo wall with the beforeNext callback specified:


	$('.photowall').photoWall({
	    beforeNext: function(){}
	});
				

afterNext()

Type: Callback

Triggered after next photo slide is displayed.

Code examples:

Initialise the photo wall with the afterNext callback specified:


	$('.photowall').photoWall({
	    afterNext: function(){}
	});
				

beforePrev()

Type: Callback

Triggered before previous photo slide is displayed.

Code examples:

Initialise the photo wall with the beforePrev callback specified:


	$('.photowall').photoWall({
	    beforePrev: function(){}
	});
				

afterPrev()

Type: Callback

Triggered after previous photo slide is displayed.

Code examples:

Initialise the photo wall with the afterPrev callback specified:


	$('.photowall').photoWall({
	    afterPrev: function(){}
	});
				

beforeClose()

Type: Callback

Triggered before the photo slide display is closed.

Code examples:

Initialise the photo wall with the beforeClose callback specified:


	$('.photowall').photoWall({
	    beforeClose: function(){}
	});
				

afterClose()

Type: Callback

Triggered after the photo slide display is closed.

Code examples:

Initialise the photo wall with the afterClose callback specified:


	$('.photowall').photoWall({
	    afterClose: function(){}
	});
				

onDestroy()

Type: Callback

Triggered when the photo wall is destroyed.

Code examples:

Initialise the photo wall with the onDestroy callback specified:


	$('.photowall').photoWall({
	    onDestroy: function(){}
	});
				

API

Sometimes you may want to manually call the photo wall methods within your code. This can be useful for changing the options of the photo wall or for linking slides to other slides within the image display content.


option(key, value)

Type: Function

Gets (returns the type of the respective option) or sets the photo wall options.

Code examples:

Get the value of the speed option:


	$('.photowall').photoWall().option('speed');
				

Set the value of the speed option:


	$('.photowall').photoWall().option('speed', 800);
				

select(value)

Type: Function

Displays the image display for the photo index given, as if the user had clicked on that image. The value is a 0 based index.

Code examples:

Select the second image for display:


	$('.photowall').photoWall().select(1);
				

Select the second image for display after initialising the photo wall:


	$('.photowall').photoWall({
	    afterInit: function() {
	        $(this).photoWall().select(1);
	    }
	});
				

selectById()

Type: Function

If you have a large selection of photos in your wall you may want to link to one without having to work out it's index and use the above select function. For this reason there is a select by ID function, allowing you to reference the ID of the pw-slide element that you want to select.

Code examples:

Set the image slide an ID of "test" for reference later:


	<div id="test" class="pw-slide">
	    <img class="pw-image" src="images/test.jpg" />
	    <div class="pw-image-desc">
	        <h1>Testing selectById</h1>
	        <p>
	            The ID of the pw-slide has been set to test.
	            See how to use this for selection below.
	        </p>
	    </div>
	</div>
				

Select the image slide with ID "test" for display:


	$('.photowall').photoWall().selectById('test');
				

selectFirst()

Type: Function

Displays the image display for the first photo, as if the user had clicked on that image. The equivalent of $('.photowall').photoWall().select(0);.

Code examples:

Select the first image for display:


	$('.photowall').photoWall().selectFirst();
				

selectLast()

Type: Function

Displays the image display for the last photo, as if the user had clicked on that image. The equivalent of $('.photowall').photoWall().select($(this).children(':last').index());.

Code examples:

Select the first image for display:


	$('.photowall').photoWall().selectLast();
				

close()

Type: Function

Closes the image display. Is also attached to the ESC button press event.

Code examples:

Close the image display:


	$('.photowall').photoWall().close();
				

destroy()

Type: Function

Destroy the photo wall instance.

Code examples:

Destroy the photo wall instance:


	$('.photowall').photoWall().destroy();