Supersized – Full Screen Background/Slideshow jQuery Plugin

Supersized – Full Screen Background/Slideshow jQuery Plugin



This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features!

If you are interested in this specific legacy version, you can download it here for now.

Features

  • Resizes images to fill browser while maintaining image dimension ratio
  • No extra whitespace, no scrollbars – the entire browser window is always filled
  • Compatible in Firefox, Safari, Opera, IE7, and IE6
  • Ability to cycle through images/backgrounds via slideshow

Getting Started

The first thing we are going to want to do is set up the initial CSS/HTML, then get the jQuery in place.

The CSS -

A couple of key points from above -

  1. In order to prevent scrollbars from appearing when the image stretches past the edges of the browser, be sure to include body{overflow:hidden}.
  2. The plugin uses the id #supersize to identify what image(s)/elements need to be run. It is the umbrella class for all other elements of the plugin.
  3. The .activeslide class tells the plugin which img/div/a is active and therefore needs to be displayed. By default the contents of #supersize should hidden, which means you will need to specify in this section any additional elements you wish to hide/show with each slide (ie Links, Div, Img).

The HTML -

Worth noting – As you might have seen from the CSS, the .activeslide class makes whatever element it is attached to visible. For the cases when you wish to make an image a link as well, it will need the above #supersize .activeslide img to make sure the link and the image both appear. If you don’t want to use the slideshow feature you only have to include one image with the .activeclass here. You also will want to shut slideshow off in the options, more on that below.

The jQuery -

First we’ll want to include links to both jQuery and Supersized in the header.

Below, plug this piece in, it is the jQuery that defines any user options you may want to change and then actually calls the plugin to action.

Options

Now for all of those Nancy Drew super sleuths out there, you might have already noticed that you have options to play around with. For the rest of you, it’s okay, below outlines them in more detail.

startwidth & startheight - It is important that you specify the image size(s) in this area. These used to develop a ratio and minimum size. If you are planning on using the slideshow and images of various sizes, it will still work as long as they have the same ratios (ie 4:3 / 16:9). For these cases I would suggest using the dimensions of one of the smaller ones in the batch, as it won’t mess up minimum sizes on smaller images. For now all images must be the same ratio to display them in the proportions they were intended to be, although in a future release I will look to add auto-detection. The default dimensions are 1024 x 768.

minsize - This is the decimal form of the minimum percent for the starting width / height that you want the image to be. The default is 50% of the starting size of the image.

slideshow - This turns the slideshow feature on and off. If it is 1 then it is on, anything else… it’s not.

slideinterval - This is the amount of time spent on each image in the slideshow in milliseconds. Play with it accordingly.


Inspiration

This is my first jQuery plugin, I was inspired by the apparent lack of jQuery support for a feature that Flash can do so nicely. In my hunt for an existing plugin I came across two helpful/interesting discussions on the topic.

Chris Coyier explored this problem over at his site, coming up with a preliminary jQuery fix but ultimately landing on a rather efficient/close method in CSS.

Over at Sitepoint forums a similiar thread came up, providing a neat mooTools example and alternate CSS fix, however both faced issues with browser compatibility.

The trend seemed to be that one could either fill the browser and disregard the image ratio or keep the ratio but be faced with white space upon resizing. The only working instance I found was over at Adult Swim, which accomplished a autosizing slideshow, but does so without jQuery.

Future Plans

The clear next step is to add effects to the slide transitions, as well as forward/back buttons to control the slides.

I am a fan of Adult Swim’s example, which will be a source of inspiration for the next round.

I also hope to add auto detection of image sizes, which would allow for images of all shapes and sizes to play nice together.

While body{overflow:hidden} means that content would get cut off in a full blown website, I am interested in working out a fix other than a fluid layout/allowing for scroll bars.

If you use Supersized in one of your projects, please let me know, I’d love to see what you’ve done and include you as an example.
I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.

Posted Wednesday, February 4th, 2009 · Back to Top

SPONSOR

Add Comment

