Easy PhotoWall

A javascript plugin for creating Slide Photoshows with effects.

Demo page

Installation

Include the css file:

<!-- Path to the easyphotowall.css or easyphotowall.min.css -->
<link rel="stylesheet" href="dist/css/easyphotowall.min.css">

Include the javascript file before closing body tag:

<!-- Path to the easyphotowall.js or easyphotowall.min.js -->
<script type="text/javascript" src="dist/js/easyphotowall.min.js"></script>

Create a placeholder tag wherever you want the photowall:

<!-- By default the plugin searches for a div with the id of 'photowall' -->
<!-- You can set your custom id in the plugin options -->
<div id="photowall">
    <!-- You can set your images in a unordered list -->
    <ul>
        <li><img src="path/to/image_1.jpg" alt="Image 1"></li>
        <li><img src="path/to/image_2.jpg" alt="Image 2"></li>
        <li><img src="path/to/image_3.jpg" alt="Image 3"></li>
    </ul>
</div>

Initialize the plugin:

var photowall = new Photowall();
photowall.play()

Options

Option	Type	Default
container	string	'photowall'
data	javascript array	null

Usage

Example with custom id:

<div id="myCustomId">
    <!-- You can set your images in a unordered list -->
    <ul>
        <li><img src="path/to/image_1.jpg" alt="Image 1"></li>
        <li><img src="path/to/image_2.jpg" alt="Image 2"></li>
        <li><img src="path/to/image_3.jpg" alt="Image 3"></li>
    </ul>
</div>

var photowall = new Photowall({
    container: 'myCustomId'
});
photowall.play();

Example with custom id and javascript array data:

<div id="myCustomId"></div>

var images = ["path/to/image_1.jpg", "path/to/image_2.jpg", "path/to/image_3.jpg"];
var photowall = new Photowall({
    container: 'myCustomId',
    data: images
});
photowall.play();

TODO

• [ ] Improve animations
• [ ] Add more effects
• [ ] Add duration option
• [ ] Add play and pause buttons
• [ ] Add custom size

How you can contribute

You can drop me any request, suggestion or comment at my twitter.

I'm experimenting with this so feel free to submit issues and pull requests. That would be really cool :D. Thanks for reading.

Author

Asael Jaimes

http://realnerdo.com/