jQuery Fullscreen Slideshow

Simple jQuery plugin that allows you to create a fullscreen image slideshow with zoom/slide animation.

It has been forked from jquery-backstretch, a jQuery plugin which takes care of dynamically-resizing images to fit the browser window.

Demo

There is an example included with this package, or feel free to check out the live demo.

Options

centeredX

The ratio of the width/height of the image doesn’t always jive with the width/height of the window. This parameter controls whether or not we center the image on the X axis to account for the discrepancy. (type=Boolean, default=true)

centeredY

This parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=true)

speed

This is the speed at which the image animation will take, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=1500)

slideshowSpeed

This is the speed before the slideshow will transition between images. (type=Integer, default=3000)

Setup

Include the jQuery library and jquery.fullscreen.slideshow plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullscreen.slideshow.js"></script>

Note: The example above uses the Google hosted version of jQuery; there is also a jQuery source file included with this distribution, if you would like to host it yourself.

<script type="text/javascript">
  $.slideshow(["/path/to/image1.jpg", "/path/to/image2.jpg"]);
</script>

Changelog

Version 1.0

• Fullscreen image slideshow with zoom/slide animation.

Support

Please file a ticket on our Github issues tracker.