jQuery Plugin For Randomly Swtiching Background Images - Random Wall

File Size: 18.6 KB
Views Total: 2868
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Randomly Swtiching Background Images - Random Wall

Random Wall is a simple jQuery plugin that randomly and automatically switches background images of an Html container at a certain delay time. You can set the plugin to fetch background images from raddit or imgur's hot wallpapers or from an image list specified in the javascript.

How to use it:

1. Include the jQuery library and jQuery random wall plugin on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="js/jquery.random-wall.min.js"></script> 

2. Create an container with an overlay element for the image placeholder.

<div id="random-wall">
<div class="overlay"></div>
</div>

3. The sample CSS to apply fullscreen random background images on the 'random-wall' container.

#random-wall {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
z-index: -1;
}
div.overlay {
opacity: .8;
background-color: rgba(0,0,0,0.3);
position: absolute;
height: 100%;
width: 100%;
}

4. Initialize the plugin with available options.

<script>
(function($){
$(function() {
$("#random-wall").randomwall({
mode: "raddit", // default imgur (option: 'imgur', 'raddit')
delay_time: 8000,
/* set random image pool manually (optional)
image_list: ['1.jpg',
 '2.jpg',
 '3.jpg',
 '4.jpg'],
*/
});
});
}(jQuery));
</script>

Change log:

2014-03-18

  • Error fix

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