Simple jQuery Plugin To Load Images Randomly - ChickenDinner

ChickenDinner is a super tiny jQuery plugin used to randomly load images from an array object, with a subtle fade-in animation. Also can be used in CSS background-image property that provides random background images for your visitors when the page reload.

How to use it:

1. Include the jQuery library and jQuery chickendinner plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 
<script type="text/javascript" src="chickendinner.js"></script> 

2. Insert an image with a CSS class. You can leave the src blank or add a image fallback.

<img class="demo1" src="images/1.png" alt="">

3. Used as random background images of a container.

<div class="demo2" style="background-image: url("images/1.png")" >

4. Initialize the plugin, create the image array and set the options.

$('.demo1').chickenDinner({
path: 'images/', // path to images
cssBg: false, // To employ css background-image
fadeInTime: 2500, // Milliseconds fade in time
altTag: ['Banner Image'], // Global img alt
TheImages: ['ban1.png', 'ban2.png','ban3.png','ban4.png','ban5.png','ban6.png'] // Images to be randomly selected
});

$('.demo2').chickenDinner({
path: 'images/', // path to images
cssBg: true, // To employ css background-image
fadeInTime: 2500, // Milliseconds fade in time
altTag: ['Banner Image'], // Global img alt
TheImages: ['ban1.png', 'ban2.png','ban3.png','ban4.png','ban5.png','ban6.png'] // Images to be randomly selected
});

Change log:

2014-05-02

• update

---

This awesome jQuery plugin is developed by sosweetcreative. For more Advanced Usages, please check the demo page or visit the official website.