WonderSlider

A full screen slider with automatic image positioning.
Tested: FF 16(Windows), Chrome 22(Windows), Opera 12(Windows), Internet Explorer 9(Windows)
Features: Images, Youtube and Vimeo videos, controls and progress bar. Can change images on the fly.
TODO: Add thumbnails, slide and random effects
Uses: Weer for absolute image positioning. http://github.com/RiseLedger/Weer/
License: GNU/GPL

Quick Start

1. Include latest jQuery
   

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

2. Grab a fresh copy of WonderSlider
   

<script type="text/javascript" src="wonderslider/wonder-slider.js"></script>

3. Include the CSS
   

<link rel="stylesheet" href="wonderslider/wonder-slider.css">

4. Give variables to wonder slider to init.
   

	<script type="text/javascript">
		jQuery(function() {
		
				var images = [
					'https://www.youtube.com/watch?v=p_abkDLAF5Q', // Plain Youtube URL
					'http://placekitten.com/g/1000/1000',   // Simple Image
					// Objects of images with caption
					{src: 'http://placehold.it/1000x1000&text='+  Math.random(), caption: 'This is my <strong>kitten</strong> <br /> Love it so much'},
					{src: 'http://placehold.it/1000x1000&text='+  Math.random(), caption: 'This is my <strong>kitten 2</strong> <br /> Love it so much'},
					
					// Video
					'http://www.youtube.com/watch?v=89NjEeHku8o&someparam=true',
					// Object of video
					{'video' : 'youtube' , 'id' : 'D8AvEstX_3E', caption: "Hello World"},
					// Vimeo
					'http://vimeo.com/20559242',
					{video : 'vimeo', 'id':'52193530'}
				];				


				jQuery.wonderSlider(images);
		
		});
	</script>

The slider accepts plain links or objects of items

Accepted Variables

Variable	Accepts	Default	Description
delay	any integer	5000	The delay between slides, in other words how much a slide is shown
speed	any integer	400	The time between the slides change
preload	true or false	true	Try preload images?
autoplay	true or false	true	If true, the slider will start by itself
progressBar	true or false	true	Show a progress bar?
progressBarColor	hex color with #	#000	The color of the progress bar
color	hex color with #	#000	The controls color
firstVideoAutoplay	true or false	true	If the first slide is set to be a video. autoplay it?
stopAudioTags	true or false	true	If firstVideoAutoplay is true, should we attempt to stop all HTML5 audio tags?
youtube	embed url for iframe for youtube	http://www.youtube-nocookie.com/embed/%v?rel=0&autoplay=%a&controls=0&modestbranding=1&wmode=opaque, where %v is video ID	Set up the structure of the video url, it might vary in future, you can enable controls here.
Vimeo	embed url for iframe for vimeo	http://player.vimeo.com/video/%v/?autoplay=%a, where %v is video ID	Set up the structure of the video url, it might vary in future, you can enable controls here.
Animation	fade or slide	fade	This is unsupported yet. It should define the animation type!

Using Variables

<script type="text/javascript">
	jQuery(function() {	
		jQuery.wonderSlider(images, { speed:500, delay:7000, color:'#999' });
	});
</script>

You simply pass the second parameter which are the settings of the slider.

Callbacks

• onInit - triggers when the html is ready, but the animation isn't yet started
• onBeforeChange - triggers before starting an animation
• onAfterChange - triggers after an animation is done
• onNextClick - triggers when the next image is clicked
• onPrevClick - triggers when the prev image is clicked
• onPlayPauseClick - triggers when the play/pause button is clicked

Using callbacks

Before you init wonder slider, you define a callback

<script type="text/javascript">
	jQuery(function() {
		function sliderIsReady()
		{
			console.log('Slider is ready');
		}
		
		function changingSlide()
		{
			console.log('Changing slide cb is called');
		}	
		jQuery.wonderSlider(images, { 'onInit': sliderIsReady , 'onBeforeChange' : changingSlide });
	});
</script>