Lightweight jQuery Photo Wall Plugin - photowall.js

photowall.js is a lightweight and easy-to-use jQuery plugin for creating a photo wall-like layout for displaying photos. It will open a preview when clicking on a thumnail and show a larger photo and some other content like a title, a description and a link.

Related plugins:

• jQuery Plugin For Thumbnail Grid with Expanding Preview
• jQuery Fullscreen Photo Wall with CSS3 Transitions

How to use it:

1. Include jQuery library and jQuery photowall plugin on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="photowall/jquery.photoWall.min.js"></script>

2. Include required CSS file to style the photo wall

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

3. Markup html structure

<div class="photowall">
    <div class="pw-slide">
        <img class="pw-image" src="1.jpg" />
        <div class="pw-image-desc">
            <!-- Any HTML content can go in here. -->
            <!-- Be inventive. Be cool. -->
        </div>
    </div>
    <!-- ... add more children in here - it's awefully lonely ... -->
</div>

4. Call the plugin with options

<script>
jQuery(document).ready(function($) {
jQuery(".photowall").photoWall({
speed: 500 // The speed of all animations
});
});
</script>

5. Default plugin options.

speed: 500,
topOffset: 30,
beforeInit: function() {},
afterInit: function() {},
beforeNextPrev: function() {},
afterNextPrev: function() {},
beforeNext: function() {},
afterNext: function() {},
beforePrev: function() {},
afterPrev: function() {},
beforeClose: function() {},
afterClose: function() {},
onDestroy: function() {}

Change log:

v2.0.0 (2015-12-15)

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

v1.0.0 (2013-11-22)

• 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;

---

This awesome jQuery plugin is developed by jeremyjcpaul. For more Advanced Usages, please check the demo page or visit the official website.