Javascript Icon Get 57% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

imgShufflr, randomised inline and CSS background images plugin

imgShufflr is quick and lightweight plugin for generating a random image upon page load. Simply load your images onto the server, and include the plugin on your page with a quick call, and you’ll be randomly generating their order with ease.

imgShufflr started as purely an inline image randomiser, using the tag, but includes options for using the background-image: property to use it as a background instead, it’s pretty flexible.

Markup and Usage

Include the file in your page, the minified or full version. You’ll need to call the imgShufflr in your page like so:

$('#imgShufflr').imgShufflr();

You’ll also need an HTML element with your chosen ID:

<div id="imgShufflr"></div>

Let’s look at the options included and the full markup:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/imgshufflr.min.js"></script>
<script>
$(function() {
  $('#imgShufflr').imgShufflr({
    imgType  : 'inline', // inline or background
    imgs     : ["image-1.jpg","image-2.jpg","image-3.jpg","image-4.jpg"], // Image array
    imgPath  : 'img/shuffle/', // Image directory
    imgAlt   : 'Random Image', // Alternate text on images
    imgTitle : 'Title', // Title text on images
    imgClass : 'shuffled' // Class name for the images
  });
});
</script>

Options explained:
imgType – inline or background. Choosing ‘inline’ will produce an tag with your options and attributes inside, whereas choosing background will use background-image as CSS instead. It’s as simple as that.

imgs – The array of images you want to shuffle on load.

imgPath – Your directory where your files are stored, if using a CMS such as WordPress, include the script inside tags in your header.php file, with a template tag hook to the template directory.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

imgAlt – Any alternate text you’d like to specify for your images (applies to all images).

imgTitle – Title tags for your images (applies to all images).

imgClass – HTML class attribute for CSS purposes if needed, default ‘shuffled’ class.

How it works

The workings behind imgShufflr explained.

;(function($) {

  $.fn.imgShufflr = function(options) {

    // imgShufflr settings
    var settings = {
      imgType  : 'inline', // inline or background
      imgs     : ["image-1.jpg","image-2.jpg","image-3.jpg","image-4.jpg"], // Image array
      imgPath  : 'img/shuffle/', // Image directory
      imgAlt   : 'Random Image', // Alternate text on images
      imgTitle : 'Title', // Title text on images
      imgClass : 'shuffled' // Class name for the images
    };

    // Load our settings
    if (options) {
      $.extend(settings, options);
    }

    // Shuffle, shuffle
    return this.each(function() {

      // Define our variables
      var $this = $(this),
        imgs  = settings.imgs,
        img   = imgs[Math.floor(Math.random() * imgs.length)];

      // If the settings are inline 
      if (settings.imgType === 'inline') {

        // Prepend the inline  with the following attributes
        $this.prepend(
          $('')
            .attr({
              src   : settings.imgPath   img,
              alt   : settings.imgAlt,
              title : settings.imgTitle,
              class : settings.imgClass
            })
        );

      }

      // If the settings are background image
      if (settings.imgType === 'background') {

        // Load the image into the CSS as a background image
        $this.css({
          'background-image':'url('   settings.imgPath   img   ')'
        });
      }

    });
  };
})(jQuery);

The main workings behind the plugin markup are pretty standard, it’s mainly inside our return this.each(function() that things get to work.

Firstly we declare some variables for using within our functions, using some JavaScript Math.Random() to be integrated into our image URL’s, which is how a random image is selected each time.

if (settings.imgType === ‘inline’) – here we run a check to see which settings are passed by the user, then if they match ‘inline’, we prepend an with all our settings inside into our selected element.

if (settings.imgType === ‘background’) – here we run a check to see if the ‘background’ option was selected, and if so, this then applies the random image as a background image using CSS instead of inline.

CSS Styling

When using the ‘background’ option, you’ll need to set the background size to the height and width of your image or it won’t appear.

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.