Display & Shuffle Images in Several Ways with jQuery.Shuffle-Images.js

by in Tutorials on 11th Jun 2014 · 0 Comment

Images are an important element in web design. The more images you have on your website, the merrier as it’s easier to get your message across and most viewers will prefer them to long text anyway. There are several ways to show multiple images at once without consuming any web real estate such as horizontal sliders, Flipping Gallery, etc.

Today, I’ve decided to experiment on this to find new ways for users to get all these images at once without using sliders or manually controlled buttons. The result is my jQuery Shuffle Images plugin, a plugin that lets you display and shuffle multiple images by simply moving your cursors inside those images, and many other creative triggers (scroll, etc.) to let users view all the images without clicking.

Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop. It has not been tested on IE. Because of the nature of this plugin (mouse input is required), it might not work as expected on mobile devices without a mouse.

Display & Shuffle Images in Several Ways with jQuery.Shuffle-Images.js


How to Use jQuery.Shuffle-Images.js

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

<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

$(".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:

<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:

<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:

<div class="shuffle-me" data-si-scroll-trigger="200">
    <img src="images/1.jpg">
    ...
  </div>

Conclusion

There you have it, all the things you can do with jQuery Shuffle Images. I can’t wait to see the uses for this plugin by all of you. Don’t hesitate to show us what you did with this plugin in the comments below.

Again, if you have any questions, recommendations, or suggestions, please do let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.