Responsive Auto Swapping Photo Wall Plugin With jQuery - SwappingWall
File Size: | 259 KB |
---|---|
Views Total: | 6001 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SwappingWall is a simple fast jQuery plugin used for generating a responsive photo wall that automatically and randomly swaps images at a certain speed.
How to use it:
1. Create an image list for the photo wall.
<div class="list"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> ... </div>
2. Load the JavaScript file swappingwall.jquery.js
after jQuery library.
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script> <script src="js/swappingwall.jquery.js"></script>
3. Apply you own CSS styles to the photo wall.
.list { width: 100%; padding: 0; margin: 0; } .list img { float: left; } @media screen and (max-width:991px) { .list div { width: 33.333333%; } } @media screen and (max-width:768px) { .list div { width: 50%; } }
4. Call the function on the image list to generate a basic photo wall.
$('.list').SwappingWall()
5. Set the delay & duration of the swap animation.
$('.list').SwappingWall({ 'time': 2000, 'duration': 400 })
6. Specify how many images displayed per row.
$('.list').SwappingWall({ 'itemsInRow': 8 })
7. Config the photo wall on different screens.
$('.list').SwappingWall({ 'responsive': [ { 'breakpoint': 991, 'itemsInRow': 3, }, { 'breakpoint': 768, 'itemsInRow': 2, } ] })
Change log:
2017-03-27
- Bugfixed
This awesome jQuery plugin is developed by oleksiisinkov. For more Advanced Usages, please check the demo page or visit the official website.