jQuery Plugin For Auto Image Scroller On Hover - Thumbnail Scroller
File Size: | 989 KB |
---|---|
Views Total: | 6465 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.