How does this work?

Basically, the plugin will detect the movement of your cursor and when the cursor is hovering over the images, then the plugin executes the shuffle image mechanism. The problem with using the cursor to trigger shuffle image is that the cursor movement data changes every pixel which may cause the images to shuffle way too fast. The tackle this issue, I added a global variable to keep track of the previous cursor location and when the cursor moves, the current location will be compared to the previous location and if the pixel difference doesn’t exceed the number specified (default is 50px), then it won't execute the image shuffle mechanism. This way, the shuffle of images will now be significantly slower which in turn lets developers adjust the sensitivity of the trigger with this pixel difference variable.
For the shuffle image mechanism, the plugin simply hides all the images at first and displays only the first child and when the trigger is executed, the plugin will display the next image and hide the previous one. The plugin will automatically loop back to the first image if the last image is being shown.
And that’s all it takes to build this very simple jQuery snippet.

How-Tos

As always, make sure you’ve include the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.shuffle-images.js which can be found here, into your document’s <head> before you start.
Once that is done, make sure your HTML code looks like this:
HTML
1
2
3
4
5
6
7
8
9
10
<body>
  ..
  <div class="shuffle-me">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    ..
  </div>
  ..
</body>
Make sure all the images you want to shuffle through are wrapped within a container where we will call our function on. In this case, shuffle-me container will be used to call the function. The first <img> tag will be used as the cover photo of the container so make sure the first image is what you want the user to see initially.
Once that is done, call the function on the container (not on the image itself) as follows:
JS
1
2
3
4
5
6
7
8
$(".shuffle-me").shuffleImages({
   trigger: "imageMouseMove",
   triggerTarget: false,
   mouseMoveTrigger: 50,
   hoverTrigger: 200,
   scrollTrigger: 100,
   target: "> img"
 });
With the settings above as default, your shuffle-me container will shuffle through all the image tags inside on cursor move while hovering the image. The trigger will execute every 50 pixels difference on cursor move.
To see what this plugin is capable of, here are some options for you to play around with:
  • trigger: This option is a little tricky. You can choose which type of trigger you want by specifying it here. Available options are imageMouseMove, imageHover, documentMouseMove, and documentScroll.
    • The imageMouseMove will trigger when your mouse over the image and move your cursor.
    • The imageHover will trigger when you mouse over without moving your cursor.
    • The documentMouseMove will trigger when cursor is being moved anywhere on the page.
    • The documentScroll will trigger when you scroll the page.
    The default value is imageMouseMove.
  • triggerTarget: For imageMouseMove, and imageHover only, you can set which element to trigger the image shuffle when hovering. For example, if you want a container .main to trigger an image shuffle instead of the image itself, put $(".main") for this option. The default value is false.
  • mouseMoveTrigger: For imageMouseMove only, you can set how many pixels you have to move in order to trigger the image shuffle. The lower the faster. The default value is 50.
  • hoverTrigger: 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: For documentScroll only, you can set how many pixels you have to scroll to see the image shuffle. The default value is 100.
  • target: 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.

Available Markups

I believe this plugin can be used creatively to create a very nice interactive website with multiple images and so I decided to add a way for you to customize each image with its own shuffle settings. With the markups shown below, you can create a variety of effects without you calling the function multiple times.
data-si-mousemove-trigger
You can define a custom mouseMoveTrigger option on the image container with this data attribute:
1
2
3
4
<div class="shuffle-me" data-si-mousemove-trigger="100">
    <img src="images/1.jpg">
    ...
  </div>
data-si-hover-trigger
You can define a custom hoverTrigger option with this data attribute:
1
2
3
4
<div class="shuffle-me" data-si-hover-trigger="1000">
    <img src="images/1.jpg">
    ...
  </div>
data-si-scroll-trigger
You can define a custom scrollTrigger option on the image container with this data attribute:
1
2
3
4
<div class="shuffle-me" data-si-scroll-trigger="200">
    <img src="images/1.jpg">
    ...
  </div>
 Demo  Download

TAGS :