Backslider - Fullscreen Background Image Slider

Thank you for purchasing Backslider! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form - here

Thanks so much!

Documentation

1. Introduction

Backslider - site background image slider is an elegant and flexible solution for creative designs. This plugin can be used as site background changer or fullscreen image slider. Among other features this plugin offers five different slide modes, four animation effects and ability to load images directly from Flickr or Picasa. Also exclusively for one-page sites, this plugin has special "scroll" mode to automatically change background image when page is being scrolled.

2. Package

When you uncompress zip file you will see following files and folders:

3. Installation

Let's start by copying necessary files from zip archive to your site. So what you need to do is:

Next open index.html file and add following lines in head section:

	<link rel="stylesheet" type="text/css" href="css/backslider.css" />
	<script type="text/javascript" src="js/jquery-1.10.2.min.js">
	<script type="text/javascript" src="js/jquery.easing.1.3.js">
	<script type="text/javascript" src="js/jquery.backslider.min.js">

Add markup for Backslider to the body section

  • Pic
  • Pic
  • Pic
  • Pic

Every slide is represented by LI element with image inside, so if you need to add few more images, just add LI items as in example above. After you finished with markup, you need to add JS code to activate plugin. This can be done in following way:

<script type="text/javascript">
	$(document).ready(function(){
		$('#bs0').backslider({
			mode: 'pagination',
			effect: 'slidefade',
			effectEasing: 'easeOutCubic',
			effectTime: 2000,
			centerImages: true
		});
	});
</script>

4. Configuation

In list below you can find 26 configuration parameter that you can use with plugin:

//default settings
var settings = $.extend(true,{
	mode: 'controls',				// mode - "controls", "timer", "scroll", "pagination", "thumbnails"
	effect: 'fade',					// effect - "fade", "crossfade", "slidefade", "slide"
	effectTime:	1500,				// effect animation time
	effectEasing: 'swing',			// effect animation easing
	slideOffset: 50,				// "slide" effect offset
	slidefadeOffsetX: 0,			// "slidefade" effect X offset
	slidefadeOffsetY: -50,			// "slidefade" effect Y offset
	timerDelay: 5000,				// slideshow timer delay (for "timer" mode)
	scrollTimeout: 200,				// timeout before switching slides (for "scroll" mode)
	preload: true, 					// preload images
	preloadTime: 1000,				// preload animation time 
	preloadDelay: 200,				// preload animation delay  
	startSlide: 0,					// slide to begin with
	startRandom: false,				// start on random slide
	thumbnailsSize: '40px',			// thumbnails size (for "thumbnails" mode)
	thumbnailsOpacity: 0.5,			// thumbnails opacity (for "thumbnails" mode)
	thumbnailsTime: 500,			// thumbnails animation time (for "thumbnails" mode)
	centerImages: false,			// always center slide images
	photoSource: 'none',			// photo source - "flickrfeed", "flickrauth", "picasa" or "none"
	photoRange: '',					// photo range ("" or "1-3,5,6,7-9")
	flickrFeedQuery: {				// query arguments for "flickrfeed" photoSource
		set: '00000000',			// set ID
		nsid: '00000000@N00'		// user ID
	},
	flickrAuthQuery: {				// query arguments for "flickrauth" photoSource
		api_key: '00000000',		// auth key
		photoset_id: '00000000'		// set ID
	},
	picasaQuery: {					// query arguments for "picasa" photoSource
		user: 'username',			// picasa user name
		album: '00000000'			// picasa album ID
	},
	beforeSlide: function(){},		// before slide callback
	afterSlide: function(){},		// after slide callback
	slidesLoaded: function(){}		// slide images loaded callback
},s);

Few words about Backslider callback functions. In all callback functions "this" keyword refers to the backslider DOM element. The slidesLoaded() callback may have one argument which is a total number of slides. The beforeSlide() and afterSlide() callbacks may accept two arguments, where first one is slide index and second - total amount of slides.

5. API

Below is a list of public methods that you can use with plugin:
	Backslider.next() -			show next slide
	Backslider.previous() -		show previous slide
	Backslider.skip(index) -	show slide with given ID
	Backslider.pause() -		stop slideshow when plugin is in "timer" mode
	Backslider.resume() -		start slideshow when plugin is in "timer" mode
	Backslider.reset() - 		reset timer when plugin is in "timer" mode

There is two ways how to interact with Backslider plugin and use its public methods: using custom "backslider" event, or through Backslider object itself. The first method uses jQuery trigger() function to notify Backslider to perform some task, like for example to show next slide:

	$('#bs0').trigger('backslider',['next']);
	
	or simply
	
	$('#bs0').trigger('backslider','next');

