A little Jquery plugin that randomly loads images from a client-side array.

Reload It Mane!

Winner Winner, Chicken Dinner

ChickenDinner is a stupid little Jquery plugin (1kb - unminified) that will randomly load images from a client-side array.

Download from Github

That Sounds Dumb

No, you're dumb. I mean, it makes sense if you're looking to present visitors with a unique experience each time they hit you up. Think banners and heroes. Basically, I wanted to do this on a recent project, and figured someone somewhere might like to do something similar, so here we are.

How's It Work Then?

Easy peasy. You can either apply it directly to a img tag, or as a css background-image. And don't forget to include Jquery champ.

On an img tag

First, add your image tag with a unique class. Preferably, leave the src blank (href="#"), or add a fallback for the no js, "but that wont validate" punks - a sexy ass fadeIn animation prevents the image from popping through before the script fires (usually). Either way, to maintain the parent div's height, might wanna rock an intrinsic ratio move.

/*Blank src*/
<img class="js-chickendinner" src="#" alt="">
/*With an src fallback for the no js losers*/
<img class="js-chickendinner" src="images/banner1.png" alt="">

Now just initialize the badboy with your class, include the path to your images (unless in the default location: 'images/'), give 'er a common alt name, and list the images to swap, like so:

  path: '',
  altTag: 'Banner Image',
  TheImages: ['banner2.png', 'banner3.png', 'banner4.png', 'banner5.png']

As a CSS background-image

To rock out with random background-images, first add a div with a unique class that you wanna target. Since this will work via inline css, best to also include the inline styles to serve as fallback.

/* With fallback inline style */
<div class="js-chickendinner-bg" style="background-image: url("../images/banner1.png"> <!--Joey Content was here--> </div>

Initialize it, but this time add the option cssBG with the value of 'True'. ChickenDinner will then inject the background-image attribute via an inline style, so make sure to style up your div as you normally would for background images.

  path: 'images/',
  TheImages: ['ban2.png', 'ban3.png', 'ban4.png', 'ban5.png']


An option with a numeric value (milliseconds) that Fades your images in all sexy like. Again, if you include a fallback image this prevents it from blipping through before the script fires.

Options / Defaults

Option Description Default Value
path path to images 'images/'
TheImages Images to be randomly selected ['ban1.png', 'ban2.png, ...']
cssBG To employ css background-image True
altTag Global img alt 'Banner Image'
fadeInTime Milliseconds fade in time 2000

Getcha Self a Slice

Go on and grab some ChickenDinner.

Download from Github

Questions? Comments

Wanna tell me why the code is grimy and I'm a retard?
Then hit me up via My Arse or @StephenScaff
If this made your life just a wee bit easier, would love to hear about that too!

.ir {
 position: relative;
 padding-bottom: 34%;
 height: 0;
img.js-chickendinner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
/*Mark up*/
<div class="ir">
<div class="js-chickendinner" src="images/ban2.png">