177 Comments 147 Mentions

  1. Chris Coyier Author Editor

    Pretty sweet Sam! I could see each slide having a small text overlay from the images title attribute being a cool feature in the future.

    ·

  2. Alen Grakalic Author Editor

    Nice! Could you add some smooth fade-in transitions while you’re at it? :)

    ·

  3. andy matthews Author Editor

    Any reason why you didn’t just use the Cycle plugin to accomplish the same result? Not dissing your work because it’s nice, but there’s already a kicking “slideshow” plugin that does everything this one does (except for the overlay).

    ·

  4. Ben Byrne Author Editor

    This is great! I second the request for transitions, esp. fading.

    ·

  5. Designer Author Editor

    wow, beautiful

    thanks

    ·

  6. Sam Dunn Author Editor

    @andy matthews
    I did play around with the Cycle plugin a little bit, it uses visible:hidden instead of display:none to cycle images, which would mean that anytime the window is resized when working with my plugin, it is affecting even the hidden images, which caused some severe slowdown. Ideally Cycles will be integrated, I’m not looking to reinvent the wheel, just make sure we don’t have any knicks in it. Expect an effects update in the near future

    ·

  7. Rahul Author Editor

    This looks really awesome. I look into it and just amazing stuff mate.

    ·

  8. joyoge designers’ bookmark Author Editor

    nice plugin thank you for share..

    ·

  9. Rob Author Editor

    Nice work. Ive been looking for something like this for a few weeks now.
    Is there anyway to attach id=”supersize” to the tag? I see that the images must be written on the page – wrapped in a div.

    With a smooth jquery fadein this would be great.

    Rob

    ·

  10. Sam Dunn Author Editor

    @Rob
    If you don’t want to use the slideshow feature you can attach #supersize directly the image of your choice. I am also currently working on the transitions as it seems to be a popular request.

    ·

  11. Rob Author Editor

    Hi Sam,

    I forgot to write the word “BODY” tag :) I mean can you have it work on the body tag. For example I have a site with many unique body id’s, each with its own BG image. Id like to use your script on the homepage . So currently the BG images are specified in the CSS file, not written on the page. Is this possible?

    Yeah, a nice fade in transitions would be perfect!

    Thanks

    Rob

    ·

  12. R Roberts Author Editor

    Can the images be shown in a random order? Would be neat if possible

    Thanks for the excellent script.

    ·

  13. Jake Ashcraft Author Editor

    I wired up the plugin to my flickr feed and when it encounters a portrait image, the photo distorts as it stretches it to the sides. Other than that, seems pretty good.

    ·

  14. social networking web designer Author Editor

    very, very cool. i wonder if this is more seo optimized than doing this same web design effect in FLASH?

    Sandy

    ·

  15. mike Author Editor

    bookmarked. love it… will def use this one once it has a fading transition built into it =)

    ·

  16. Sam Dunn Author Editor

    @social networking web designer
    Given that flash is still in the process of being search engine “readable” by Google, I would say that this is your best bet. You can use title tags for each image, Although I really wouldn’t be that concerned as this plugin really isn’t going to affect much about SEO. Remember valuable content is the #1 thing you can do for SEO!

    ·

  17. Jens Mikkelsen Author Editor

    I could be nice if it had a smooth fade effect instead of the hard image transistion. But really nice work!

    ·

  18. Leon Poole Author Editor

    Nice! But I have to agree if a smooth transition effect was added then it would be perfect. :)

    ·

  19. DemersDesigns Author Editor

    Sam,
    Really nice work! I am going to work with this a little and try and make it a powerpoint replacement for a presentation LCD screen in the lobby of a non-profit I do work for. Will be much faster and more customizable. Thanks for sharing.

    ·

  20. Blake Author Editor

    Very Nice and easy to customize. To perfect it could I suggest navigation like at ringvemedia? Pager and/or overlay would be great.
    http://ringvemedia.com/beijing-photos

    Transitions a distant second.

    Thanks!

    ·

  21. Ajans Author Editor

    Thanks you too much, it is working all platform and browsers.

    ·

  22. urban_skinny Author Editor

    This plugin is perfect for what I’m doing right now…. except, that I have to put theimages in the html, and then they all have to load.
    Is it possible to add extra images to the slideshow through ajax orsomething, so that I could have hundreds of imagfes (if the user stayed on the site, without having to waste soo much bandwidth loading them all at the begining?!
    I think that would be a cool function!

    ·

  23. caio Author Editor

    Simple Thank you.

    http://www.caioferreira.com

    ·

  24. Arturo Author Editor

    hi
    this plug-in is really helpful, I’m waiting for effects…

    one thing I found it could be a problem is that you can’t have any other div elements not being positioned ‘absolute’ in order to the plug-in to work properly.
    I used a 100% width and height absolute element as a container to solve this…

    hope I’m not doing anything wrong

    cheers
    thanks a lot

    ·

  25. Darryl Snow Author Editor

    Thanks, it works lovelily. While you’re working away on these much sought-after transition effects, I’ve used a quick and dirty method to transition between images… although it does mean fading out to the background image before fading into the next image. It suits my needs and might sate some of the hungry users?

    at the top, where the slidshow is called, also call the ‘setupslides’ function:

    if (options.slideshow == 1){
    setupslides();
    setInterval(“theslideshow()”, options.slideinterval);
    }

    that function goes something like this:

    function setupslides() {

    var currentslide = $(‘#supersize .activeslide’);
    if ( currentslide.length == 0 ) currentslide = $(‘#supersize :last’);

    while(currentslide.next().length != 0) {
    currentslide = currentslide.next();
    currentslide.css({opacity: ’0′});
    }

    }

    then in the slideshow function, just add some tweening:

    function theslideshow() {

    var currentslide = $(‘#supersize .activeslide’);

    if ( currentslide.length == 0 ) currentslide = $(‘#supersize :last’);

    var nextslide = currentslide.next().length ? currentslide.next() : $(‘#supersize :first’);

    currentslide.animate({opacity: ’0′}, 2000, function() {
    nextslide.addClass(‘activeslide’);
    currentslide.removeClass(‘activeslide’);
    nextslide.animate({opacity: ’1′}, 500);
    });

    }

    (change the arbitrary duration values to suit your needs)

    ·

  26. Volkan Author Editor

    Hi,

    is it possible to get scrollbars like in the mootools example: http://ringvemedia.com/introduction
    I tried to put some more content in the “contentframe – div” with firebug but it seems like the overflow:hidden of the body element is hidding it.

    regards Volkan

    ·

  27. Sam Dunn Author Editor

    @Volkan
    I dabbled with that a little bit and from what I found, iFrames could technically get the job done with scrolling. If anyone else has thoughts on this, I would love to hear them.

    @caio
    Nice site

    @Everyone
    I’m still updating this project, I haven’t neglected effects, don’t you worry

    ·

  28. Steve Yakoban Author Editor

    Great work Sam. One question that may be counterintuitive to the whole idea: can long content be placed over the background image in any fashion or must it stay within the confines of the image dimensions?

    ·

  29. Sam Dunn Author Editor

    @Steve
    The browser width defines what content is shown because the overflow is hidden. Basically the best way to display long content would be putting it in a smaller iFrame so that the user could scroll. That has been the best I’ve been able to come up with so far, I hope it helps.

    ·

  30. Hubbs Author Editor

    This is exactly what I was looking for!

    ·

  31. Joel Author Editor

    What terms/licence is this being distributed under?

    ·

  32. Sam Dunn Author Editor

    @Joel
    I’m all for people taking this and expanding on it, if you do so I’d be interested in seeing what you’ve added. Feel free to drop my name accordingly or whatever else moves you. I would ask if you are sharing this plugin without any alterations, please link directly to this article. Hope that makes things clear for you.

    ·

  33. booyah Author Editor

    Does anyone have any comments on what Arturo said?

    “one thing I found it could be a problem is that you can’t have any other div elements not being positioned ‘absolute’ in order to the plug-in to work properly.
    I used a 100% width and height absolute element as a container to solve this…”

    So is it cool to have everything positioned absolute? or is there a workaround? Thanks!

    ·

  34. wuss Author Editor

    nice work! a transition like this would be nice too: http://group94.com/#/website/work/portfolios/

    ·

  35. Bobby D. Author Editor

    Sam, great work! I’d love to use this on the next iteration of my portfolio. Question is: has anyone managed to make this work as a controlled slideshow? That is, with next and previous buttons? If you have, or know how to, I’d be forever in your debt! Hit me up at [email protected].

    ·

  36. assi_k Author Editor

    Hi, as mentioned earlier the job can be done using for instance the cycle plugin with navigation. Just change in the CSS img sizes and slide container to 100% height and width. and the navigation on top (abslotue positioned with a z-index). The only problem is that the pictures will be fitted to the screen proportions which causes deformation. Otherwise it works fine (firefox and IE 7) . All possible jQuery cycle options can be used without problems (vert. scrolling, fading etc. Cheers

    ·

  37. Hombre Author Editor

    Working with Doctype…. I tried to put
    body {
    overflow:hidden;
    }
    Good work… Would be nice with fading images… I try to add some stuff in it if you like

    ·

  38. CB Author Editor

    Fantastic, just what I was looking for. Thanks so much!

    ·

  39. Aen Tan Author Editor

    I can’t wait for the effects. I built similar sites with Flash in the past—http://hazethefilm.com, and I really like this because it’s HTML rather than Flash.

    When will be see an update? I’ll donate to make it faster!

    ·

  40. Sam Dunn Author Editor

    @Aen Tan

    I dig the enthusiasm, insider information right now, you ready? A Supersized update is first on my list after updating our parent One Mighty Roar Site this next week. Aka soon!

    ·

  41. Aen Tan Author Editor

    Hi Sam,

    For the fun of it I modified your plugin to add fading and vertical centering. Have a look!
    http://aenui.com/supersized/

    I’ll probably use this for one of my projects until you release something more complete.

    ·

  42. Oskar Rough Author Editor

    Hey Sam,

    This plugin works really great, no problems setting it up. Looking forward to your update!

    However, would it in any way be possible to make the background “fixed”? Anything to avoid using iframes really. Or is it really the only way with pages with longer content than the viewport?

    Kind regards

    ·

  43. Sam Dunn Author Editor

    @Oskar Rough
    Off the cuff, it really is the only way that I’ve come up with, if we didnt use overflow:hidden, scroll bars would show up for the parts of the image that overflowed. I’m still pondering it though, hopefully I get struck with genius.

    ·

  44. mtness Author Editor

    Hi there,
    thanx for the beautiful script!

    ther is a double closing script tag in your example files…
    Kind regards,

    mtness

    ·

  45. DamBuster Author Editor

    This is wonderful, thank you for posting this code. How can we make the slideshow loop in an never ending loop? and is it possible, when showcasing more than 10 images, to not pre-cache – to display them on-demand much like the slideshowpro flash plug-in does (see slideshowpro.net)? whatever, this is a terrific aid. Looking forward to enjoying the future of versions of this code…

    ·

  46. TilarX Author Editor

    I was wondering if there is a way so that when you page down. It does not go to the bottom of the image. But rather bottom of the page. It seems like it should work because Body Overflow is set to hidden. But it doesn’t.

    ·

  47. DamBuster Author Editor

    A response – of any kind – to my questions would be helpful!

    ·

  48. Totoro Author Editor

    Hi, i noticed that on safari (on mac) the slideshow freez after the second picture, everyone else have the same problem?

    That would be great if the pictures load one after another, instead of all at the beginning. Because, when you load the slideshow, you see the first picture,(all others pictures are loading too) and then a black screen and after that you go back to the first picture and the slide start.
    Is it possible to avoid that ?

    Thanks!

    ·

  49. Sam Dunn Author Editor

    @DamBuster
    I have not yet worked in a pre-caching method or really explored that at all, it is something I will consider in future versions. The slideshow continues indefinitely already, which means it is already a never ending loop, thanks for the compliments.

    @Totoro
    I have tested it in Safari and have not been able to duplicate the problem. I have tried to keep the image sizes relatively small in order to compensate for the fact that they all load at once. Have you altered the code at all, because I have never had that happen?

    ·

  50. lucas ober Author Editor

    I have used your plugin on this website
    http://www.lcgsa.com.ar
    cheers
    let me know when you add the fadein effect
    lucas

    ·

  51. PhilTheForce Author Editor

    This plugin is awesome, just a shame internet explorer is pants!! I tried supersized for a site i’m working on and it works beautifully in safari, firefox, opera etc. but when i test it in ie (6 & 7) the images seem to pixelate somewhat (not loads but enough for my client to notice the difference from the earlier flash version). Its particularly noticeable on straight lines or text within the image. Is this something anyone else has noticed?

    ·

  52. Chuck Author Editor

    This is a great start. Very cool idea. We’ve worked on some fullscreen image viewers, but they’ve always been in Flash. This is great. Here are my suggestions:

    - Need some smooth transitions (I prefer a simple fade in/out). I know this has been mentioned in almost every post, so I am just reiterating.

    - Need some way of loading the images. With large, beautiful images, they load choppy, from the top down, of course. It’d be a lot smoother if you did a nice loading image until it was ready to fade in. You should load the other images in the background after the first one loads, if possible.

    - We need controls. Next, previous, stop/play would suffice. The user should have some control.

    - The slideshow should be able to be set to repeat in the options.

    Overall, this is a great idea and version 1 is a good start. If you can expand on it a bit, I think you’d have a real winner here!

    ·

  53. Sean69 Author Editor

    @PhilTheForce

    yes… what I have noticed in ie 6&7 is:
    - the image does not scale with the browser window, but distorts and stretches the images itself.
    Sorry – no issues with the images pixelating

    also that:

    trying to use the latest jquery, 1.3.2 the same thing happens in FF & safari, the image is stretched rather than scaled properly.

    ·

  54. Sam Dunn Author Editor

    @Chuck
    You have literally outlined what the next version will contain. I’m impressed, you nailed it.

    @Sean69
    I’m looking into that issue with 1.3.2, hopefully will have it ironed out in the next update. It’s coming I promise.

    ·

  55. ritchie Author Editor

    do the images load in a linear fashion?

    or is there some way to have them load randomly so if the script is used across multiple pages, they won’t repeat in the same order? thx.

    ·

  56. Marc-Andre Menard Author Editor

    WOW, Sam Dunn, you have done some super simple slideshow that have “that punch”. Let me add some idea for futur version

    1- a little place where you know image 1/20
    2- a way to get to the next and back (arrows)
    3- fade (as ask by everybody)
    4-a preload (to get the fade smoooooth)
    5-a way to slideshow from array (json)

    And at last, what is the expected date of the v2 release of the enhanced plugin, any time frame ?

    ·

  57. Gavin Will Author Editor

    I really like this and use it a bit however today I came across a problem when using portrait photos and even speccing the min size and the ratio it would not show it correctly because the display is 99% horizontal so it filled the screen up but cut off the bottom of the image. The only way I could get around this is to paste the portrait photo onto a landscape background in photoshop and effectivly save it as a landscape photo. Anyone else experience issues with portrait photos?

    ·

  58. Sam Dunn Author Editor

    @Marc-Andre Menard
    Solid bunch of suggestions, thank you.
    I’m working on v2 when free time permits, so I won’t toss out a time frame for the sake of it, but i am shooting for the near future.

    @Gavin Will
    Thanks for pointing that out, I’ll look into it

    ·

  59. David McGowan Author Editor

    Great work Sam.

    I’ll be using this for my homepage when I redesign my site. I’d love to be able to set the image to change only on browser refresh, or perhaps to just change daily. That’s different than most request, but as a photographer I’ll already have a bunch of slideshows on my site.

    Best of luck,
    David

    ·

  60. Jason Author Editor

    Sam – GREAT WORK MAN!!!!

    How about a variable for transition types ? (i.e. disolve, wipe, etc.)?

    ·

  61. sam @ majic Author Editor

    Great stuff – have only had the time to glance at this article but saw the demo and had immediate plans and ideas – which flowed almost right away
    preloading of images using filament group (also going to be using testuser script to test for feautres of browsers)
    http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v2.js

    cross fade thanks to Daniel Snows comment – but crossfading into each other.

    removed the the ties to #supersized
    next I am adding thumbs – I will try to prepare it in a neater tidier package soon

    ·

  62. LL Author Editor

    hi sam, great stuff! pls fix the comment bug first of all tho ; ) (or is it just me with my stupid ie6 from behing my stupid works´firewall?)

    thx

    ·

  63. Riccardo Author Editor

    Hi folks, great job Sam! just a little question: in my page i would use supersized not for a background slideshow but to pick random images at every refresh…is it possible? it would be awesome. I’m trying to put over your supersized background this flash gallery:

    http://www.flashnifties.com/media_gallery.php#customize

    but it doesn’t appear…where i’m wrong?
    thanks man

    Riccardo

    ·

  64. Sam Dunn Author Editor

    @LL
    I would certainly love to blame IE6, but what comment bug are you referring to?

    @Riccardo
    It would be really difficult to implement a site of that complexity on top of Supersized, the only use I’ve seen so far mirrors that in the example. I am looking to toss random images into the next revisions. Thanks so much and good luck.

    ·

  65. Glitch Author Editor

    Not to sound redundant, but I also hoping to have my webpage load a random image every visit. Could that be something achieved via CSS? I have an old Java script that can randomly select a CSS file, and was thinking of combining that somehow.

    As a side question, how hard is it to work with jQ? I am slowly starting to get my feet wet into JavaS and not sure what to expect with jQ. just by judging what Supersized can do thus far is brilliant, but you keep saying “next version” and i’m just wondering if its harder to develop for.

    Thanks again for your fantastic work.

    ·

  66. joep Author Editor

    Hey man, I like it very very much!!! one question.
    Is it possible to put this background on a worldpress theme??

    ·

  67. terkoz Author Editor

    Hey man, I like it very very much!!! one question.
    Is it possible to put this background on a worldpress

    ·

  68. Steve Author Editor

    I’m trying trying to use this alongside sifr3 but the flash replacement doesn’t seem to like supersized. Anyone else having this problemo?

    ·

  69. Heinrich Krause Author Editor

    Sam,

    Incredible work, my friend. When are we going to see the fading/smooth transition version? I am dying to get my hands on it!

    ·

  70. Sam Dunn Author Editor

    @Heinrich Krause
    I actually released Supersized 2.0 which includes transitions. I would encourage you to direct yourself over to the new version linked to in the yellow box above.

    ·

  71. Heinrich Krause Author Editor

    amazing!!!!!!

    ·

  72. Nadine Author Editor

    Hi Sam,
    I’m trying to get the js work but i have this problem:
    the content of the website (wordpress blog) needs to scroll but i want the bg-image to be fix. when I ad the tag in the superzied-div, the content scrolls, but the js doesn’t work..!? the picture is there, but the proportional scaling does not work.

    would be great if you can help me with this :-)
    thanx, nadine

    ·

    • Sam Dunn Author Editor

      Supersized does not work with scrolling currently, as I have outlined above.

      ·

  73. Stevan Author Editor

    Hi Sam,

    I’ve posted a message yesterday and this was removed.

    I want to integrate you fantastic script with Joomla 1.5.10 + artisteer template.

    Do you or one of the other users have any experience with using you script in Joomla?

    Cheers,

    Steve

    ·

    • Sam Dunn Author Editor

      @Steve
      Sadly I do not, but just keep in mind make the layout fluid or small enough to work with overflow:hidden

      ·

  74. Ben Author Editor

    Hey Sam,

    I am a bit new to jQuery so please excuse my ignorance.

    In the new version, is there a way to turn off the slideshow (get rid off play/pause) and just allow the user to navigate left and right through the images. And also turn off the click through links on the images.

    I’m looking to use this as a photographic portfolio.

    Any help is appreciated.

    Thanks!
    b

    ·

  75. May Author Editor

    Hi Sam,
    Thanks for the great script.
    I am very new to jQuery and having a problem.

    I can see the div id #content is on top of the #supersize, However, I have #logo, #menu and #swf on index.php, they don’t appear on the top of background. They might be behind the background. I can’t see them at all.
    How can I solve this problem?
    It would be great if you can help me!

    Thank you.

    ·

  76. Sam Dunn Author Editor

    @Ben
    I have mentioned a way to do this in the comments on the new post.

    @May
    First off all be sure you are using the newest version, Supersized 2.0. Secondly, put all those divs you are mentioning within one div (#content)

    ·

  77. May Author Editor

    Hi Sam,
    Worked perfect! Thank you so much!

    ·

  78. wiwing Author Editor

    waw,, amazIiing ^^

    wiwing’s last blog post..BlackBerry Curve 8330 Phone, Pink (Verizon Wireless)

    ·

  79. Richard Author Editor

    Hi Sam!

    This is an amazing piece of work! It works great!! I have a question:

    I want to load larges images to keep excellent quality if a visitor resize the browser up to (let’s say) 1920 x 1200. My problem is that 6-7 images at 200-300k each take a while to load initially. If I reduce the quality, I see it at 1920×1200…

    I was wondering if I could load initially the first image, and the navigation images, then preload the rest of the images.

    If you have any advice or pointer of where I should start, it would be really appreciated!

    Thanks in advance!

    (This is an example : http://www.richarddumoulin.com/v2/)

    Richard’s last blog post..Bald eagle soaring

    ·

  80. Emilio Orantes Author Editor

    Great piece of art you´ve made here, excellent work.

    I´m having the same problem like the other posts mention, It freezes with Safari, not working at all.

    ·

  81. David McGowan Author Editor

    Thanks Sam – just wanted to share my site.

    ·

  82. Roberto Falcone Author Editor

    Hi Sam.
    First of all thank you for this amazing plug-in!
    I’m working on it for a website and I’ve encoured in a trouble in IE6: slider transition effect doesn’t work and I see no transition between images sliding.
    Any ideas about this?
    Thank you so much.

    ·

  83. Michael Marchment Author Editor

    When I try and implement it i get the image constraining to the size of the browser rather then evenly resizing… :S

    I’m trying to place it for the index page in my wordpress… so would the jQuery 2.6 be messing with some of the settings?
    .-= Michael Marchment´s last blog ..New Blood =-.

    ·

    • Sam Dunn Author Editor

      @Micheal Marchment
      Sounds like the JS isn’t kicking in I would make sure you have the newest version of jQuery and that its loading the supersized.js properly

      ·

  84. pennfolio Author Editor

    Sam,

    Thanks! Great script. Fading transition would be nice in this script.

    ·

    • Sam Dunn Author Editor

      @pennfolio
      If you check out Supersized 2.0 I’ve included both transitions and controls!

      ·

  85. Peter Bickel Author Editor

    Hej,

    really great.
    There’s one thing I could need when using Supersized: Is it possible to jump to a desired bacckground-image when clicking on a link (for a example a thumbnail)?

    Thank you very much,
    Peter.

    ·

  86. Ali Montgomery Author Editor

    This is just brilliant!

    ·

  87. Andy Drake Author Editor

    Sam,
    Curious if you worked out the aspect ratio yet. We’d love to use it in our project, but its user created content uploaded so, maintaining aspect ratio to the image is extremely important.

    ·

  88. Web Development India Author Editor

    Jquery plug-in provides a better enhancement to us in design era.

    ·

  89. Gui Author Editor

    Hi all and thanks for this stuff, in my case it seems that the content appears bigger, like a zoom… I have container for the header (800px) but it looks like 1000px (my logo looks “pixelled”… Any idea ?

    ·

  90. join Black Author Editor

    i’m a big fan of the blog, thanks again.

    ·

  91. paul Author Editor

    hey. how do i adjust the time in between fade events and keep fade the same temporal length? id like the bg to switch every, say, minute or two (call me crazy) … thanks in adv

    P

    ·

  92. paul Author Editor

    also, how do you remove the href on the images (dont want link) without the slideshow collapsing? sorry im pretty novice…

    ·

  93. lesyfraulse Author Editor

    I think you made some good points in your post.

    ·

  94. boki Author Editor

    Hi, I used your script in http://www.batofina.com... site isnt finished yet, but I just wanted to thank you…

    ·

  95. Mahmood Author Editor

    Hi,
    Thanks for the a great plugin. Its quite easy to understand.

    I was trying to modify it a bit, ran into a problem:

    I wanted to put some description to this image. Have those in a div inside the of the image.

    e.g
    OneOneOneOneOne

    in the javascript the slidecaption(title of image) is set as this:

    if (options.slide_captions == 1) $(‘#slidecaption’).html($(‘#supersize .activeslide’).find(‘img’).attr(‘title’));

    This is to set my description in a div:

    if (options.slide_captions == 1) $(‘#slidedetail’).html($(‘#supersize .activeslide’).find(‘div:txt’));

    It Works !!!!!

    The only thing is when i come to the end of the slide and it starts again from one. it schows the title but not my description?????

    Hava an idea???
    (I repeated the code for prevslide/nextslide).

    Thanks,
    Mahmood

    ·

  96. Mahmood Author Editor

    ****got cut off above

    I wanted to put some description to this image. Have those in a div inside the of the image.

    e.g

    a href=”” class=’alink’>
    img src=”images/one.jpg” title=”One”/>
    div id=”txt”>
    OneOneOneOneOne

    /div>
    /a>

    ·

  97. Jonathan Ober Author Editor

    Hey, great plugin btw…if I can get it working :)

    I am trying to do something that I am not sure this plugin allows for in its current state.

    I have a site set up here which scrolls image to image like you made this thing to do…but I have this menu that my client wants to interact with more like this http://hellomynameisjonathanober.com/web/robsoliman/old/index.php where the content gets pushed down on click. I have been struggling to figure out what is going on since your plugin does what I need it to do (fullscreen/scalable) images…but it doesnt allow for me to have anything above or below. If there is a simple fix for this let me know.

    Thanks, Jonathan

    ·

  98. Frank Author Editor

    Nicely done! Thank you! Works fine for me on firefox … But there is a bug in safari 3.0.4. as earlier mentioned. you only see the logo and arrows for a second – than the screen flips to black and it loads, loads, loads :)

    any fixes planed for that problem?
    best from berlin,
    frank

    ·

  99. mike Author Editor

    it’s realy great plugin but i’ve got one question:

    what i should do with the code or with parameters
    so that slideshow does not play on loading of the page
    but right/left controls and play/pause button
    could still work

    in my situation if i put slideshow into 0 (zero)
    - i don’t need slideshow by default
    the controls doesn’t seem to be working

    i am using v.2 if it matters

    ·

  100. OpenSource Rules Author Editor

    Hi,

    thanks for this great work.
    One question: how can I remove links from background images (I check in js file and links are required //Captions require img in ). But I don’t want that background images have link. I try old 1.0 version which work great, but then I don’t have fade effect…
    Please help

    Bojan

    ·

    • Sam Dunn Author Editor

      @Opensouce Rules
      In 2.0 I made it based around having the images in link tags, but that does not mean that they have to go anywhere. You can simply forgo the href and it will work as though they aren’t images

      ·

  101. Esol Esek Author Editor

    what’s happening. I reduced the number of pics to 50 and it came in quick enough, but its making firefox seize up completely. I have to force quit out of firefox, and the app is running properly. This is macintel osx, can’t remember having this problem anywhere else.
    SOmeone says jquery is not stable…

    ·

  102. OpenSource Rules Author Editor

    Thanks Sam, this solve my problem. Once again – this script is really useful and great work!

    ·

  103. singapore web design Author Editor

    Nice full background rotator by Jquery. Waiting for your second version that can randomize the image sequence.

    ·

  104. CBI Author Editor

    It’s nice that your project further …

    ·

  105. Politics Author Editor

    This seems to be very nice and it really cool J-Query Plug-in.
    Thank you

    Politics

    ·

  106. Macmizer Author Editor

    I just started using this script Supersized 2 just yesterday. It looks fine on my laptop and one other monitor. I have a desktop computer that has dual monitors. One monitor is a wide screen 19 inch and the 2nd monitor is a standard flat panel 22 inch. What I did was test any resolution above 1280 x 762 on both monitors and it looks like the background images are getting cut off on the edges. The higher I go on the resolution of the monitor the more that is cut off. Any idea how I may resolve this? After I fix this issue and if it is fixable I want to have some empty space at the top of my webpage to insert a top navigation. But I do not want the top nav resting on the background image. I want an all white background to display my top navigation and logo and then display the background images below that navigation. I looked for so long to find a gallery or way to have my images fill the screen but leave empty white space above and below the images so I may insert a top and bottom navigation. Furthermore, I want the images to fill respectfully for just about any monitor. Anyone can help with this issue?

    ·

  107. Macmizer Author Editor

    Another thing I just noticed. I decided to take the same laptop I used to setup the supersized code and reduce my resolution. I changed it from 1280 x 800 down to 1024 x 768 and the images are getting cutoff. Here is a url to the code I placed on my demo server http://demos.onlineacc.com/sidebysidenyc/supersized2/default.php

    ·

  108. student aid Author Editor

    “startwidth & startheight – It is important that you specify the image size(s) in this area. These used to develop a ratio and minimum size. If you are planning on using the slideshow and images of various sizes, it will still work as long as they have the same ratios (ie 4:3 / 16:9). For these cases I would suggest using the dimensions of one of the smaller ones in the batch, as it won’t mess up minimum sizes on smaller images. For now all images must be the same ratio to display them in the proportions they were intended to be, although in a future release I will look to add auto-detection. The default dimensions are 1024 x 768.”
    I liked this very much.

    ·

  109. Macmizer Author Editor

    I am familiar with the startwidth & startheight embedded in the default.php page. My images are about 2304 wide by 866 high. I have the startwidth & startheight set to 1024 x 500. What can I expect with these settings? I want to make sure that none of the picture is cut off. If I set the startwidth to 2300 and the startheight to 866 the picture gets cutoff. I am concerned about high resolution monitors displaying the picture properly and filling the screen.

    student aid.
    were you replying to my posting? Please see my original posts again to see what I am trying to explain. You can see a demo at http://demos.onlineacc.com/sidebysidenyc/supersized2/default.php

    ·

  110. Jonas Author Editor

    Macmizer: I have the same problem as you. Please let me know if and how you fixed it.

    ·

  111. Sam Dunn Author Editor

    @Macmizer and Jonas
    After looking at Macmizer’s demo I’m a little confused as to what the exact issue is. If you are looking to stop the top of the image from being cut off, try turning off vertical centering.

    Aside from that, after looking at your demo it appears to be functioning as intended. Simply by the fact that browser windows can be any size means that the image could potentially be cut off slightly if the window is not the perfect ratio.

    If this doesn’t doesn’t answer your question, please clarify and I’ll respond accordingly.

    ·

  112. Jonas Author Editor

    @Sam Dunn
    The problem for me is that the bottom of the picture is cut of and not the top. I would like the top of the picture to be cut of insted of the bottom.

    asighclothing.com/webb <– this is the page im working on.

    ·

  113. RamenFreak Author Editor

    When I tested this w/ HTML4 and CSS2, I had no problems.
    Then I tried to build a page with Supersized in HTML5 and CSS3 and my content layer (on z-indexes 3 and higher) would show up for a second (while the page was loading) then as soon as the slide show finished loading; my content layer was nowhere to be seen.
    Are there any known issues w/ HTML4 & CSS3?

    ·

  114. RamenFreak Author Editor

    woops- I meant to say.
    “Are there any known issues w/ *HTML5* and CSS3?”

    sorry, sleepy.

    ·

  115. Jonas Author Editor

    Thanks for a great plugin. I seem to be having some problems with scrolling background in Internet explorer 7. I have set Body {overflow:hidden} but the problem remains. The only thing that temporarily solves the problem is to set * {overflow:hidden}, but as you can imagine this causes a lot of other problems. Does anyone have a solution?

    ·

  116. h.wakabayashi Author Editor

    I am person who could use your plugin.
    However recently I really jealous to the website done by Flash for full screen as follows. I cannot use action script, but I really want to use this kind of website!
    http://www.satoshinichi.com/

    ·

  117. josef Author Editor

    Awesome jquery plugin Sam! I can think of so many projects I could’ve used this on.

    Does anybody know an easy way to load a different set of images without refreshing the page?
    So when the user clicks a button/link, the set of images that is being looped changes to another set of images that is different.
    I’m trying to create a gallery with different categories of images and when a user clicks on one category one type of image loads and when they click on another category, another type of iamge loads.

    Thanks in advance.

    ·

  118. idagency Author Editor

    Very useful plugin, I was using CSS and jquery, now i will have only to use this plugin and supersize.js.

    great

    ·

  119. Mike Author Editor

    I saw a few posts on loading with ajax to give the ability to have a lot of images and not wait at the beginning, has anyone figured this out? Thanks

    ·

  120. kahtan Author Editor

    Is it possible to use it on a blog? How can I add the code to the html template?

    ·

  121. deepak rohilla Author Editor

    Hello every one ,this is very good script ,but i want to modified it,i need to show small thumb on the left hand side and i also want the image should show according to the onclick of the thumb.please give me idea to create this.please

    ·

  122. deepak rohilla Author Editor

    Please help me ,i need to show images according to thumb image and also need to play or push next previous button ,

    please please help me all i really need this
    thanks

    ·

  123. marko Author Editor

    Hi! cool effect! i little question, can i add a fade in / out effect at the jquery script?
    thank you so much!

    ·

  124. Web Dizajn Artist Author Editor

    Is there a version of this only for background, without the slideshow function?

    ·

  125. Mike@SEO Web Design Services Author Editor

    Love it. great stuff and thanks for sharing. this will come in very handy.

    ·

  126. cybieify Author Editor

    Is there anyway to disable browser zoom factor? Everything works great by default, but when someone zoom in or out, it affects the picture and components on page.

    ·

  127. Salisbury Author Editor

    I am also having the distortion problem when someone zooms in or out.

    Can this default be made into an option that needs to be selected?

    Thanks for the work you have obviously put into this and thanks in advance for the help

    ·

  128. Raghib suleman Author Editor

    nice work dude…

    ·

  129. Matt Author Editor

    Slick plug-in. I especially liked image selection choices very…European. ;-)

    ·

  130. joe Author Editor

    Thanks for this awesome plugin! Finally, after years of wanting to create an online photo album, i was able to create one with a full screen slideshow. I’m beginning to post images, love to hear your feedback.
    http://modernrockstar.com/gallery/

    thanks!!!
    -modrock

    ·

  131. Duluth Author Editor

    Sam,

    Thanks for such a great plugin. The following question I’m sure is my fault but I’m new to jQuery (shows how friendly your code is).

    We’re getting a small bug in the fade effect. Can be seen at http://wielandblock.com.

    Basically there are three images and the third is being flashed briefly during the transition. Any ideas you might have would be very helpful.

    Regards,

    ·

  132. jonw Author Editor

    I’ve tried installing this through wordpress several times. WordPress claims a successful install, then doesn’t show up in the plugin panel. Is this not intended to work with wordpress? Sorry if I missed something..

    Also, I’m running OSX, which might be important due to the __MACOSX folder that’s included. Am I supposed to move folders out of their default layout?

    ·

    • Zach Dunn Author Editor

      @jonw

      This is meant to be a jQuery plugin, and doesn’t support things like WordPress natively.

      ·

  133. Eric Winther Author Editor

    hmm. It was stupid I found this plugin after I did something similar. I used cycle plugin for transition effect. here it’s: http://publishedentries.com/nhg

    ·

  134. emanuel smedbøl Author Editor

    thank you thank you thank you.

    ·

  135. bluantinoo Author Editor

    Very nice work, nothing to say.

    I think that the only thing that can be improved is the SEO aspect: it would be nice to write the captions as titles (h3) with the same link of the image.

    someone can figure out how to do that?

    ·

  136. foko Author Editor

    man i love your script but why is it so slow on my homepage?? the pictures are under 100kb and i dont know why ists soooooo slow!!

    can anybody help me???

    would be so nice
    greets foko

    ·

  137. Elder Martins Author Editor

    Great work! You just saved my life, man.
    Hugs from Brazil.

    ·

  138. John Media @ server hosting Author Editor

    I’m really quite Impressed with jquery as it allows you to have plugins so you have a lot of options to choose from on how to make your layout, design, navigation more effective with its uses.

    ·

  139. Weblinq Author Editor

    Zach and Sam,

    You two built a great script for the community, I love it!
    I got one question that you maybe can answer. My site is loading very slow the other div’s, after loading the supersized div, watch it at: http://www.web-linq.com/leeuwen/ maybe you can help me please?

    ·

  140. michael Author Editor

    I know this is a dumb question but I can’t work it out.
    How do I change the images to the ones I would like to show and how do I add additional images.

    ·

  141. kresse_it Author Editor

    v2.0 is not compatible with ie6 :/

    ·

  142. matt Burton Author Editor

    Hi,

    my fade transition does not work with 10 images, it’s like a two step fade. If I reduce my images to 3 all is ok. All my images are under 100Kb – can you advise anything? thanks.

    ·

  143. Ahern Laurinat Author Editor

    It would be sweet to see a customizable version as a wordpress theme. I would pay money for it.

    ·

  144. Florian Narr Author Editor

    That make Photographer Portfolios even more special!

    ·

  145. césar Author Editor

    Hey Sam! you had a great work here!

    Really love the way the plugin works. I’m trying to enhance the navigation but, I have two problems.

    1- I’ve tried to stylize it using my own nav buttons but, everytime I pass the mouse over it they simple disapears. After a long time trying to solve this without success I’ve had an idea that leads to my question…

    2-I’s there a way to navigate using another plugin? ‘Mousewheel’ especifically .

    Thanks for your attention and your time spent!

    César.

    ·

  146. kiedis Author Editor

    Please please, can anyone tell me how to put this on wordpress? a tutorial to do it “by hand” it would be just great! thanks a lot your script looks amazing! i hope i can find a solution, it’s giving me headaches :)

    ·

  147. Daniel George Author Editor

    Absolutely great! Going to use this on a current project. However, i am using the plugin for the main background image that appears on every page and every time you change page it reloads and a white background flashes. Is there any way to avoid this?? Any advice would be awesome!

    ·

  148. Mesut Author Editor

    It’s a nice plugin but scroll horizontally doesn’t work properly as Cycle plugin does. I tried to get same result with your plugin but I just could accomplish that only in firefox not in ie8 at all. So I returned to Cycle plugin and could find a solution for resizing issue of it (you can see that problem at alvinailey.org webpage)more easily.

    ·

  149. Wurz Matthias Author Editor

    If you use the script in IE8 and use some other animations the browser becomes realy slow and unresponsive.

    typ to use this CSS:
    img {-ms-interpolation-mode: nearest-neighbor; }

    You can read my full article here:
    http://wurzmatthias.wordpress.com/2010/07/30/ie8-fullscreen-img-image-scaling-stretching-ms-interpolation-mode/

    ·

  150. Greg Bowen Author Editor

    Totally awesome codez!

    I am using pics that are about 45K and there is a slight delay when the page loads – I am trying to use this as a web page, and the load delay breaks continuity.

    It seems if the picture were in the cache – it would be instantaneous – could this be related to pre-loading maybe?

    ·

  151. Patricia Valderrama Author Editor

    Does this work for squarespace?

    ·

  152. George Author Editor

    Hi this is a great bit of code. But is it possible to use this with sticky footer???

    I am using this with the sticky footer but I get a scroll bar for my large background image? so when I scroll down the footer does not stay at the bottom :(

    ·

  153. Shawn Author Editor

    Any idea why this wouldn’t work in Android’s browser?

    ·

  154. BarsikSoftPaws Author Editor

    Hi there!
    Thank you for this wonderful script!
    I’m using it now to build my site. I would really love to build also time sensitive CSS to it. So here is my problem: is there any way to change:

    in body in some div, so it still would work and the pic itself would be in CSS???
    Here is example of night CSS http://www.ftrade.pl/barsik/
    I really would appreciate the answer, even if there is no chance.
    Thank you in advance. :)

    ·

  155. vainfotech Author Editor

    It is very Useful for me and i am also web developer in ahmedabad.

    ·

  156. mero Author Editor

    Is possible to change the background color when changing the photo?

    ·

  157. Munish Author Editor

    Thank you very very much for this plugin. It really works fine, easy to configure.

    ·

  158. john valis Author Editor

    i really inspired by the work

    ·

  159. Marcelo Peixoto Author Editor

    Great plugin!!!! Awesome!!! Congratulations!!!

    But at line #7 of “The JQuery” topic, where is written “slideinterval” the correct is “slide_interval”. I change it and then the plugin worked correctly.

    ·

  160. Woodworking Machinery Author Editor

    It is really good for background.

    Thanks

    ·

  161. balıkesir web Author Editor

    wonderfull!! good work.

    ·

  162. Adhi Author Editor

    Nice useful article keep posting like this.. Thanks for sharing this info.
    My Blog

    ·

  163. michael Author Editor

    i am wanting to have links in a div that is above the changing images that supersize generates – however I am trying to get the links to open an additional image with the lightbox animated effect of floating in the center of the page – is this possible or am I wasting my efforts?

    ·

  164. Martin Author Editor

    awesome dude – thanks alot!

    ·

  165. Arjen Author Editor

    I have a few questions.

    1) What is the current status, browser support?

    2) Can I also use this without the slideshow. I just want to display one image.

    Thank you!

    ·

  166. erika Author Editor

    Hi- I’m wondering if anyone can help me.

    I designed this site using the supersized script: http://www.bigstarchicago.com

    …but since I handed it over to the restaurant, they have been adding more and more to the homepage, and now it scrolls, which is fine, but if you look at the site on an ipad or iphone, the scrollbars don’t show up and you lose all of the info below the fold.

    Hopefully someone more versed in programming can help me!!

    Thank you!

    ·

  167. scott Author Editor

    Does anyone have some code to restart the slideshow from the beginning (ie. move the first slide)?

    ·

  168. Nevin Author Editor

    Hii Friends,
    Any one know how to change it background color while loading…. its current background color is #fff …. i want to change it to #666

    ·

  169. sumair Author Editor

    i want to use this but overflow is not ideal for many because some people with smaller resolution definitely would need scroll bar to navigate the site,also some ajax scripts would go crazy with overflow thing too.

    ·

  170. Blythe Author Editor

    Hi, does anyone know how to make it work in wordpress? Thanks : ) Really need your help.

    ·

 

Build Internet by One Mighty Roar. Since 2008.