MaxImage 2.0 – jQuery Cycle plugin as Fullscreen Background Slideshow

July 6th, 2012
|

Introducing the first fullscreen background slideshow plugin that allows you to use jQuery Cycle plugin as a Fullscreen Slideshow.  It supports almost all of jQuery Cycle’s functions, transitions, etc.

Contents

Why Maximage2

Here are the reasons why Maximage2 is the best Fullscreen Background Slideshow plugin:

  • Uses the slideshow power and versatility from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle.
  • Detects browser abilities and uses CSS transitions to animate slides making sure transitions are as smooth as possible on large monitors.
  • Make anything fullscreen: Images, HTML5 videos, Youtube Videos, etc
  • Responsive: Resizes with window
  • Preloads all of your fullscreen background slideshow images so that there is no wait time and things run smoothly.
  • Extremely clean, well commented, DRY, object oriented code built that takes advantage of all possible best practices
  • MaxImage 1.0 made the mistake of assuming too much about your slideshow, making it easier to use out of the box, but more difficult to customize. Maximage lets Cycle handle the slideshow functionality and does everything possible to lets you handle styling.  That is why Maximage comes with a CSS file that you can customize to your liking.
  • MaxImage2 works in all modern browsers and even in IE back to version 7.0.

Demo

Check out a full screen demo.  This demo contains an HTML5 video and a youtube video.

Here are a few JSFiddle’s so that you can see Maximage 2.0 in action.
Basic full screen slideshow with navigation, paging and different transition:
http://jsfiddle.net/akv292/sLEyE/

Maximage 2.0 with the image contained within the window:
http://jsfiddle.net/akv292/erESt/

Maximage 2.0 with a thumbnail pager:
http://jsfiddle.net/akv292/7z32m/

Maximage 2.0 with randomized slides:
http://jsfiddle.net/akv292/Z9q3z/

Installation

Step 1

Download jQuery MaxImage 2.0 CSS, upload it to your server with FTP, and include it in your <head> tag:

<link rel="stylesheet" href="styles/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />

 

Step 2

Link to jQuery Library, download jQuery Cycle Plugin, jQuery Easing plugin (optional – the demo are not using the easing plugin) and MaxImage JS and include them in your <head> tag or right before the </body> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.maximage.min.js" type="text/javascript"></script>

Step 3

Update your HTML to work just as jQuery Cycle plugin would like except that the first image in the slide will be used as it’s background image.  See example below.

<div id="maximage">
	<div class="first-item">
		<img src="lib/images/demo/wall_portrait.jpg" alt="" />
		<img id="gradient" src="lib/images/demo/gradient.png" alt="" />
		<div class="in-slide-content">
			<p>Remember, you are not limited to image elements.  You can display other HTML too.</p>
			<p><a href="http://blog.aaronvanderzwan.com/2011/11/maximage-2-0-beta1-release/" target="_blank" style="font-weight:bold">More info >></a></p>
		</div>
	</div>
	<img src="lib/images/demo/coalesse.jpg" alt="Coalesse" data-href="http://www.google.com/" />
	<img src="lib/images/demo/laughing.jpg" alt="" />
	<div class="video">
		<img src="lib/images/demo/pattern.jpg" alt="" />
		<iframe width="100%" height="100%" src="http://www.youtube.com/embed/KVwSP51KVO8?wmode=opaque" frameborder="0" class="youtube-video" allowfullscreen></iframe>
	</div>
	<img src="lib/images/demo/roof_shooting.jpg" alt="" />
	<img src="lib/images/demo/man.jpg" alt="" />
	<img src="lib/images/demo/coffee_shop.jpg" alt="" />
	<img src="lib/images/demo/gas_station.jpg" alt="" />
</div>

Step 4

Call maximage and pass cycle your options (these are options used for the demo):

<script type="text/javascript" charset="utf-8">
$(function(){
    $('#maximage').maximage({
        cycleOptions: {
            fx:'scrollHorz',
            speed: 800,
            timeout: 8000,
            prev: '#arrow_left',
            next: '#arrow_right'
        },
        onFirstImageLoaded: function(){
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });
});
</script>

Options

  • cycleOptions:Object – These options simply get passed to jQuery cycle to load. View a full list of jQuery Cycle options.
  • verticalCenter:Boolean (true/false) – Used for older browsers that do not support background-position:center center;
  • horizontalCenter:Boolean (true/false) – Used for older browsers that do not support background-position:center center;
  • backgroundSize:String (“cover”/”contain”) – Used for older browsers that do not support background-size:cover/contain;
  • fillElement:String (“window”/CSS Selector of a parent container) – Used to constrain a slideshow to a parent container
  • onFirstImageLoaded:Function – A callback for once the first image has been loaded
  • onImagesLoaded:Function – A callback for when all images have been loaded
  • cssBackgroundSize:Boolean (true/false) – An option that can force the plugin to run without using CSS3’s background-position
  • cssTransitions:Boolean (true/false) – An option that can force the plugin to run without using CSS3 transitions (you will have to remove the transitions from jquery.maximage.css too… around line 33-36)

Donate & Download

If you feel that this plugin has saved you some time or just want to show your appreciation, feel free to throw me a couple of bucks.



You can download Maximage 2.0 (akv2/maximage) from the github. The project is the entire demo site, but if you’d prefer you can download the CSS for Maximage and JS for Maximage independently.

You are going to need to download jQuery Cycle plugin too:
Cycle – http://jquery.malsup.com/cycle/download.html

jQuery Cycle plugin as a Fullscreen Background Slideshow: Feedback

As usual… let me know what you think and if you have any suggestions.  I have setup a forum for all questions and comments @ http://blog.aaronvanderzwan.com/forums/forum/maximage-2-0/
Cheers.

 

93 Comments:

  1. Pingback: MaxImage 2.0-beta2 Release & jsFiddle with it | aaron vanderzwan

  2. Pingback: 20 Background Effects using jQuery with 19 Excellent Examples | RockingCode

  3. Pingback: MaxImage 2.0-Beta3 Released | aaron vanderzwan

Comments have been closed for this post. If you would like to ask a question or need help, please post in the Maximage 2.0 forum.