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-->
<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']
});

Lookie Lookie
You can learn more about ChickenDinner and see it in action Right Here

Of course, it’s also on GitHub