README
Easy PhotoWall
A javascript plugin for creating Slide Photoshows with effects.
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