/iscrubber

Jquery plugin mimics iPhoto's picture scrubbing feature.

Primary LanguageHTML

iScrubber

jQuery plugin that mimics iPhoto's picture scrubbing feature.

See demo page

1.2.0
  • Added option to choose the mouse direction that show the items

Minimal Setup

  • Create the element structure with pictures
  <ul class="scrubber">
    <li><img src="images/image1.png"></li>
    <li><img src="images/image2.png"></li>
    <li><img src="images/image3.png"></li>
    <li><img src="images/image4.png"></li>
  </ul>
  • Add this line to your CSS
  ul.scrubber li {display: none;}
  • Add jQuery and iScrubber libs
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="lib/jquery.iscrubber.min.js"></script>
  • Initialize the plugin
  $(".scrubber").iscrubber();
  • Customize it
  $(".scrubber").iscrubber({
    showItem: 1, // the element (li) to show first; 1 based index
    leaveToFirst: true, // come back the the first element when mouse leaves scrubbing area
    direction: "horizontal" // use to specified the direction that mouse takes to show the items
  });