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:
You’ll also need an HTML element with your chosen ID:
Let’s look at the options included and the full markup:
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.
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.
The main workings behind the plugin markup are pretty standard, it’s mainly inside our return this.each(function() that things get to work.
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.
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.