image rollover photoroller - Free Download Minimal Image Slideshow With Rollover Effect - photoroller

Free Download Minimal Image Slideshow With Rollover Effect – photoroller

Posted on

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.

image rollover photoroller - Free Download Minimal Image Slideshow With Rollover Effect - photoroller
File Size: 76.9 KB
Views Total: 1574
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

1 <div id="photoroller">
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>
7 </div>

3. Finally, call the function photoroller on the container element and done.

1 $(function(){
2   $("#photoroller").photoroller();
3 });

4. Determine which image you want to show on page load. Default: 1.

1 $(function(){
2   $("#photoroller").photoroller({
3     startpoint: 3
4   });
5 });

5. Determine whether to reset the slideshow/gallery on mouse leave. Default: false.

1 $(function(){
2   $("#photoroller").photoroller({
3     jump_back: true,
4   });
5 });

6. Determine whether to reset the slideshow/gallery on mouse click. Default: true.

1 $(function(){
2   $("#photoroller").photoroller({
3     jumppoint_click: false
4   });
5 });

This awesome jQuery plugin is developed by martinmethod. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net