In case if you need to pass additional argument (required by Backslider.skip() call), you need to do this in following way

	$('#bs0').trigger('backslider',['next',3]);

Please note that slides are indexed from 0, thus in above example Backslider will show fourth slide

Second approach to run Backslider methods implies using Backslider object, that you can retrieve using jQuery data() function:

	var bs = $('#bs0').data('backslider');
	bs.next();

6. How-To

This sections coverts common questions about Backslider configuration and usage.

How to change overlay pattern

When plugin starts it creates DIV element with class "bs-overlay" in front of all slides with a background pattern from images/bs-overlay.png. So if you want to replace overlay pattern with yours then just replace file images/bs-overlay.png. If you want to remove overlay at all, find style for .bs-overlay in css/backslider.css and set "display:none"

Backslider "scroll" mode

In this mode, background slide change is triggered by page scroll. Depending on amount of slides, scrollbar is being split on equal distances and when you scroll page Backslider automatically changes background images. Backslider "scroll" mode best fits for one-page sites with few sections, where scrolling between sections is followed by background image change. Also switching background slides is controlled by "scrollTimeout" parameter that sets delay in milliseconds after onscroll event had fired last time, thus preventing image change when scroll is not completed yet.

Flickr configuration

As you already know from Installation section, Backslider by default takes images from UL list. However it can also load images from external sources, like Flickr or Picasa using their API. In this section I will explain how to load images from Flickr. And I will start with setting up photo source. Backslider 'photoSource' option can be set to either 'flickrfeed' or 'flickrauth'. The key differences between these two Flickr set sources is that with 'flickrfeed' you don't need to register on Flickr to get api key, but you are limited to 20 images available through feed; now with 'flickrauth' you should create app on Flickr App Garden to receive api key, but then you will be able to fetch all images from set without any limits and higher resolution.

Here is briefly how to configure plugin with 'flickrfeed'. So, first what you should do is set 'photoSource' parameter to 'flickrfeed'. Now go to http://www.flickr.com/ and choose some set. Scroll page down and you will notice small RSS Feed link. This link will point to some address like this one - http://api.flickr.com/services/feeds/photoset.gne?set=1111111111111&nsid=2222222@N00&lang=en-us. What we need is 'nsid' and 'set'. They are 2222222@N00 and 1111111111111 respectively. Now when we have all what we need it's time to configure Backslider, just put these values into 'flickrFeedQuery' parameter as in example below:

<script type="text/javascript">
	$(document).ready(function(){
		$('#bs0').backslider({
			mode: 'pagination',
			effect: 'slidefade',
			effectEasing: 'easeOutCubic',
			effectTime: 2000,
			centerImages: true,
			photoSource: 'flickrfeed',
			photoRange: '3-6,8,10',
			flickrFeedQuery: {
				set: '1111111111111',
				nsid: '2222222@N00'
			}
		});
	});
</script>

Now with 'flickrauth' photoSource option we would need the same set ID and api_key from our registered App. They should go into 'flickrAuthQuery' backslider option like in example below:

<script type="text/javascript">
	$(document).ready(function(){
		$('#bs0').backslider({
			mode: 'pagination',
			effect: 'slidefade',
			effectEasing: 'easeOutCubic',
			effectTime: 2000,
			centerImages: true,
			photoSource: 'flickrauth',
			photoRange: '3-6,8,10',
			flickrAuthQuery: {				
				api_key: '000000000000000000000000',
				photoset_id: '1111111111111'
			}
		});
	});
</script>

Also as you may have noticed there is additional parameter in configuration, called 'photoRange'. It accepts a list of numbers or/and number ranges delimited by ',' symbol. With this option you can select individual images from Flickr JSON reply by their indexes, starting with 0.

Picasa configuration

Picasa configuration resembles Flickr configuration. We only change 'photoSource' to 'picasa' and get necessary parameters for configuration from Picasa album's RSS feed. Every Picasa Album has RSS feed link, that looks like this one - https://picasaweb.google.com/data/feed/base/user/11111111111/albumid/22222222222?alt=rss&kind=photo&hl=en_US. And what we need is user id - 11111111111 and albumid - 22222222222. Then Backslider configuration for Picasa will look like this:
<script type="text/javascript">
	$(document).ready(function(){
		$('#bs0').backslider({
			mode: 'pagination',
			effect: 'slidefade',
			effectEasing: 'easeOutCubic',
			effectTime: 2000,
			centerImages: true,
			photoSource: 'picasa',
			photoRange: '',
			picasaQuery: {
				user: '11111111111',
				album: '22222222222'
			}
		});
	});
</script>

If you set 'photoRange' to an empty string Backslider will load all images that are in album.

Thanks for reading!