jQuery Plugin For Auto Image Scroller On Hover - Thumbnail Scroller

imageAutoScroller is a jQuery plugin which enables a long list of images to auto move left / right or up / down in relation to the mouse position inside it's area.

Features:

• Vertical and/or horizontal scrolling
• AJAX and touch enabled.
• Supports scroll to functionality.
• Fully responsive.
• A plenty of examples to help you implement the plugin quickly.

Basic usage:

1. Load the plugin stylesheet file in the head section of the document.

<link rel="stylesheet" href="jquery.mThumbnailScroller.css">

2. Insert a list of image into the scroller wrapper.

<div id="demo" class="content">
  <ul>
    <li><a href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>
    <li><a href="#"><img src="4.jpg"></a></li>
    <li><a href="#"><img src="5.jpg"></a></li>
    ...
  </ul>
</div>

3. Load jQuery library and the jQuery Thumbnail Scroller plugin at the end of the webpage.

<script src="jquery.min.js"></script>
<script src="jquery.mThumbnailScroller.js"></script>

4. Call the function to active the image scroller.

$("#demo").mThumbnailScroller({
  /* OPTIONS */
});

5. Default config options.

/*
set element/content width/height programmatically 
values: boolean, pixels, percentage 
option            default
-------------------------------------
setWidth          false
setHeight         false
*/
/*
set the initial css top property of content  
values: string (e.g. "-100px", "10%" etc.)
*/
setTop:0,

/*
set the initial css left property of content  
values: string (e.g. "-100px", "10%" etc.)
*/
setLeft:0,

/* 
set the scrolling type 
values (string): "hover-0"/"hover-100" (number indicating percentage), "hover-precise", "click-0"/"click-100" (number indicating percentage), "click-thumb"
*/
type:"hover-50",

/* 
scroller axis (vertical and/or horizontal) 
values (string): "y", "x", "yx"
*/
axis:"x",

/*
scrolling speed
values: integer (higher=faster)
*/
speed:15,

/*
enable content touch-swipe scrolling 
values: boolean, integer, string (number)
integer values define the axis-specific minimum amount required for scrolling momentum
*/
contentTouchScroll:25,

/*
markup option parameters
*/
markup:{
/*
thumbnailsContainer sets the element containing your thumbnails. By default this is an unordered list ("ul") 
thumbnailContainer sets the element containing each thumbnail. By default this is a list-item ("li") 
thumbnailElement sets the actual thumbnail element. By default this is an image tag ("img") 
values: boolean, string
  option            default
  -------------------------------------
  thumbnailsContainer     null
  thumbnailContainer      null
  thumbnailElement      null
  
*/
/*
set the placeholder element of the buttons 
values: boolean, string
*/
buttonsPlaceholder:false,

/*
set buttons HTML
*/
buttonsHTML:{
  up:"SVG set 1",
  down:"SVG set 1",
  left:"SVG set 1",
  right:"SVG set 1"
}
},

/*
advanced option parameters
*/
advanced:{
/*
auto-expand content horizontally (for "x" or "yx" axis) 
values: boolean
*/
autoExpandHorizontalScroll:true,
/*
auto-update scrollers on content, element or viewport resize 
should be true for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements, content with images etc. 
values: boolean
*/
updateOnContentResize:true,
/*
auto-update scrollers each time each image inside the element is fully loaded 
values: boolean
*/
updateOnImageLoad:true
/*
auto-update scrollers based on the amount and size changes of specific selectors 
useful when you need to update the scroller(s) automatically, each time a type of element is added, removed or changes its size 
values: boolean, string (e.g. "ul li" will auto-update the scroller each time list-items inside the element are changed) 
a value of true (boolean) will auto-update the scroller each time any element is changed
  option            default
  -------------------------------------
  updateOnSelectorChange    null
*/
},

/* 
scroller theme 
values: string 
*/
theme:"none",

/*
user defined callback functions
*/
callbacks:{
  /*
  Available callbacks: 
    callback          default
    -------------------------------------
    onInit            null
    onScrollStart       null
    onScroll          null
    onTotalScroll       null
    onTotalScrollBack     null
    whileScrolling        null
  */
  onTotalScrollOffset:0,
  onTotalScrollBackOffset:0,
  alwaysTriggerOffsets:true
}

/*
add scroller(s) on all elements matching the current selector, now and in the future 
values: boolean, string 
string values: "on" (enable), "once" (disable after first invocation), "off" (disable)
liveSelector values: string (selector)
option            default
-------------------------------------
live            false
liveSelector        null
*/
},

---

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