Create An Animated Photo Wall with jQuery Photocols.js

Photocols.js is an easy jQuery plugin to create a responsive scrolling photo wall with animated image hover captions. Works nicely on modern browsers that support SVG element and CSS3 transitions.

How to use it:

1. Add the latest version of jQuery library and the photocols.js at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.photocols.min.js"></script> 

2. Create an empty container to place the photo wall.

<div id="photocols"></div>

3. Build an array of images with details (title, subtile, URl, etc...) using JS data object and then call the plugin on the container you just created to initialize the photo wall.

var data = [
  { 'title' : 'Title 1' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '1.jpg' },
  { 'title' : 'Title 2' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '2.jpg' },
  { 'title' : 'Title 3' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '3.jpg' },
  ...
];

(function ( $ ) {

  $('#photocols').photocols({'data': data});

}( jQuery ));

4. Set default values.

bgcolor : '#000', // background color of your photo wall
width : 'auto', // width
colswidth : '200', // column width
height : 600, // height
itemheight : 300,
gap : 5, // space bewteen images
titleSize : 16,
subtitleSize : 14,
overlayColor : '#000',
opacity : 0.3, // opacity
stopOnHover : true

Change log:

2014-06-26

• Now the column with hover stops

2014-06-19

• New Overlay color

2014-06-17

• Animation with setTimeOut instead jQuery Animate
• Clear Interval added for removing old animation when resizing

2014-06-16

• Fix data var

---

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