Div Background slideshow with pre-loading of images and auto resizing
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Div Background slideshow with pre-loading of images and auto resizing

A really simple div background slideshow jquery plugin using CSS3 transitions for a smooth fade between slides and only 4k in size and no dependencies on other libraries apart from jQuery.

Images are loaded pre-emptively and only displayed once loaded (especially useful if site is being viewed on slow data connection).

How does it work?

Simple. Create a div, populate an array with your files and then call yasslide - it's as easy as that!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; background:#09F;padding:0;margin:0;overflow:hidden;}
#footer {position:relative;bottom: 0; left:0; width:100%;height:60px;background:#666;}
#header {position:relative;top: 0; left:0; width:100%;height:60px;background:#666;  float-left;}
#content {position: relative;height: 100%;padding:0;margin:0;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/yasslide.js"></script>
		   delay: 3000,  // optional - delay in milli-seconds
		   files: files, // an array of image files
		   debug: true, //optional - output messages to console.log
		   //top: '0px' optional - depending on your container div, where to create the floating div.  try without first.

<div class='wrapper'>
    <div id='header'>Header Text</div>
    <div id='content'></div>
    <div id='footer'>Footer Text</div>

For further examples see yasslide.chris-backhouse.com

changes 0.0.4 - pass new array of files on resize. new options for background-posiiton and background-size