Get new jQuery plugins just once a week

×

Shuffle Images

June 17, 2014

A jQuery plugin to Shuffle Images by moving cursor around

Shuffle Images is a jQuery plugin that let you display and shuffle multiple images by moving cursor around or several other ways to trigger.This plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.

Example Code and options :-

$(".image-gallery").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.
});

Created by Pete R.

Download

Example

Shuffle Images jQuery plugin

shuffling

Shuffle Images

Related posts:

Fathom-js
traceit-js
Spotlight
Shuffle Images jQuery plugin

http://jquer.in/wp-content/uploads/2014/06/Shuffle-Images.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever