Maximage2

Don't reinvent the wheel.

Maximage2 is a fullscreen background slideshow plugin that uses jQuery Cycle plugin for it's slideshow functionality.

This example shows what happens if you call Maximage2 without any custom options. It is the simplest way to use Maximage and rely's on both Maximage's option defaults and jQuery Cycle Plugin's default options.

View Example

Basic Example Screenshot

This demo explains how easy it is to use jQuery Cycle options as well as some of the best of Maximage 2.0. You can see how callback functions are used as well as speed, fx, timeout, paging and really any other jQuery Cycle option.

This demo also uses Maximage 2.0's custom helper function that allows for any element in the slideshow to be maximized like the background images in the slides. In this case we maximize an HTML5 video in our slideshow as well as a Youtube Video.

View Example

Customized Example Screenshot

I wanted a way to show off how Maximage2 allows you to maximize images within containing elements too, not just the browser window. You just pass a selector to the Maximage2's "fillElement" option and you are good to go.

It also uses a different fx from jQuery Cycle to show how easy that is.

View Example

FillElement Example Screenshot

The "backgroundSize" Maximage2 can either be a string ('cover' or 'contain') to determine how the image fills the container. Cover fills every available space with the image while contain maximizes the image within the space but does not exceed the space.

These are going to be the two most common scenario, but it is very possible that someone may need some different functionality. Well Maximage2 allows you to write your own function here and this is an example of how that is done.

View Example

Custom Backgroundsize Example Screenshot

Caution: This example is meant for expert users. Remember, with FillElement you can often accomplish an offset scheme very easily... just set your containing element where you want the images to be displayed.

Because the first rule of Maximage 2.0 is to try to remain hands off and out of your way, the built in support for offsets have been dropped with version 2.0. This doesn't mean they aren't possible. With a little elbow grease they can still be accomplished (and are better).

What I am doing with the below code is creating curtains / offsets that live in front of the slideshow. I call these curtains. I have done this with the HTML and CSS below for 100px offsets on the top, right, bottom and left edges of the screen.

Once we have our curtains up, the slideshow is still resizing to the full window and we want to have it maximize within the viewable area... our window size minus our offsets. For this reason you have to customize the function that resizes the window. We can do that with the backgroundSize option that gets passed to Maximage. Just set your verticalOffset and horizontalOffset in backgroundSize (JS example below) to size your slideshow images within the viewable area.

View Example

Offset Example Screenshot

To have images contained within the offsets just swap the "based on height", "based on width" rules in the backgroundSize function like this:

View Example

Maximage2 can be used as a tool to make almost anything a fullscreen background element very easily. This example shows how it can be used to create a background HTML5 video.

NOTE: HTML5 video fallbacks for IE7 & IE8 currently do not fill the screen within a slideshow. I am working on this currently, but if this is important to you, please use another slideshow for the time being and check back for updates as this has proven more complex than was expected.

View Example

HTML5 Video Background Screenshot