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.

 

93 Comments:

  1. If this actually works, I’ll be really excited.
    I got your comment on the jQuery forums… so I’m gonna try it out tomorrow.

    I love cycle. This looks promising.

  2. Thanks for your comment MrSeanG. I’m pretty excited about it too. Seems like a logical move to let Cycle do what it is good at and just take care of the rest. I think it is the smartest solution for fullscreen background slideshows that I have seen.

    So it has been tested in IE7+, Firefox (current), Safari, Chrome and iOS (it looks really good in iOS actually). Please give it a try and let me know if you find any bugs or if you have any suggestions for the final release.

    I appreciate your support on this.

  3. looks cool, have you seen jquery vegas?

  4. Hey dave. I haven’t seen jquery vegas. I’ll have to check that out. Is that what you have been using?

  5. nicely done, and very cool — nice photos too… works great in Google Chrome 16.0.912.21 beta-m Win Vista :)

  6. Nice….i used your last plugin and was having a few problems with the slide show (first image not resizing and a little conflict with fancybox)…however this one is fine…nice to have the numerous transition options…
    Based on your last version, do you think you could state html and css setup (rather than looking at the source…it would make things a little easier :) )
    Ive added it to one of my sites, works in FF, Opera, Chrome and IE9
    Many thanks for your developments!

  7. Hey Barney,

    This is exactly the type of feedback I am looking for. I’m glad 2.0 is working well for you. Let me know if you run into any issues in the future.

    I am currently working on a tutorial that will include the entire setup, including html and css. The nice thing, is 2.0 pretty much works out of the box and allows complete customization. I think I might create a number of demo’s with all of the different transitions and options. For the time being, feel free to check out JSFiddle. It’s a nice way to test the different transitions and navigations.

    http://jsfiddle.net/akv292/sLEyE/3/

    Thanks again.

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

  9. Hello

    Great great script, that was (almost) what I was looking for…
    What if I want randomly video (third party) and image in my slides ?

    thx

  10. Thanks for this plugin. Will you consider to enable multiple instances in one page?

    For example I have a cycle slider with smaller images and maximage background with full image. This kind of setup works good.

    But other implementation – not:

    I have multiple cycle containers in one page with multiple maximage containers which is corresponding to cycle container.

    For the first run – everything works fine. But if I activate twice the same maximage container – it does not work. I’ve traced back to maximage plugin code, where it requires img tags.. it is obvious that after executing for the first time img tags no more. So, ive did restore img tags, but plugin does not work as intended… goes only for 1 slide out of 3 and then stops.

    This is how I restore img tags in maximage container:
    for (var i=0; i < MaxChild.length; i++) {
    var imgUrl = $(MaxChild[i]).css('backgroundImage');
    var pattern = /url\(|\)|"|'/g;
    var imgU = imgUrl.replace(pattern,"");

    $(MaxChild[i]).remove();
    $('#'+mID).append('’);
    };

    Sorry if it sounds to confusing, but it is how it is :)

  11. @Yves & Zy

    Thanks for taking a look and trying out the plugin. I am currently working on not requiring there be images in the slideshows. This will open up versatility and hopefully allow for a larger array of uses.

    @Zy

    Do you have a URL that I could look at your setup? I’d be curious to explore the issues.

  12. You can find it here: http://laforma.dev.tyliai.eu/

    The interesting part is here: http://laforma.dev.tyliai.eu/test-irasas
    On the left side, there is a small thumbnails. Each of them represents unique cycle container. While pressing on it – you activate that particular cycle container.

    while using php I create maximage container + big cycle container + small thumb. Everything should go in sync :) but as I mentioned before, maximage works for the first time only.

  13. As a feature request it might look like this:
    – need a way to control cycle commands inside maximage container (stop, start, destruct) to enable chaining functionality. (probably needs to reconsider how internal structure of maximage wokrs..). This could be useful if I want to stop maximage n.1 and activate maximage n.2 and vice versa.

    – would be nice to have overlay option to apply blur or something else.. like jQuery vegas plugin.

    And maybe it could be written from the other side… as a cycle extension? I think a lot of problems could be solved..

  14. @Zy

    Thank you for your feedback. I address your 2 requests below:

    Issue 1 (Stop, Start, Destruct cycle commands)
    Have you taken a look at the JSFiddle I set up? There is some pause / play functionality going on there that present how you can use cycles direct commands through MaxImage.
    http://jsfiddle.net/akv292/sLEyE/

    Issue 2 (Overlay option)
    Take a look at the demo (http://www.aaronvanderzwan.com/maximage/2.0/). I have a corner gradient png that overlay’s the slideshow to add a dramatic effect to all of my images. Here is a direct link to the image that I am using:
    http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/gradient.png

    I thought about rolling this in to the plugin but I really want to keep MaxImage simple. I want it to only do what it is needed to keep it clean. Since the overlay is possible and quite simple to do with CSS and since it doesn’t require any Javascript I didn’t want to add it to the plugin.

    Please let me know if these do not address your concerns and I will re-address your comments.

  15. I am unable to download the plugin/files.
    The message I get is:

    The plugins site is currently unavailable.

    We’ve been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and we have decided to temporarily shutter the existing site. We will be providing more details on the new plugins site soon, so that plugin authors can hit the ground running with our new submission process.

  16. Hi Tina,

    It looks like the jQuery plugins site (http://plugins.jquery.com/) is currently down (2011-12-07 – 8:30am EST). I have added some links to the files you will need to download in the downloads section of this post.

    Thanks for your interest.

  17. Really nice plugin. Exactly what I was looking for. Even works for SVG images, although if it is possible, some optimisation would be great.

    Also someone mentioned jQuery Vegas in the comments above – this is also a great plugin but because it uses jQuery to bring in each image, it is not good for image SEO.

    P.S Is there any way to make a donation to you for your work?

  18. hi,

    Great script, but need ur help.

    is that anyway i can add hyperlinks on image slider>

  19. Hello! Is there a way to use MaxImage, but to make the images advance on click in stead of using the arrows?

    Thanks!!

  20. Hey guys, here is how to get thumbnails using the pagerAnchorBuilder function found within jQuery Cycle:

    $(‘#example’).maximage({
    cycleOptions: {
    fx: ‘fade’,
    pager: ‘#nav’,
    pagerAnchorBuilder: function(idx, slide) {
    imgsrc = jQuery.Slides[idx].url;
    return ‘<a href=”#” rel=”nofollow”></a>';
    }
    }
    });

    You need to make sure you have an element with an id=”nav” somewhere on the page.

    Cheers

  21. Oops, look like my code got chopped :(

    Please see here: http://pastie.org/3049894

  22. Hi,

    Did anyone tried to implement this in WordPress? In combination with the Slideshow Pro plugin (http://madebyraygun.com)?

    The javascript, css, jquery is all loaded, the image has the right class, but nothinh happens.

    Any idea? Would be great to make this work on WordPress.

    Kind regards,
    J

  23. Thanks for taking the time to create this neat ‘plugin plugin’ :) Problem for me, though, with the demo – when I resize the window, the slideshow adds superfluous whitespace between slides. This is the problem I, too, ran into when trying to make Cycle fullscreen. Have you noticed this? I’ve found this to be the case in both Safari and Chrome unfortunately.

    I’ve found myself attempting to use Flexslider instead, which has been built to be responsive from the outset. It’s still very young though, so lacks the flexibility of Cycle.

  24. Hello and thanks for this very userful plugin.
    But there is a problem for me too: The website content is not scrollable, there is no scrollbar.

    Can you give ma a hint, please.
    Thanks in advance, kind regards

    r.z

  25. I used this for my website and it is absolutely brilliant, thank-you!. Never built a site before in my life and I had to basically figure it all out on my own. It works but is slow. Might be because I missed some code or did something else wrong or possibly my images sizes are quite too big? I am on a crappy free server right now so that could also be the problem for it being slow… but I will be switching it over soon to one with my own IP.

    Anyway, I love my site now. Simple and to the point!

    If you can, let me know if I should adress any issues in my code . It would be suuuper helpful.

    CT

  26. @luke

    Thanks for helping out with posting the code for the cycle plugin anchor builder @ http://pastie.org/3049894. Very helpful.

    If anyone would like to donate, I have added a donate page that just has a simple paypal button… http://blog.aaronvanderzwan.com/donate/. If you have used this plugin and wish to contribute, please donate.

    @all

    jQuery Cycle plugin, though a wonderfully versatile tool, was not originally built for large scale slideshows. That being said, if you are noticing some performance issues on large screens, I have found the fade transition to be the most smooth. I am working on figuring out a way to make everything run even more smooth but that is going to take some work. I have recently updated the plugin to use the code that I originally built for modern browsers which will help with that a little but, but there is still work to be done in this area.

    As for scrollbars… please look at overflow:scroll css styles for your html elements and body elements (depending on browsers).

    Also, MaxImage now lives at Github. I’m still new to GIT, but take a look and fork if you like:
    https://github.com/akv2/MaxImage

  27. Hi! I tried to download the project but the jquery link to plugin not work. There is an other link to download this project?

    Thank you so much in advance!

  28. @sans2012

    I have fixed the link to the plugin. It is now pointing to the github project which is the entire demo. I have also linked to the maximage CSS and JS independently.

  29. Hey thanks for the plugin. Was wandering if there was a way to have additional content (not just an image) inside the slider container. I need content on top of the image or inside “mc-image” div that is generated by the plugin. Help appreciated. Thank you.

  30. hi,
    I’m using version 1.1.8 maxImages, it is possbile to do the resize multiple images?
    insert the sample code:

    $(function(){
    jQuery(‘img.maxAtOrigImageSize’).maxImage({
    horizontalOffset: 599,
    verticalOffset: 119,
    position: ‘relative’,
    verticalAlign:(‘center’|’top’|’bottom’),
    horizontalAlign:(‘center’|’left’|’right’),
    maxAtOrigImageSize: true
    });
    });

    thanks in advance

    Alessandro

  31. Is there a way to stop the slideshow with a click function? With plain cycle plugin this was pretty easy:

    $(‘#slidestopper’).click(function() {
    $(‘#maximage’).cycle(‘pause’);
    });

    How about your plugin?
    btw. thanks for your great work!

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

  33. Cant seem to add captions using the image alt tag…I have a div called #captions. Below is my script obviously without captions – Any help would be brilliant (fantastic plugin by the way).

    $(function(){
    $(‘#maximage’).maximage({
    cycleOptions: {
    fx: ‘scrollVert’,
    isBackground: true,
    speed: 800,
    timeout: 0,
    prev: ‘#arrow_left’,
    next: ‘#arrow_right’,
    },
    onFirstImageLoaded: function(){
    jQuery(‘#cycle-loader’).hide();
    jQuery(‘#maximage’).fadeIn(‘fast’);
    }
    });
    });

  34. Hi, I just posted a message to github but not sure if you are checking it:

    https://github.com/akv2/MaxImage/issues/2

    I am trying to wrap my images in links, but then each link produces its own slide in the cycle?

    Love MaxImage so far, but any help on this matter would be greatly appreciated!

  35. Hi. I’m using this lovely jquery for a wordpress site. I’m just filling each post with images, and calling the_content to get the image inside the slideshow. This works just fine, the only problem is that the images only show when pressing the nav-arrows, there is no image at the start of the slideshow.
    Glad for any help.
    Cheers Carl.

  36. Also, if the image is to small (for my screen less than 1500px, obv. relative to everyone) the image starts to reapeat. Is there a way to avoid this?
    cheers

  37. Hi Carl,

    Your wordpress issue sounds like a wordpress issue, not one with the plugin. Most likely you have to look into how wordpress is echoing your images to the HTML. Make sure it is as would be expected for the jquery cycle plugin.

    For images to not repeat are you sure you are including the CSS? https://github.com/akv2/MaxImage/blob/master/lib/css/jquery.maximage.css

  38. Thanks. I figured it might be WordPress actually. What line in the CSS would be suitable to put the ‘no-repeat’ in?

  39. Hello again, I have encountered a new weird problem:
    The image seems to resize correctly in Chrome, however for some reason this is not the case with firefox.
    First of, the images neither covers when on a large screen, nor do they resize when reducing the browsers window-size. Any idea what the problem is?
    Cheers
    Carl

  40. Thank you for your work!

    Do you know if it’s possible to add a title or a ingress (or both) to each slide? I have used Anythingslider where you can animate other elements after the slideshow background is in position.

    Maybe this can be done with css and other scripts?

    Keep ut the good work!

    Cheers

  41. Hi, i’ve been playing with this plugin for a few days now and love it. Only problem i’ve come across is the slides don’t slide according to the accorded cycle timer. I tried setting up a second cycle timer to link an info Div to each slide but the timing on the maximage goes haywire.

  42. @Popmouth
    @Morten
    @lawrence

    Hey guys, if you could send me a URL or a JSFiddle (http://jsfiddle.net/), I would be happy to take a look and see if there is anything I can help with.

  43. Hi, I gave up on using cycle to create the secondary slideshow, no matter what i tried it just didn’t work. I have slidejs from slidejs.com working pretty well, except pagination, can’t figure out that. The fiddle to it is http://jsfiddle.net/lawrencenull/ppny5/14/ if anyone is interested. http://jsfiddle.net/lawrencenull/ppny5/16/

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

  45. THANK YOU!!! this is exactly what i wanted and though i was going to have to do it the long hard way.

    I clicked donate but it came up with an error.

    I’ve managed to integrate it into wordpress featured image and excerpt so i don’t have to code to update a front page just post.

    Please let me know you’re paypal account

  46. @Fiona

    I’m glad that this worked well for you. I’m pretty excited about it too.

    I’ve updated the URL to paypal, not sure why it broke. Here it is.
    Updated Paypal Link

    Thanks for your support! Cheers!

  47. Found it today, looks promising. Would like to give it some test in a project. Any notes on compatibility?

  48. Hey,

    I’m using it in conjunction with wordpress featured posts. It gets the featured post image and uses that as the image which works fantastically except when i add any additional html within the loop to get the title/excerpt etc it creates a new mc-image class. Here’s the URL. i might get it working http://select-group.ae/wordpress/

    and here’s the html

    ‘the_loop’)); ?>

  49. ps i’m using the one with the html included. think i commented on the wrong post

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.