jQuery Plugin To Shuffle Through Images By Mouse Moving - Shuffle Images

File Size: 846 KB
Views Total: 2851
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Shuffle Through Images By Mouse Moving - Shuffle Images

Shuffle Images is an easy and creative jQuery plugin that enables you to shuffle/switch through a group of images by mouse moving (or other trigger events). Helpful for exploring multiple images at the same position to save the webpage space, a little similar to the image slideshow.

How to use it:

1. Include the latest version of jQuery library and the jQuery shuffle image plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.shuffle-images.js"></script>

2. Wrap the images you want to shuffle through in an DIV container.

<div class="demo">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    ..
</div>

3. Call the plugin on the DIV element and you're done.

<script>
$(document).ready(function(){
$("demo").shuffleImages();
});
</script>

4. Options and defaults.

<script>
$(document).ready(function(){
$("demo").shuffleImages({
trigger: "imageMouseMove",  // Choose which type of trigger you want here. Available options are "imageMouseMove", "imageHover", "documentMouseMove", and "documentScroll". "imageMouseMove" will trigger when your mouse over the image and move your cursor. "imageHover" will trigger when you mouse over without moving your cursor. "documentMouseMove" will trigger when cursor is being moved anywhere on the page. "documentScroll" will trigger when you scroll the page. The default value is "imageMouseMove"
triggerTarget: false, // For "imageMouseMove", and "imageHover" only, you can set which element to trigger the image shuffle when mouse over. For example, if you want a container ".main" to trigger an image shuffle instead of the image itself, put $(".main") for this option. Default value is false.
mouseMoveTrigger: 50, // For "imageMouseMove" only, you can set how many pixels you have to move in order to trigger one image shuffle. The lower the faster. The default value is 50.
hoverTrigger: 200, // For "imageHover" only, you can set how long you have to hover the image until it shuffles to other images. The option accepts milliseconds without unit. The default value is 200.
scrollTrigger: 100, // For "documentScroll" only, you can set how many pixels you have to scroll to see the image shuffle. The default value is 100.
target: "> img"  // In case you have a complete HTML structure, you can set your own custom selector to your images here. The default value is "> img" which means images that are directly under the "shuffle-me" will be used to shuffle.
});
});
</script>

5. You can also pass the options in the markups via data-* attributes.

<div class="demo"
data-si-hover-trigger="200"
data-si-mousemove-trigger="50"
data-si-scroll-trigger="100"
>
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    ..
</div>

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