ChickenDinner.js

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 TheMaisonMix.com, 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:

$('.js-chickendinner').chickenDinner({
  path: 'http://your-boss-site.com/images/',
  altTag: 'Banner Image',
  fadeInTime:2000,
  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.

$('.js-chickendinner-bg').chickenDinner({
  path: 'images/',
  fadeInTime:2000,
  cssBg:true,
  TheImages: ['ban2.png', 'ban3.png', 'ban4.png', 'ban5.png']
});

fadeInTime?

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

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 StephenScaff.com or @StephenScaff
If this made your life just a wee bit easier, would love to hear about that too!