This time I will share jQuery Plugin and tutorial about Minimal Image Slideshow With Rollover Effect – photoroller, hope it will help you in programming stack.
photoroller is an ultra-light jQuery plugin that takes a list of images and converts them into a minimal gallery/slideshow with an interactive rollover effect.
So What Is Rollover Effect:
Rollover is an image switching effect introduced in earlier iPhone that allows users to switch images in sequence using mouse movement in a gallery.
How to use it:
1. First, include jQuery library and the photoroller plugin’s files on the web page.
1 |
< link href = "/path/to/dist/css/photoroller.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/dist/js/jquery.photoroller.js" ></ script > |
2. Then insert a group of images into a DIV container as follows:
2 |
< div >< img src = "1.jpg" ></ div > |
3 |
< div >< img src = "2.jpg" ></ div > |
4 |
< div >< img src = "3.jpg" ></ div > |
5 |
< div >< img src = "4.jpg" ></ div > |
6 |
< div >< img src = "5.jpg" ></ div > |
3. Finally, call the function photoroller
on the container element and done.
2 |
$( "#photoroller" ).photoroller(); |
4. Determine which image you want to show on page load. Default: 1.
2 |
$( "#photoroller" ).photoroller({ |
5. Determine whether to reset the slideshow/gallery on mouse leave. Default: false.
2 |
$( "#photoroller" ).photoroller({ |
6. Determine whether to reset the slideshow/gallery on mouse click. Default: true.
2 |
$( "#photoroller" ).photoroller({ |
This awesome jQuery plugin is developed by martinmethod. For more Advanced Usages, please check the demo page or visit the official website.