Updating examples

Author: sunil-samuel

README.md

@@ -64,7 +64,7 @@ Complete option usage with data attributes:
 
 ## Examples
 
-Take a look at the [Demo](https://sunil-samuel.github.io/#jquery-rbs)
+Take a look at the [Demo](https://sunil-samuel.github.io/index.html#pages/jquery/rbs.html)
 
 The following examples are provided:
 
@@ -108,18 +108,18 @@ The following are options used to define which background image and transitions
 >> The type of animation for the transition effect.  Currently only 'fade-in' is implemented.
 
 > **randomize** or **data-randomize** (default: false) [Boolean]
->> true - The images selected for the transition are picked randomly and not sequentially.
->> false - The images selected for the transition are picked sequentially starting from `current`.
+>> ***true*** - The images selected for the transition are picked randomly and not sequentially.<br>
+>> ***false*** - The images selected for the transition are picked sequentially starting from `current`.
 
 > **initialBackground** or **data-initialBackground** (default: null) [Number, 'random', url]
->> If set to anything other than null, then pick a background image from the list of images for the given element.
->> Number - A number between 0 and the length of the `images` array.  [0, images.length).  The background of the element is set to this image in the `images` array.
->> 'random' - The word 'random' indicate to pick a random image from the list of images in the `images` array to use as the initial background.
->> image url - The url to an image will be used as the background image for this element.
+>> If set to anything other than null, then pick a background image from the list of images for the given element.<br>
+>> ***Number*** - A number between 0 and the length of the `images` array.  [0, images.length).  The background of the element is set to this image in the `images` array.<br>
+>> ***'random'*** - The word 'random' indicate to pick a random image from the list of images in the `images` array to use as the initial background.<br>
+>> ***image url*** - The url to an image will be used as the background image for this element.
 
 > **debug** or **data-debug** (default: false) [Boolean]
->> true - Print debug messages to the log.console for debugging purposes.
->> false - No debug messages
+>> ***true*** - Print debug messages to the console.log for debugging purposes.<br>
+>> ***false*** - No debug messages
 
 ### Event Handlers
 

examples/example1.html

@@ -16,8 +16,9 @@
 	$(function() {
 		$(".bg").bgSlideShow({
 			current : 1,
-			debug : true,
-			randomize : true
+			debug : false,
+			randomize : true,
+			initialBackground : 'random'
 		});
 	});
 </script>

examples/example2.html

@@ -59,7 +59,7 @@
 		data-transitionDelay="5000" data-initialBackground="2">Some data
 		for widget one</div>
 	<div class='bg' data-images="gfx/bar.jpg,gfx/clouds.jpg,gfx/swirls.jpg"
-		data-debug="false" data-transitionDelay="7000"
+		data-debug="false" data-transitionDelay="7000" data-initialBackground="random"
 		data-transitionSpeed="3000">Some data for widget two</div>
 	<div style="height: 30px;">This is a div after the background div
 		to show that this plugin does not impact any elements after it</div>

examples/example3.html

@@ -17,7 +17,9 @@
 		$(".bg").bgSlideShow({
 			current : 0,
 			randomize : false,
-			images : [ "gfx/circles.jpg", "gfx/hash.jpg", "gfx/leaves.jpg" ]
+			images : [ "gfx/circles.jpg", "gfx/hash.jpg", "gfx/leaves.jpg" ],
+			initialBackground : 'random',
+			transitionDelay:2000
 		});
 	});
 </script>

src/jquery-bg-slideshow.js

@@ -36,7 +36,7 @@
 
 		var defaultOptions = $.extend({
 			// Start with element 0 as default.  Always 0 based.
-			current: 0,
+			current: -1,
 			// The list of images
 			images: [],
 			// Time in ms between the transition from one image to another