A javascript plugin for creating Slide Photoshows with effects.
You can use bower:
bower install easyphotowall
...or you can use npm:
npm install easyphotowall
If you prefer, you can just include the files manually.
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="easyphotowall">
<!-- 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()
Option | Type | Default |
---|---|---|
container | string | 'easyphotowall' |
data | javascript array | null |
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();
- Improve animations
- Add more effects
- Add duration option
- Add play and pause buttons
- Add custom size
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.
Asael Jaimes