Minimal Image Slideshow With Rollover Effect - photoroller

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.

<link href="/path/to/dist/css/photoroller.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.photoroller.js"></script>

2. Then insert a group of images into a DIV container as follows:

<div id="photoroller">
  <div><img src="1.jpg"></div>
  <div><img src="2.jpg"></div>
  <div><img src="3.jpg"></div>
  <div><img src="4.jpg"></div>
  <div><img src="5.jpg"></div>
</div>

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

$(function(){
  $("#photoroller").photoroller();
});

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

$(function(){
  $("#photoroller").photoroller({
    startpoint: 3
  });
});

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

$(function(){
  $("#photoroller").photoroller({
    jump_back: true,
  });
});

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

$(function(){
  $("#photoroller").photoroller({
    jumppoint_click: false
  });
});

---

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