MaxImage 2.0 – jQuery Cycle plugin as Fullscreen Background Slideshow

maximage2.0
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.

 

92 Comments:

  1. @Fiona

    Did you figure it out? Your site looks good.

  2. Hi,

    Is there a way of choosing which particular div/image I go to?

    So if I have image1, image2, image3 can I click a link to go straight to 3 from 1? I.e slide straight past image2??

    Thanks.

  3. Hello, im using your plugin to make a brand new website, but I have a doubt, I dont know how to set up a specific weight for the images, i want it to cover the all width but I want it to end on a specific weight, for example like this website: http://www.p2media.de/

  4. @All

    Remember that MaxImage2 uses almost all of the jQuery Cycle plugin’s functions. So if jQuery Cycle can do it, chances are, Maximage can too.

    Please review the jQuery Cycle documentation for what Cycle is capable of (it’s can do a lot):
    http://jquery.malsup.com/cycle/

    Please see the following for examples of how maximage can interact with jQuery cycle plugin. I’ve included different transitions, dynamic pager, next / previous, play / pause, etc.
    http://jsfiddle.net/akv292/sLEyE/

    If you are trying to do something that Cycle does and are unable to do it with Maximage, please let me know about it.

  5. Nifty plugin, Aaron. Thanks! Any suggestions on how to make low resolution slides simply center vertically and horizontally rather than resize to fit the whole frame? This, or some sort of aspect ratio chooser would be terrific so images that need to be shown in their entirety (without sides getting ‘chopped’) still can be. Thanks again.

  6. Oops! I forgot the image size was controlled by the CSS, not the JS. If anyone else has my question, the solution is simple. In the div.mc-image element, simply replace

    background-size: cover;

    WITH

    background-size: contain;

    Best,
    ~Jared

  7. @Jared & all

    You are mostly correct in saying that you can change the CSS for background-size to get the image to be contained within the window (and not cover it). Unfortunately, IE8 and IE7 do not support the “background-size” CSS3 style.

    One of the great things about Maximage is that it checks to see if your browser supports background-size… if it does, it uses it (so the JS process is far less intense). If the browser does not support background-size, Maximage steps up and takes care of that functionality. But this means that in order to change the functionality from background-size:cover to background-size:contain we have to let the plugin know we are doing so.

    I just updated the plugin to 2.0.1. In this release I have added an option “backgroundSize” that accepts “cover” by default, but will also accept “contain”. This way, the plugin will know that for older browsers the image has to be contained within the window and not cover it.

    Update to 2.0.1 and let me know if you run into any other issues. I have setup a JSFiddle with this functionality so that you can demo it @ http://jsfiddle.net/erESt/.

  8. Hi Aaron,

    First I want to let you know that Maximage is really a great piece of work. It is very useful and helpful in creating a good full screen background website.

    At the moment I’m designing a full screen background page with Maximage. I’m trying to understand if the functionality that I’m trying to use is implemented in Maximage.

    I have created an navigation with cycle-nav. As you know this creates the squares you can click on to go to a new image. What I’m trying to do is create a Navigation bar with for example: Home New Contact Link. When you click on one of the navigation item it needs to go to the image associated with that navigation item. Is it possible to do that?

    Hope to hear from you soon.

    Kind regards,
    Raoul Dundas

  9. Hi Raoul,

    Thanks for trying out Maximage. I am very interested in your experience of working with it.

    When you work with Maximage remember that you can pass any of jQuery Cycle plugin’s options into the plugin with the “cycleOptions” option. Unfortunately it looks like JSFiddle is down for maintenance right now, but when it comes back up, the example that I setup there uses Cycle’s paging and you can definitely jump to a specific “slide” by using the nav.

    See paging and other navs setup with Cycle through Maximage (when it comes back from maintenance):
    http://jsfiddle.net/erESt/

    Also, I recently updated the demo to allow for the ability to pass in a slide id and it will automatically jump to that slide once the first image is loaded. Check it out:
    http://www.aaronvanderzwan.com/maximage/2.0/?slide=5

  10. Hi Aaron,

    Thank you for your response it means a lot to me. I will let you know how it went for me with Maximage. It’s a really cool plugin.

    Up till now I can’t find out how its going to work for me with Cycle. There is a feature I found within the Cycle website that I really like to implement with Maximage:
    http://jquery.malsup.com/cycle/pager6.html

    Can you help me on my way please?

    Kind regards,
    Raoul

  11. Hello Raoul,

    I too am trying to implement the thumbnail pager with Maximage. Have you had any luck? I have not after working on it for a few days.

    Regards,
    Ahmed

  12. Downloaded the version of your plugin at github unfortunately the sample is not displaying the images. The preloader was just spinning all day. Please what could be wrong. I have not even touched your code.

  13. @Ahmed: I wasn’t able to get the thumbnails active yet. I’m still working on it. Will let you know when I found the solution>

    @Bosun: Download jQuery and implement it into your script instead of this line.:

  14. I’m getting closer. I managed to get one image to show up in IE. The first in the list (http://tooots.obmon.com), but nothing in any other browser. I just don’t understand. It seems to be having a serious issue identifying the image used in the background.

    I have tried the following with no luck:

    $(function(){
    $(‘#maximage’).maximage({
    cycleOptions: {
    fx: ‘scrollHorz’,
    speed: 800,
    timeout: 8000,
    pager: ‘#nav’,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    var img = jQuery(slide).find(‘img’).attr(‘src’);
    return ‘‘;
    }
    },
    onFirstImageLoaded: function(){
    jQuery(‘#cycle-loader’).hide();
    jQuery(‘#maximage’).fadeIn(‘fast’);
    }
    });
    });

    and

    $(function(){
    $(‘#maximage’).maximage({
    cycleOptions: {
    fx: ‘scrollHorz’,
    speed: 800,
    timeout: 8000,
    pager: ‘#nav’,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    return ‘#nav li:eq(‘ + idx + ‘) a’;
    }
    },
    onFirstImageLoaded: function(){
    jQuery(‘#cycle-loader’).hide();
    jQuery(‘#maximage’).fadeIn(‘fast’);
    }
    });
    });

    It might have something to do with this line:
    $(‘#slideshow’).before(”).cycle({

    as seen on http://jquery.malsup.com/cycle/pager2.html

  15. Where is the author of this script. such a wonderful script.. but the author disappeared.

  16. GOT IT!!!

    @Raoul
    Just target the dom directly. The following code works beautifullly:

    $(function(){
    $(‘#maximage’).maximage({
    cycleOptions: {
    fx: ‘scrollHorz’,
    speed: 800,
    timeout: 8000,
    pager: ‘#nav ul’,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    var imgsrc = jQuery.Slides[idx].url;
    return ‘‘;
    }
    },
    onFirstImageLoaded: function(){
    jQuery(‘#cycle-loader’).hide();
    jQuery(‘#maximage’).fadeIn(‘fast’);
    }
    });
    });

  17. @Raoul

    The return line is taken out by the comment app. But you get the idea.

  18. Hey Guys… thanks for using Maximage 2.0.

    So Ahmed… how you got the image url was perfect. jQuery.Slides (or $.Slides set on line 466) is an array I created with Maximage 2.0 to help organize the plugin… (run the image preloader, setup the slides, etc) and it is accessible in cycleOptions callbacks. It is constructed around line 418 in Utils.construct_slide_object() and consists of all of the data in the slide.

    @Raoul or @Ahmed
    Do you guys have any more questions?

    I have created a JSFiddle as a guide for anyone who wants to accomplish this:
    http://jsfiddle.net/TamPg/

  19. Hi there, great plugin! Love it!

    One question: I’d love my slider to have a height of 100% and a set width of 300px. Is it possible to do this? If yes, how?

    Thank you very much, keep up the good work!

  20. @Jeroen

    Thanks for trying out Maximage 2.0. You could try using width:300px !important CSS on the container and on the slides to try to overwrite the maximage dynamic full widths, but I would test that in IE too, as IE might not center the image as expected. If this seems to be a common use case I will try to work the ability to have max heights and max widths into the plugin.

  21. Thanks for your quick reply, Aaron!

    I found out that that works, but it aligns the maximage div to the left. I’d love it to be part of a 960px wide container div that’s horizontally centered on the page. You think that’s possible?

    Thanks a lot.

  22. @Jeroen

    I have just updated the plugin and added a “fillElement” option. This can receive either a string “window” (default) or a CSS selector for the parent element that you would like to fill. I have setup an example at http://jsfiddle.net/akv292/Jnvy2/ that shows how this can be accomplished. Basically, the containing element will be centered and maximage will fill it.

    Please update to Maximage 2.0.2 and give it a whirl. Let me know if you have any questions. Also, it worked in my tests back to IE7.

  23. Seems to work, Aaron! Thank you very much, I really appreciate it!

  24. Hi Aaron,

    Your solution is working great! It really helped me a lot. Thank you for your support. You are doing a great job.

    Kind regards,
    Raoul

  25. @Raoul and @Jeroen
    I’m so glad to hear it is working out for you. Please let me know if you come across anything else you think I may need to address.

    @Everyone
    I appreciate your patiences as I have been getting everything setup to help support Maximage 2.0 questions. This post as gotten the job done, but with over 70 comments, it has grown a little unwieldy and is fairly impossible to use as a resource. For that reason I’ve setup a little forum that will serve as a better tool to share and ask questions.

    Please feel free to leave a note here if you have a comment that relates to the post. However, if you have a question that you think others could learn from too, please post at:
    http://blog.aaronvanderzwan.com/forums/

  26. Hey Aaron, thanks for such a great plugin. I am implementing thumbnails, but am unable to resize them — I need them to be 100 x 100. I have followed the jsfiddle.net example, but when I attempt to resize them the images do not fill their containers. Any ideas?

  27. @Aaron
    No more questions from me for the time being. Thanks again for your great script.

  28. @JJ

    Please post your issue at the Maximage 2.0 forum (http://blog.aaronvanderzwan.com/forums/forum/maximage-2-0/)… and if you could put a JSFiddle together replicating the issue you are experiencing that would help out a lot.

    @Ahmed
    Great!

  29. Hi Aaron, thanks for this great code. Was almost exactly what I was looking for.
    I have one issue, I hope you can help me out.

    I use the gallery as a fullscreen header (you van scroll down to content).
    Check: http://heymansmulders.nl/slider/

    - problem: horizontal scrollbar after resizing window.
    - my solution: put a wrapper around the gallery and give this the browser width and height with JQuery and ‘overflow:hidden;’
    This removes the horizontal scrollbar but now I have another problem.
    - next problem: now when resizing, sometimes the the height of the gallery is wrong and you will see the grey content area at the bottom of the screen.

    Don’t mind the pager (bottom screen(get the right width only ‘onResize’)), I still have to fix that. I don’t think it has anything to do with it.

    Would be great if you can take a look!
    Cheers Heyman

  30. @Heyman
    It looks like your issue might be coming from the nav element (div id=”nav”). For me, when I remove that, the grey at the bottom is not a problem.

    Also, please post in the Maximage forum if there is anything else: (http://blog.aaronvanderzwan.com/forums/forum/maximage-2-0/)

  31. What font do you use for your logo?

  32. hey!
    your plugin is GREAT
    and it looks beautiful… is it able to hold html5 tags like video?

  33. Aaron,

    Sorry for wasting your time. You’re totally right.
    Thanks for looking at it, I thought it was a fullscreen issue.

    Anyway thanks a lot! I’ll let you know when my website is ready.

    Cheers Heyman

  34. @frankg
    Which Logo? The Maximage2 logo on the Demo page? I think it was Helvetica.

    @sarahdee
    It is able to use HTML5. I have posted more at the forum (http://blog.aaronvanderzwan.com/forums/topic/html5-video/). Thanks.

  35. Hey Aaron- thanks for responding. I fiddled around with jsfiddle.net all day yesterday to no avail- never used that site before. But I did manage to resize the thumbnails on my work in progress:

    http://www.berrieswebdesign.com/artistic.html

    But as you can see, I still cannot get them to fill their containers completely…there is always a margin at the bottom of the photo and I have tried and tried, but I will keep trying.

  36. @JJ
    Hey man. Looks like your images are 88px wide and your li that contains the image is 90px wide. That will account for the space to the right of the image.

    If you add “display:block;” to your image, you will loose the 3px below. The space has to do with the element being inline.

    Hopefully that helps.

  37. Fixed it…thank you:)

  38. Thanks for this plugin, Aaron, just what I was looking for! A quick note: background-size: cover seems to be implemented poorly in my browser (Chrome 20.0) and is extremely choppy and slow. I would suggest allowing a parameter to force your plugin to use “Old” mode.

    I simply surgically removed Modern from your plugin. I went a step further and did a little hack to allow css transitions instead of jQuery animation for that extra speed boost. On my site, with gigantic (retina-ready) full screen backgrounds transitioning, it runs buttery smooth at 60hz with CSS! My approach is something like this: http://jsfiddle.net/UqxQk/8/

  39. @Roger

    Thank you so much for your input. I have updated the plugin (to 2.0.4). In the update you will see that I default to your CSS transitions suggestion. That is going to be the best way to get smooth transitions with these large images. You can overwrite it with your own ‘easing’ option (within cycleOptions).

    I have also added a couple of options to allow you to manually force the plugin to not use background-size: cover and the css transitions. The options are listed in the options section, but are “cssBackgroundSize:Boolean” and “cssTransitions:Boolean”.

    Thanks again for your input it has been tremendously useful. If you don’t mind, I have credited you with the update and linked to your website. Please let me know if you would like me to change anything with that.

  40. Fantastic, I’m upgrading now. Thanks for the shout-out! ◐◡◐

  41. Hi Aaron,
    first of all – GREAT WORK! It is nice and very simple to use. But i need a little modification.
    I have a background with 4 images and i want to randomize these 4 images.
    If i go on my website the first image is shown and i want that on every refresh another image ist shown.
    Can you help me?

  42. @Sascha

    The best way to randomize images would be to do so server side (PHP, .NET, etc). If you don’t have the ability to do that, it is possible with jQuery.

    The easiest way is to rearrange the elements before you call maximage or cycle. See the example of a random sort of the image elements here:
    http://jsfiddle.net/akv292/Z9q3z/

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.