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!
Example
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
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;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/yasslide.js"></script>
<script>
$(document).ready(function(){
$('#content').height($('body').outerHeight()-$('#header').outerHeight()-$('#footer').outerHeight()-21);
files=['http://myserver.com/images/slide01.jpg','http://myserver.com/images/slide02.jpg','http://myserver.com/images/slide03.jpg'];
$('#content').yasslide({
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.
});
});
</script>
</head>
<body>
<div class='wrapper'>
<div id='header'>Header Text</div>
<div id='content'></div>
<div id='footer'>Footer Text</div>
</div>
</body>
</html>
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