Supersized 2.0 Released – Now with Transitions & Controls

Supersized 2.0 Released – Now with Transitions & Controls


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!

Features of Supersized 2.0 – The Exciting Sequel

Since the release of the original Supersized back in February, I have had a fair amount of time to gather feedback, read comments, and plan out what version two would hold. At long last Supersized 2.0 has arrived, here’s what is new:

screencap

  • Transitions : Fade, Sliding (Up, Down, Right, Left), and None. Options galore!
  • Navigation : Forwards, backwards, pause, play.
  • Preloading : Loading screen while images load to keep things smooth.
  • Captions : An image can have a caption, defined by it’s title attribute.
  • Slide Counter : Let’s you know which slide you are on and how many total.
  • Pause on Hover : This option pauses the slideshow when the image is being hovered over.
  • Vertical Center : Exactly what it sounds like – vertically centers image.

Those are a couple of the main features to get excited about, but I would encourage you to check it out for yourself, click the demo button to head over to our new Supersized project page.

As always please leave and thoughts, suggestions, questions, comments, or dreams below. Thank you so much.

Posted Thursday, May 7th, 2009 · Back to Top

SPONSOR

Add Comment

333 Comments 98 Mentions

  1. Ashraf Ali Author Editor

    Looks really good. You have done an awesome job. Thanks.

    ·

  2. Hezi Author Editor

    i dig this. thanks sam!

    ·

  3. Callum Chapman Author Editor

    Nice stuff, I’ve reviewed and stumbled this! Excellent job!

    ·

  4. vrob Author Editor

    Love it!

    vrob’s last blog post..Envato Sites Style Guide

    ·

  5. Chris Raymond Author Editor

    I’m curious if this plugin is intended only for those situations when you want the user’s entire screen filled with your images? Or could it be in part of a web page with other content? Thanks! Great work!

    ·

  6. Sam Dunn Author Editor

    @Chris Raymond
    I intended for this plugin to only be for full screen as there are a healthy amount of other plugins that can be slipped into your site.

    Worth checking out for non-fullscreen plugins: http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

    ·

  7. glove Author Editor

    nice upgrade, sam.. good stuff
    i suppose the next version will feature support for scrolling content? currently this assumes that the page doesn’t have scrollbar, or, does it?

    ·

  8. Rob Author Editor

    Nice update. was looking forward to it. You say that images must be in an anchor tag – is there anyway to have it work with linked images? I simply want a slideshow but not with linked images. Thanks Rob

    ·

  9. Sam Dunn Author Editor

    @glove
    Scrolling content is something I have yet to figure out a workaround for, since overflow:hidden is a key part of making this functional. I have one thought I’m currently investigating.

    @Rob
    You can still do slideshows with non-linked images, just use a simple anchor tag without the href attribute

    ·

  10. wuss Author Editor

    Thanks for the hard work!

    Looks beautiful, resizes well and works with scrolling content (Safari, Firefox, didn’t check IE yet).

    Would adding a random option be possible?
    That would add more diversity.

    To speed up loading times, images could be added gradually via ajax.

    ·

  11. Mike Author Editor

    Hello Sam,

    first of all, nice job and thanks to share it !

    I have a question : transitions (fade in, out, slide) don’t work (only for me ?) on Firefox (3.0.10) – windows XP.

    Indeed , the transition is very very “fast” (it’s like if there’s just one step of fade).

    Is someone else have the same result ?

    Is it possible to fix it ?

    thanks in advance for your reply

    Mike

    ·

  12. Sam Dunn Author Editor

    @wuss
    Random is something I can pencil in for a revision, thank you very much.

    @Mike
    I have not had the problem when I tested in Windows XP, but if others are as well, I will certainly look into it.

    The fade effect runs on 750ms transitions – if you would like adjust this you only have to edit 2 places in supersized.2.0.js – under functions prevslide() and nextslide() you will find a list of transitions and times, adjust them accordingly.

    ·

  13. steve Author Editor

    I havent checked this yet, so forgive me if its blatantly obvious, but I’d love to

    1. be able to have interactive, perhaps ajax driven content on top of the slowly changing background, and.

    2. Have the background change be triggered by something (i.e. the ajax routine, while polling, sees you’ve gotten an email and the background changes to an email jpg?

    ·

  14. Aen Author Editor

    Hey thanks for mentioning me. Glad my small contribution helped. Now I’m trying to replace the current set of images with new ones via ajax. Here’s what I think I need to do to make it work.

    1. Complete any current transitions.
    2. Pause slideshow.
    3. Load new set of images via Ajax, hidden at first and positioned above current set.
    4. Wait for new images to load.
    5. Fade in new set of images.
    6. Remove previous set.
    7. Apply slideshow function on new set.

    On top of prevslide and nextslide, it would be great to have a function like loadSet(array(“image1.jpg”, “image2.jpg”, “image3.jpg”).

    Scrolling content will work if the background is position:fixed but that will need some hacking on IE.

    Aen’s last blog post..COMA Launched

    ·

  15. Montana Flynn Author Editor

    does it work for different sized images? IE: will it work with verticle images and horizontal? Different aspects? Or does it crop them?

    Montana Flynn’s last blog post..Twitter Weekly Updates for 2009-05-08

    ·

  16. Sam Dunn Author Editor

    @steve
    I’m not entirely sure what you mean by your #1 thought, perhaps a little clarification and I can come up with a proper response. Your #2 is possible, although you will have to explore the code to engineer that, the functions are in place, you would just have to figure out your conditions.

    @Aen
    Not a problem sir, thank you, sounds like you’ve got a good sense of a possible upgrade. I may explore that at a later date.

    @Montana Flynn
    You have to pick one ratio size, so vertical and horizontal currently cannot coexist without distortion.

    ·

  17. Dave Author Editor

    Hi

    Really useful script thanks so much.

    One issue I have found is if JS is turned off, images disappear and is left with spinning disc. Any way of having at least one image showing if JS is off?

    Thanks again
    D

    ·

  18. Daniel Schwarz Author Editor

    Hi Sam,
    I am not sure if you are still interested to see what people make with this beautiful an easy to use script. Nevertheless here is what I made of „supersized-2.0“.

    http://www.triografie.de

    Thank you very much. The script fits just perfect for my needs to share my portfolio with the word.

    Daniel

    ·

  19. Federico Author Editor

    You could have the scroll setting html and body width and height equals to 100%.
    Then you need to set the container element height and width = 100% and position:absolute, with top,left equal to 0…

    html, body, #content {height:100%; width:100%}
    #content {position:absolute; top:0; left:0; overflow:auto;}

    ·

  20. Janko Author Editor

    Hi,
    this is simply great!
    I would just love to see the possibility to present images with different w/h ratios.

    Janko’s last blog post..Lila

    ·

  21. Lars Author Editor

    Hi, thanks, it looks very good, so I will try to subsitute a similar Flash Backgroundslideshow with this.

    ·

  22. mihira Author Editor

    Hi, you have done a nice work there.
    But under Opera and IE8, you can scroll to see the whole background image. While under FF3, Chrome and Safari that doesn’t happen. Do you know how I can manage to make IE8 and Opera to behave like the others?

    ·

  23. mihira Author Editor

    Nevermind, just fixed adding ‘overflow: hidden’ on the body.

    ·

  24. Austin Author Editor

    Great script! I’ve been checking back frequently to see if 2.0 had ben released and it has! Thank you.

    I noticed when I turned the slideshow off the navigation is disabled. Is there a way to turn the slideshow off while keeping the navigation active?

    ·

  25. Mitch Author Editor

    Can this plugin be used to simply as a transition background for a bigger site? i.e. the background with a blog on top?

    Mitch’s last blog post..SHTBOX, #SHTBOX and @SHTBOX

    ·

  26. artur Author Editor

    thank you, I’ve been waiting for this !

    ·

  27. Sam Dunn Author Editor

    @Austin
    I simply added an if statement in the JS file to only allow navigation with slideshow activated. By removing this if statement, you should be able to accomplish your goal.

    @Mitch
    Due to the lack of scrolling capability it would be difficult to engineer a full blog on top of this plugin, I have seen some people succeed in doing this with iframes and fluid layouts, so you might want to look into that.

    ·

  28. wuss Author Editor

    Supersized works great with Safari and Chrome, but can make Firefox (Mac and Windows) and IE7 become slow, almost unresponsive.

    Has anyone else experienced this?

    I tried:
    - reducing the size of images (from 1600px to 1024px wide)
    - slowing down the frequency of the slideshow (from 10s to 30s)
    - removing the transition (used to be fade, now none)
    … it keeps using a lots of resources, especially Firefox Mac.

    In the Activity Monitor, Firefox Mac is often stuck at 97% (for one core, so that’s 50% of total resources), while Safari oscillates between 4 and 6% (for 1 core) with a peak at 47% (for 1 core) for a few seconds during the fade. Removing the fade halves the processor usage for Safari, but doesn’t seem to have any effect with Firefox.

    Hardware: MacBook Pro 2.53GHz Intel Core 2 Duo, 4GB RAM, 1440×900 resolution

    ·

  29. Sam Dunn Author Editor

    @wuss
    I would look into exactly how many images you are including in the slideshow, as that may impact speed. I have not experienced drastic slow down, I too limit my image size to 1024px

    ·

  30. Stevan Author Editor

    Hi Sam,

    Great plugin!
    I’ve been playing arround with it and would like to use it in a Joomla site.

    Do you have any pointers on using it in Joomla?

    Cheers,

    Steve

    ·

  31. Brian Author Editor

    Great work Sam – Is there anyway of calling images into Supersized – Because I’d like to use this to present 50+ images and think the load time and performance would not be acceptable. Is there a work around? Any advise wound be really great.
    Thank you for a great script.
    Regards
    Brian

    ·

  32. Bviss Author Editor

    Extremely beautiful and useful script! I have only one burning question. Is there a way to navigate by thumbnails?

    Cheers, Bviss

    Bviss’s last blog post..The%20Wolf%20In%20The%20Winter

    ·

  33. geoff Author Editor

    really like this and want to use it… but I must be doing something wrong:
    http://www.geoffsphotos.com/index_new.html
    myimages don’t seem to want to load. any help is appreciated.

    ·

  34. geoff Author Editor

    wow. thank you for the speedy response. but, crap… I’m still dorking it up. I have tags around the image sources:

    ·

  35. wuss Author Editor

    FYI it works very smoothly with Firefox 3.5 Beta 4 (Mac), so the slowdowns experienced with FF 3.1 will soon be a thing of the past!

    ·

  36. miquil Author Editor

    Thanks for the great script. I was only wondering. Is it possible to put html content beneath the full browser view screen? i want to make something like this: w3.80spurple.com but then without flash…
    Thanksss

    ·

  37. curzio Author Editor

    Hi, great script, but the “slide” effect is not rendered in IE7, works on mozzilla, safari, chrome…but no IE, is it possible?

    ·

  38. lorenzio Author Editor

    Hey Sam,
    This is a great script, cheers to everyone involved! I too second Bviss – is there a way to implement a thumbnail navigation? Then this would be king!

    ·

  39. Gon_NCO Author Editor

    Hi

    I’m using this for a requested website and the client wishes for smoother transitions (for the fade transition). Is there an option to generate smother transitions with this beautiful piece of code?
    The other thing my client wants from me is that the first and last image should be displayed for a longer period than the others. A workaround would be to use those more than once but I think thats not the best solution.

    Thanks for the gread script and the replies.
    Gon

    ·

  40. stephane Author Editor

    Thank you Sam for this great script!

    We just launched SOUND Phuket website (http://www.soundphuket.com) which uses a slightly modded version of Supersized: pictures are loaded after page load and displayed in random order.

    We had issues with long pages and scrolling at first, but fixed them with css.
    Check http://www.soundphuket.com/calendar/ for instance.

    If you want to grab the modded version (provided as-is): http://www.soundphuket.com/js/supersized.2.0-mod.js (requires slightly different html)

    Cheers

    Stephane

    ·

  41. Sam Dunn Author Editor

    @miquil
    You would have to put supersized in its own div and re-engineer the script to not scale the height on browser resize.
    @Gon_NCO
    Some of the choppiness of animation is jquery/browser limitations, sadly not something I can address. The rest of what you suggest could be done with some tinkering.
    @stephane
    Very nice, I’m impressed.
    @All those with browser compatibility concerns
    I have tried to make this as mutually browser friendly as possible, obviously there are some hiccups in certain browsers, at this time the best suggestion I have is upgrade to the newest browser version.

    ·

  42. Rob Author Editor

    Is there any chance of getting a release in the future which handles both portrait and landscape images within the same slideshow? This would be really useful. Thanks for the great script.

    ·

  43. manzu Author Editor

    stephane you’re a life saver! i was having problems like cpu load while switching images and was looking into ajax loading them. nice to see someone already did it. thanks!
    and also thanks to sam for the code in the first place!

    ·

  44. manzu Author Editor

    scratch that, back to the ajax loading drawing board.

    ·

  45. Falk Author Editor

    Hi Sam,
    great script indeed!
    Anyway I can’t figure out how to disable the slideshow while keeping the navigation active…
    I read your comment from May 21st but I just don’t get it right. Would be great if you could tell me what I have to change to make it work.

    Thank you, Falk

    ·

  46. Jez Author Editor

    I have a bunch of websites that use the slideshowpro component (slideshowpro.net for details) and I am going to recode the more simpler ones with your plugin instead.
    Would you consider coding the ability to view (and have populate with the source or an alternative smaller version of the source image) a row of thumbnail images, say in the floating content div, that can be used as an alternative navigation scheme other than the default left/right/pause mechanism in a future release?
    The thumbnails would be really effective, especially when coupled with a previously suggested idea of random image loading.
    The next obvious request is to ask you to code the plugin to accept an infinite number of images, much the same as SlideShowPro, so preloading every image prior to displaying them in the browser will be entirely unncessary as your plugin would only load images on demand, image-by-image.
    Kudos for this wonderful plugin – I wish you every success with it. Thank you for posting it for the web community to use and abuse.

    ·

  47. Armando Author Editor

    Im testing a site we made on ie6 and when I select transitions (left, right, top or bottom) and leave the mouse in the middle of the screen, there is a strange flickering ocurring, it flicks 3 o 4 times before changing the image, it doesn’t happen when fade is chosen. It occurs also on your live demo. Do you know what could be occurring? Thanks you and you have an excellent piece of software.

    ·

  48. Vumme Author Editor

    nice work! Butt ones you use is with a big number of pictures, your computer will completely flip! First do you have to wait until alle images are downloaden and if your computer survives this part he will certainly goes down when he try to the next image…
    example of my problem: http://www.lifeisaparty.be/album_slideshow.php?boek=Ardennen_Waillet

    ·

  49. Mark Steggles Author Editor

    Hey,

    Lovely gallery. But it becomes sluggish at about 10+ pictures. Is there a workaround for this?

    ·

  50. wuss Author Editor

    to all those experiencing sluggish performance or high processor usage, try again with the latest version of firefox (http://www.mozilla-europe.org/en/firefox/). the speed improvement is very impressive.

    ·

  51. Armando Author Editor

    We just finished a site based on supersized, it will go live this week.
    You can see it here http://s66633.gridserver.com/w/vaa/beta/vaa.php

    Thanks!!

    ·

  52. erow80 Author Editor

    First off….. THANKS! I’m building locally so I don’t have a link for an example yet, but I’m wondering if anyone has luck running Supersized in WordPress. I’ve got a decent start, but when hovering the navigation disappears. To make matters worse, the gallery is actually not scrolling, so on second thought — maybe I don’t have a decent start! Help?

    ·

  53. erow80 Author Editor

    Update:

    Got everything working with WordPress. It was user error and I just needed to reassign some links.

    The only issue now is that the next button is “sticking.”

    ·

  54. Marc-Andre Gray Author Editor

    I’m trying to get a shadowbox to play nice with supersized. I get some flicker on quicktimes when the slideshow is playing.

    Is there a way to pause the slideshow when I initialize a link to a shadowbox?

    ·

    • Sam Dunn Author Editor

      Yes, if you look in the script, just mimic what happens when you press pause when the link is initialized

      ·

  55. calvin Author Editor

    great plugin…is there a way to incorporate html or swf’s into the slideshow instead of just images?…

    also, how about seo friendly urls for each image?…maybe through history plugin?…just wondering :-)

    ·

    • Sam Dunn Author Editor

      @calvin
      It might be possible to include some of those things, it would take some tinkering around, but my intent for this plugin was first and foremost to deal with images.

      ·

  56. alex Author Editor

    hey…

    first of all, very nice plugin.

    i made a gallery with 21 pictures and the page is very slow. the total size of all 21 pics is just approx. 1mb… i read in this post about a possible solution with ajax, to load the images. how does it work? has anybody a link for me or a short discribtion?

    thanks a lot and cheers ALEX

    ·

  57. wuss Author Editor

    Marc-Andre Gray, were you able to pause supersized once a shadowbox is opened? I’d like to do this too!

    ·

  58. Armando Author Editor

    Wuss, you just need to make jquery click the button.
    When I open or close videos I call $(“#pauseplay”).click();

    I’m also working on going to a specific image but I doesn’t work all the time.

    $(‘a.gotoslide’).click(function() {

    if($.inAnimation) return false;
    clearInterval(slideshow_interval);

    var valor = $(this).find(‘img’).attr(“id”);
    var last = $(‘a.gotoslide’).attr(“id”);

    var th = $(this).find(‘img’).attr(“id”) – 1;
    $(‘img.thumb’).removeClass(“blur”);
    $(‘img.thumb:eq(‘+th+’)’).addClass(“blur”);

    gotoslide(valor, last);

    return false;
    });

    function gotoslide(valor, last){
    var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);

    var currentslide = $(‘#supersize a:eq(‘+valor+’)’).addClass(‘activeslide’);
    currentslide.removeClass(‘activeslide’);

    if ( currentslide.length == 0 ){
    unomenos = last – 1;
    currentslide = $(‘#supersize a:last’);
    }
    if(valor == last){
    var nextslide = $(‘#supersize a:eq(1)’);
    unomenos = last – 1;
    var prevslide = $(‘#supersize a:eq(‘+ unomenos +’)’);
    }else{
    if(valor == 1){
    var nextslide = $(‘#supersize a:eq(2)’);
    var prevslide = $(‘#supersize a:eq(‘+ last +’)’);
    }else{
    unomas = valor + 1;
    unomenos = valor – 1;
    var nextslide = $(‘#supersize a:eq(‘+ unomas +’)’);
    var prevslide = $(‘#supersize a:eq(‘+ unomenos +’)’);
    }
    }

    $(‘.prevslide’).removeClass(‘prevslide’);
    prevslide.addClass(‘prevslide’);

    nextslide.hide().addClass(‘activeslide’);
    nextslide.show(); $.inAnimation = false;

    $(‘#supersize’).resizenow();
    }

    ·

  59. Michael Author Editor

    I’m having an issue in version 6, 7, and 8 of IE. It’s is loading and playing the fade animation fine for the first two images (there are 10 in total) however after the second image, the screen goes entirely white and remains that way without changing.

    Before I create a test version to link to as an example, has anyone had a similar problem and potentially seen a fix. Problem does not occur in Firefox.

    ·

  60. Vincent Author Editor

    I’ve found a solution for the folowing problem:
    IE doesn’t Anti-Alias the resized images like in Gecko (FF) or Webkit (Safari, Chrome) by default.

    I’ve added this to the css:

    #supersize img {
    -ms-interpolation-mode: bicubic;
    }

    And now the images also look smooth in IE7+. I don’t have a fix for IE6 and lower.

    @Sam Dunn: Maybe you can add this piece of css in the next release. I’m looking forward to it.

    ·

  61. Joshua Author Editor

    Is it possible to center the image based on the horizontal counterpoint rather than vertical or top left?

    ·

  62. Joshua Author Editor

    *centerpoint

    ·

  63. Sam Dunn Author Editor

    @Joshua
    Within the the resizenow function in supersized.js there are the following lines –
    if (options.vertical_center == 1){
    $(this).children().css(‘left’, (browserwidth – $(this).width())/2);
    $(this).children().css(‘top’, (browserheight – $(this).height())/2);
    }

    Which you could then apply the following principles to -
    http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

    ·

  64. Jay Author Editor

    Hey – great bit of code.

    It would be nice if there were an explicit license in it…. And it’d be best if this were BSD licensed. :-)
    .-= Jay´s last blog ..Acquia.com website refresh =-.

    ·

    • Sam Dunn Author Editor

      @Jay

      Here’s the deal as I’ve outlined before -

      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. Feel free to use it in projects and whatnot.

      Hope that makes things clear for you.

      ·

  65. Martin F Author Editor

    Hi,
    That’s a great plugin. Thank you so much.Is it possible to the fade effect to be more fluid? I find it a bit laggy.

    Thank you

    Martin

    ·

  66. Sam Dunn Author Editor

    @Martin F
    Much of the fading smoothness depends on the browser size/image size. There are certain limitations with jQuery and large images as far as choppiness goes.

    ·

  67. Pennfolio Author Editor

    Sam, This is Very great script. I’ve been waiting for this. I like how the images resize as the browser also resize. I wonder if it can handle thumbnails? so its more like a gallery.

    Thank you!

    ·

    • Sam Dunn Author Editor

      @Pennfolio
      Thanks so much for the positive feedback. It can indeed handle thumbnails although it would take a fair bit of tinkering to make it happen as it’s not something I’ve included in this version.

      ·

  68. George Author Editor

    Don’t have a lot of experience with JQuery. Is there a way to allow the next and previous buttons to work while the slide show is disabled/ paused?

    ·

  69. Joshua Author Editor

    Thank you for your help but I am thick and new to javascript:

    I see:
    $(this).children().css(‘left’, (browserwidth – $(this).width())/2);
    $(this).children().css(‘top’, (browserheight – $(this).height())/2);

    Which I assume I need to work like:

    .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    }

    Is this something obvious that I am missing?

    ·

  70. Joshua Author Editor

    I’ve changed the vertical center code to look like:

    if (options.vertical_center == 1){
    $(this).children().css(‘margin-left’, -($(this).width())/2);
    $(this).children().css(‘margin-top’, -($(this).height())/2);

    And then the #supersize css to look like:

    position:fixed;
    top: 50%;
    left: 50%;

    Unfortunately while things look relatively centered, the true horizontal “middle” of each image is not lining up with the “middle” of the browser window. Do you or can anybody else see what I’m doing wrong?

    ·

  71. Joshua Author Editor

    Wow I’m stupid. Ok guys that’s the solution if you want horizontal centering!

    ·

  72. Marcus Olley Author Editor

    Is there a way to implement this for a Flash .swf?

    ·

    • Sam Dunn Author Editor

      @Marcus Olley
      While I am not a Flash guy, I based this plugin off the functionality that Flash has when it comes to fullscreen resizing. I think it would be worth looking into and you probably won’t need Supersized to do so.

      ·

  73. Marc-Andre Gray Author Editor

    Hi I’ve been trying to get supersized 2.0 to work nicely with shadowbox (http://www.shadowbox-js.com/).

    My trying to set supersized to pause when ever the shadowbox is called up. This seems like something that should be simple but I can’t seem to get it too work.

    I’m trying to high-jack the “pause hover” feature to assign it to the shadowbox. But no luck so far.

    If anyone has any ideas please shoot them my way.

    ·

  74. Olli Author Editor

    How about compressing (minifying) this brilliant script with Yahoo YUI compressor?
    If anyone has experience with that…

    ·

  75. gary Author Editor

    Hi great thing this! but how do you get round the problem with the whole security issue with internet explorer? It seems a pain if people have to go into there settings to view the website?

    ·

  76. Mary Author Editor

    Hi, I just implemented this on a test a page to see how it works. It works wonderfully, however for some reason the only transition effect that I can get to work is the fade. If I try to another transition, it stalls at the first image and never transitions. It’s great for now as I only need to use the fade transition but the other transitions would be great to try out. Any ideas on what I am doing wrong? I’m only changing the number corresponding to the effect.

    ·

  77. Mary Author Editor

    Hi,
    Nevermind, I figured it out. Script(s) placement. Thanks this makes my life so much easier.

    ·

  78. Dan Author Editor

    i’m trying to get this to slide the current image off to the left before sliding the new image on from the right by tweaking the code for transition 3. It works fine in IE7/8 but in FF it just loads the new image with no transition:

    if (options.transition == 3){

    prevslide.hide(“slide”, { direction: “left” }, 1200, function(){

    nextslide.show(“slide”, { direction: “right” }, 1200, function(){
    $.inAnimation = false;
    });
    });

    }

    i also added a style=”display:none;” to all images in the HTML except the first or there was some odd display happening

    Any ideas why this doesn’t work in Firefox?
    .-= Dan´s last blog ..Montenegro – one of the world’s fastest growing tourism markets =-.

    ·

  79. Anton Author Editor

    Hi,

    Beautiful work! Thanks so much for making it available; that’s awesome. I was wondering if it’s possible to have the images change upon visiting different pages throughout a site… Say you click to a new page the background image changes instead of continually rotating?

    Thanks again,
    Anton

    ·

  80. CodeBits Author Editor

    I’m working up a mock design for a photographer who saw a Flash site he liked and now wants one similar. I don’t want to build it in Flash, so I’m working on mimicking Flash with jquery.

    This plug-in helps a lot with the idea!! But, I’m finding a little problem. Any image I place over the supersized via z-index or otherwise get distorted. I’ve solved this by placing the image in a div as a background but this isn’t always advantageous. Is there a work around for this issue?

    Also in my case I don’t want to wrap my images in a href tag, but without the href tag images don’t display. Is there a work around for this.

    TIA

    ·

  81. Andreas Author Editor

    Hey Sam,

    inspired by your great script i created a new plugin: http://dev.andreaseberhard.de/jquery/superbgimage/
    Sorry the page is in german ;-)

    Here is the direct link to the Online-Demo: http://demo.andreaseberhard.de/superbgimage/demo.html

    keep on building internet!
    Andreas
    .-= Andreas´s last blog ..jQuery-Plugin SuperBGImage – Skalierte Fullscreen-Hintergrundbilder und Slideshows mit jQuery =-.

    ·

  82. Flobiz Author Editor

    I’m sorry if I missed something but I’m still not clear how to put the site content on top of this background. I want the back ground to change with the navigation, when a new page is clicked on. How do you do that? What is the code?

    I really liked how Stephane (June 16th, 2009 at 5:38 AM–We just launched SOUND Phuket website (http://www.soundphuket.com) which uses a slightly modded version of Supersized: pictures are loaded after page load and displayed in random order.) did her site. I want to do that for a client but have no idea how to make that happen!

    Any help is appreciated! Thanks so much!

    ·

  83. Steve Author Editor

    Hi there,

    I’ve spent many hours trawling the net for such a solution and supersized2 seems to fit 99% of the prerequisites, notably handling the aspect ratio correctly in Chrome and Safari. I have just one niggling point left : I would like to have my background images aligned to the right of the screen (so with any overlap on the left). Is this possible ?

    ·

  84. manuel Author Editor

    This script is what i was looking for since a long time, unfortunately i have to report serious issues under Safari (mac). When loading the “default.php” example in Safari 2.0.4 on OSX 10.4, the picture is shifted 50% to the top and the loading gif never disappears. Fwd and pause buttons are not working. In Safari 3.0.4 the only thing visible is the loading gif, while the entire background remains black.
    .-= manuel´s last blog ..This saturday! =-.

    ·

  85. martin Author Editor

    HI,
    I would like to use supersized with joomla, and was wondering if I could have different imgs for different articles.
    Because now, by putting the supersized div in my index.php, its not exactly what I want.
    And I dont know if I would be able to place it in my article content.I’m pretty much of a newbee.
    Thanks

    ·

  86. martin Author Editor

    All is well, I had a few things wrong, that I fixed, now its working fine!
    Thanks for your work!

    ·

  87. Anna Author Editor

    Awesome slide show. Thank you for sharing!

    I would also like the navigation to work when the slide show is paused. I’m not sure which if statement to remove. I tried removing “if($paused) return false;” from the //*Slide Navigation section, however that made the slide show run very quickly when pause was clicked.

    Thanks in advance for the assistance.

    ·

  88. Brad Parscale Author Editor

    Why in version 2 did you require the images to be links as well as remove ‘minsize’?

    ·

  89. Rics Author Editor

    Hello,

    Can’t I creat links to a specific slide? I want to make a navigation with thumbnails, so the visitor could choose wich image to see.

    Thanks!
    .-= Rics´s last blog ..Cursos online do Bruno Ávila =-.

    ·

  90. Ben Author Editor

    Thank you for your work on this project!

    My question: Is it possible to have the caption (title) link to the same location as the image?

    ·

  91. Rics Author Editor

    Yeeeeessssss! I DID IT!!!

    I did the “thumbs” navigation work. Now I can have various links and you can change the image choosing one of it.

    I will prepare a little howto to post here.

    CAN’T BELIEVE I DID IT!!!!!! YYEEEESS!!!!
    .-= Rics´s last blog ..Peitinho nas estrelas =-.

    ·

  92. Rics Author Editor

    In my images folder I have three files:

    snake.jpg
    bird.jpg
    paradise.jpg

    The slide section will be just this:

    As you can se, only an image tag, nothing more.
    Then, the content section:

    Cobra
    Pássaro
    Paraíso


    I put the links in a div for positioning.
    It will be used later in js too.

    And then, the script section. Here is where the trick is done.

    Pay attention to settings. It’s all different from the default.

    $(function(){

    // Supersized settings
    $.fn.supersized.options = {
    startwidth: 1024,
    startheight: 768,
    vertical_center: 1,
    slideshow: 0,
    navigation: 0,
    transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
    pause_hover: 0,
    slide_counter: 0,
    slide_captions: 0,
    slide_interval: 5000
    };

    // Apply Supersized Plugin
    $(‘#supersize’).supersized();

    // My thumbs navigation system
    $(“#thumbs > a”).click(function(){
    var img = $(this).attr(“class”);
    $(“#supersize”).fadeOut(‘slow’, function(){
    $(this).html(”).resizenow().fadeIn(‘slow’);
    });
    });

    });

    It’s working incredibly well, and I don’t have any limitation regards number of images. They are loaded as thumbs are clicked, so you can use as much as you wish.
    .-= Rics´s last blog ..Peitinho nas estrelas =-.

    ·

  93. Kari Author Editor

    Hi, Can I ask a question or two? I could be showing my ignorance but…

    1. Is this full browser slideshow possible for a blog background? I mean, can I have the slideshow changing the photos/images but the blog still be readable?

    2. Is there someone that can help me do this? I know it is a lot to ask…

    3. Thank you for any help! It is a brilliant slideshow!

    ·

  94. Rics Author Editor

    You can do that easly Kari. Just put all the “blog code” inside the “content frame” tag and make the necessary adjustments in css.

    :)
    .-= Rics´s last blog ..Bubble Design =-.

    ·

  95. Beth Author Editor

    Great plugin! Is it possible to have an image set to 100% and leave the width as auto (so you would get background on each side of the image)?

    I tried doing this to both the image and the a element, but the image refused to show up.

    Thanks!

    ·

  96. c.note Author Editor

    this is great and is almost exactly what i need. i wish to turn it to a manual slideshow.
    any ideas?

    ·

  97. c.note Author Editor

    sorry i had another js file opening which was minified, the actual correct js is very readable and i am sure i will be able to alter it to run manually. cheers!

    ·

  98. zander Author Editor

    Hi,

    Great plugin – I have a question, Is there a way for the plugin to just display the first image at full size in the absence of javascript?

    I also second the request for random ordered images.

    I also think it would be great to be able to make the captions into links relative to the images – if that makes sense.

    Thanks!!

    ·

  99. Basti Author Editor

    Hi. Thanks for that plugin – I’ve already thought about making something similar myself but you saved me a lot of time. I appreciate that. Thanks – thanks – thanks.
    I embedded the plugin in a wordpress-site and it looks really great.
    There’s just one little problem: When I load a new page, sometimes the background is black for a second – I think it’s a loading issue.
    The problem occurs only sometimes, I don’t know why. I’ve only one image in my #supersize – div, so it should be in the cache. The thing is, that i’ve seen that it can work, changing a page and the background stays static, but sometimes it’s reloading.

    ·

  100. Basti Author Editor

    OK – I just figured something out that works for me – it is not tested in detail, if I find a bug, I will tell you.
    I’ve not overviewed the whole code, I guess that it could be that this will break the slideshow.
    Around line 19:
    jQuery(window).bind("load", function(){jQuery('#loading').hide();//jQuery('#supersize').fadeIn('slow');
    (I commented out the third line shown above.)

    Around line 133:
    //jQuery(‘#supersize’).hide();
    I commented out the line shown above.

    As I mentioned, this works for me and may be pretty dirty. When I’ve got the time I’ll read the code and try to understand it in detail so please, dear developers, excuse this dirty modification – I hope this will help others having the same problem, though.

    ·

  101. mkyrk Author Editor

    Very nice…
    i like, but i have a problem, Can disable the image links for the slides?
    to use only

    ·

  102. betamakz Author Editor

    I have integrated with WordPress and an issue appears in nextSlide on line 188. I get the JS error ‘$ is undefined’ happening on the slide_interval.

    erow80, you had some wordpress integration issues. Would you mind sharing? Maybe I’m down the same path.

    ·

  103. Amy Ling Author Editor

    I went and made an extra div on the left side about 300px wide. It therefore pushed the slideshow over by 300px just how I want it to be. However, is there a way I can make the slidecontent fit perfectly on the screen without having to scroll horizontally?

    ·

  104. Amy Ling Author Editor

    Nevermind…I actually got it to work. =)

    ·

  105. Mememe Author Editor

    Is there anyone who have had succes with this in WordPress and like to share the technique?? :)

    ·

  106. 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

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

    /div>
    /a>

    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 functions).

    Thanks,
    Mahmood

    ·

  107. Sharlene Author Editor

    This is a fantastic script. I’ll be using it on this site, but I’m having a weird problem that I don’t see happening on other sites…

    The buttons for the navigation don’t show till you roll over them.

    - I tried using small images thinking it might be a loading size issue.
    - I tried using custom nav images.

    Anybody else have that problem?

    ·

  108. torio Author Editor

    this is exactly what i was lookin for!

    can anybody provide a tutorial how to use it in wordpress?

    thanks in advance!!!

    ·

  109. Rob Author Editor

    Hey,

    Was anyone able to make the navigation – next and prev buttons still work when the slide show is paused? If so, care to share?

    Ive tried but cant seem to make it work properly.

    Thanks

    R

    ·

  110. Annica Author Editor

    I would love to use this on my blog. I’ve created a template that uses Supersize but the jQuery seems to “collide” with my lightbox-plugin (also jQuery). Is there a sollution for this?
    .-= Annica´s last post ..Nytt tema =-.

    ·

  111. zander Author Editor

    Hi mememe,

    I got the effect to work as a wordpress background (its not finished yet, but you can see it at here

    I used this technique to ensure the content scrolls on large pages.

    cheers.

    ·

  112. zander Author Editor

    While I’m here, does anyone know a way to add a noscript alternative to jquery to kick in in the absence of no javascript.

    thanks

    ·

  113. Mathijs Author Editor

    Hello,

    I have a very urgent problem. I’m building a website for a client (see url: http://www.restaurant-visscherie- brugge.be) and it works fine, but in IE7 (and only in IE7) it only shows the first 2 images of 3, on the homepage that is. Also, the content in #topmenucontainer is only being showed the moment there is no picture (so after the second picture or when the fade happens for a millisecond).

    Can you please help me?

    ·

  114. zander Author Editor

    Hi Mathjis
    I see all three images when I follow your link. I don’t really understand the second problem, but it sounds like a z-index issue, try cranking up the z-index.

    On another not, I noticed you’ve changed the animation effect so the image disappears before the new image fades in… how?!

    ·

  115. Mathijs Author Editor

    Are you sure you used IE7? Because in IE7 it really ONLY shows the first two.. Hm.. About the z-index; that’s the strange part. I use z-index: 100; with position: absolute. It should be working..

    About the fade, i have no clue actually. I just use transition: 1.

    ·

  116. zander Author Editor

    I think its something to do with the image size – for supersized to work properly all source images need to be exactly the same size, that image is different dimensions to the other 2.

    ·

  117. Mathijs Author Editor

    Nope, i made sure all the images were the same size, but that doesn’t help..

    ·

  118. Mathijs Author Editor

    Anyone else have a clue? I really need this fixed..

    ·

  119. Bim Author Editor

    So what should the minimum image size? What happens if the image is much smaller than a viewers screen? Will the image distort? Sorry if someone else has commented about this, I haven’t read all the comments. Thank you.

    ·

  120. Pedro Marques Author Editor

    Hi.
    Nice script.
    I’m using it mainly with only one image, just to make the page background adjust properly.
    Saddly, you removed the minsize property in this new version, is there a way we can have it back?

    Also, a method so we could target the slideshow to a specific image would be welcome.

    Thanks.

    ·

  121. Godo. Author Editor

    Hi zander, you can help me to work with this plugin on wp?
    sorry for my english.
    I have included in the header.php file links to. js needed to supersized, also included the CSS … but does not work. I checked the pictures … if you have any idea how to resolve this problem, I would greatly appreciate

    ·

  122. heinz Author Editor

    Hi,

    i would like to set a fullscreen background to a website i’m designing. i don’t need slides, transitions, etc., just a fullscreen image. so is it possible to add some content on top and also add a dotted pattern like this: http://www.basjanader.com/ (i need an image, not a movie)

    ·

  123. Mathijs Author Editor

    Hello,

    I case anyone would like to know how i fixed the IE7 problem. I set transition to ’0′.. Seems to have fixed it

    ·

  124. Esol Esek Author Editor

    Hi, great stuff, just what I was looking for. However, it takes forever to load more than 40-50 pictures. I also don’t understand the need to reprocess vertical oriented pics so that they match horizontals, otherwise they get stretched. I know pshop had this covered (although they have since ruined their slide show functions in CS4 for some mindboggling reason), maybe there’s someway to merge that code in there.
    Also it would be nice if the nav bar was transparent, so it didnt block so much of the lower part of the pic. Maybe I’m missing the resolution of these issues, but they are rather serious ones.

    ·

  125. Michael Dunn Author Editor

    This script has really made me happy, so thanks very much.

    I would like to know if it is possible to make the transition smoother? And also, as the images scale what would be the recommended image size? Currently I am using images that are 1350x900px but even at this size they can look a bit pixelated on larger screens. Any thoughts?

    Take a look:
    http://www.oneplusonecreative.co.uk/sunrise

    Thanks,
    Mike Dunn.

    ·

  126. Spike Silvernail Author Editor

    Love the script. It was the best looking one on the Smashing Mag article. Great job.

    I have a small issue with Firefox (Win/Mac 3.5.x)… The background pic is shifted about 350px to the right. IE (7/8) and Safari display the background correctly. Any ideas?

    ·

  127. Peter Author Editor

    really nice work guys. maith tú

    ·

  128. Anthony Author Editor

    I am loving this. Thanks for the work that went into it!
    I have a question and see that no one else has asked yet. So I’m thinking that I just missed something?
    I am using 1280 by 960 images and when I leave the css the same as yours for the div: SUPERSIZE IMG:
    #supersize img, #supersize a{
    height:100%;
    width:100%;
    position:fixed;
    z-index: 0;
    }

    My images stay stuck way over to the right of the page and doesn’t fill up the screen.
    I changed the position to relative and then the first picture loads up perfect and fills the screen. When it comes time to cycle to the next photo though, the first picture stays on screen and doesn’t change to the next photo. The next photo’s title does change though. Does anyone have any ideas why this is happening?

    ·

  129. Amy Author Editor

    @ Anthony-

    I had the same problem as you as well. I’m working on trying to figure it out myself.

    So far i got them to cycle through, however, the images are not corresponding to the image titles. GrrrR.

    http://www.amyling.com (just click on any of the nav)

    ·

  130. Anthony Author Editor

    Thanks amy,
    I will respond back here if I can figure out what the problem is.
    The gallery that I am trying to get working is here:
    http://www.preeminentproductions.com/hires.php

    ·

  131. Amy Author Editor

    @ Anthony-

    I realized after messing with it again that my issue that your having was based on the CSS. At first I thought it was because I had placed all the css and js files into different folders not on root but that wasn’t the case. So I had to step back through it one step at a time till I figured out it was my CSS. I didn’t pinpoint which part I had messed up on though. So if you customized the CSS on yours, might want to see if its that.

    ·

  132. Anthony Author Editor

    Thanks! Yeah, I did change it some, so I will go through it again.

    ·

  133. Anthony Author Editor

    Figured it out! I forgot to add (Top:0; Left:0;) for the position! Thanks again for the work that went into this. What a beautiful plugin!

    ·

  134. Erik Author Editor

    I am using this on a website I am building, slightly modified. I just want it to have 1 image for the background, not a slideshow.

    I have it working, I set the z-index’s for the background styles to -5, -4, -3 and then have the rest of my containers on my page set to a z-index of 3. I have messed around with this a bit, but the problem is: The background works fine, my content all appears on top of it, but I can’t click any links or select any text.

    So, my site appears visually correct, but I can’t click any of my links or interact with the page at all. I know there’s something wrong with my code, but I can’t figure out what.

    My site is at: http://www.hobsonchiro.com

    ·

  135. Erik Author Editor

    I’m responding to my own post:

    Discovered that all the divs that I want on top not only need a high Z-index, but also to be set to position:relative.

    Once I did that, everything inside these divs works fine, only the main outer container divs needed the z-inxed and relative setting for all the stuff inside to work.

    ·

  136. Tommaso Author Editor

    hi! i wanted to thank you for this great slideshow…

    i was wondering if there is a way to refresh the page after the last slide… so that if i add images it automatically updates….
    something like

    “javascript:location.reload(true)”

    but i haven’t figured out where to put the code without messing the whole thing…
    thanks in advance.
    tommaso

    ·

  137. Mark Author Editor

    I was also experiencing sluggish performance problems in IE7 when using more than a dozen images–the whole thing slows as you get further through the loop. It seems to be a quirk where IE7′s rendering engine tries to redraw ALL the images for each transition.

    Anyway, it’s a pretty quick fix. In functions prevslide() and nextslide(), replace

    $(‘.prevslide’).removeClass(‘prevslide’);

    with

    $(‘.prevslide’).css({‘display’:’none’}).removeClass(‘prevslide’);

    This should work for the fade transition (haven’t tested the others).

    ·

  138. Thomas Simpfendoerfer Author Editor

    unfortunately it looks like supersized.2.0.js is not working in Safari 3.0.4 on Mac.

    At least the demo http://buildinternet.com/project/supersized/default.php hangs with the loading bar spinning.

    ·

  139. Tony Author Editor

    Hi, Great Plugin,
    Is it possible to include a maximum size attribute.
    Regards
    Tony

    ·

  140. Thomas Author Editor

    This plugin is great. Does anyone know how I would go about modifiying it with thumbnails to navigate the background a little further than just previous/next? I would love to add about 5 thumbnails to swap the background onClick.

    ·

  141. Thomas Author Editor

    Looks like the SuperBGImage tweeks adds what I need, although it is not very well explained, thanks

    ·

  142. James Author Editor

    Hello. LOVE the plugin; but was wondering if anyone ever resolved Michael’s issue…

    “I’m having an issue in version 6, 7, and 8 of IE. It’s is loading and playing the fade animation fine for the first two images (there are 10 in total) however after the second image, the screen goes entirely white and remains that way without changing.”

    I am having the very same problem, only I am cycling 5 images.

    Any thoughts? Any help is appreciated.

    Thanks.

    ·

  143. Mike Author Editor

    I had sent two comments to this forum a few days ago and they are now gone. What happened to them? It was under the name macmizer?

    ·

  144. Sam Dunn Author Editor

    @James
    I’m sorry I have not experienced this issue in my tests, so I don’t have any fix suggestions.

    @Mike
    Your original comments were on the version 1 post of Supersized. In order to shift the image down from the top of the browser, I suggest you play around with the CSS “top” attribute.

    ·

  145. Manic Author Editor

    Fade effect is smooth only in Chrome, on other browsers it flickers. Also, slide effects are very fast and I cannot seem to slow them down. Can this be fixed?

    ·

  146. Manic Author Editor

    You can see here:
    http://test.manicsite.com/

    Sometime it does not show images, just loading animation.
    I load images using ajax load:
    $(“#supersize”).load(“Ajax/HomeImages.ashx”, null, function() { $(“#supersize”).supersized(); });

    ·

  147. Colin Author Editor

    @Sam Dunn

    Supersized 2.0 is pretty awesome man. Thank you very much for this functionality. It was pretty straightforward, although fiddling around with the code to add it to a page with a bunch of elements took some time, but that’s normal. Great stuff here.

    I have a general most likely stupid question. I have a project in which when the background image changes I would like another div with some text to change as well. Is there some way I could connect that div with the background image transition and add code for text similar to adding for multiple background images? I was maybe going to try and just add a basic element fading jquery script with the same exact interval, but I am worried that it will not match even with the same intervals since it would be different elements / scripts.

    Also, I thought about adding said text to the title attribute and changing positioning with CSS, but I think the text I will be using is way too long, plus it’s laid out like header>text for every snippet.

    Any insight on the above issue is greatly appreciated.

    Thanks again for the awesome code.

    ·

  148. Colin Author Editor

    Replying to myself,

    So… I went ahead and added the text to the title attribute, pulled out div#slidecaption from div#content, and put it into my footer div. I then added some CSS for positioning and whalla it works fine.

    The only thing is I feel like this is such a sloppy way of doing it and hate to use the title attrib for this purpose. So… still, if anyone else knows how to attach a separate div to this timeline then feel free to share.

    ·

  149. Colin Author Editor

    Is there a way to get this to run smooth in firefox 3.5? It seems to run horrible windowed and if you maximize your window get ready for some lag.

    Is performance dependant on your computer specs or the size of your source images or does it just not run well in firefox?

    I’ve tried with various image sizes and ratios and it seems to yield the same results.

    ·

  150. Pete Author Editor

    Hi Sam,

    Great plugin!

    Is there an easy way to replace the arrows with numbers referring to the image.

    So have 1 | 2 | 3 and have these links to the first, second and 3rd images?

    Thank you.

    ·

  151. Pete Author Editor

    Also. Quick 2nd question :)
    How do i stop the slideshow but allow the navigation?

    ·

  152. tinkdiff Author Editor

    from Rics replied above [about the thumbnails navigation]
    how to target the thumbnails to call the images ?
    I try to create the Unordered list to show the Thumbnails

    [code]



    [/code]

    please show me how to target with this nav ?

    ·

  153. tinkdiff Author Editor

    from Rics replied above [about the thumbnails navigation]
    how to target the thumbnails to call the images ?
    I try to create the Unordered list to show the Thumbnails



    please show me how to target with this nav ?

    ·

  154. flor Author Editor

    hello sam! before anything, thank you very much to share your work! amazing and very usefull! thanks again

    I write you beacause I want to add a menu with the toogle from jquery and when I insert this to make the toogle work:

    the supersized doesnt work anymore…any help please???

    thankssss flor

    ·

  155. flor Author Editor

    sam, i see it perfect in local, buit nothing online!! could you please help me…? this is the link: http://www.conceptovisualweb.com/delcerro/dp/home2.html

    ·

  156. Fernando Author Editor

    Hi! Great script! I was wondering if it is possible to adapt it to slide images left to right ç8like the coda slider but fullscreen) Is it possible at all in jquery? where should i start looking?

    thanks and keep up the good work!

    ·

  157. Steven Author Editor

    I am trying to use this and the images just won’t load! It’s driving me crazy cause its just not that difficult (it seems like at least.). I’m probably doing something lame. Any help would be appreciated.

    Here’s what I keep getting:
    http://www.daybreakwebdesign.com/informstudio/defaultinform.php

    ·

  158. Jarek Author Editor

    Hi Sam,
    First of all, thank you very much for such a wonderful code. I have implemented it to my web site: baranik.com.
    Also I have made some changes to tailor it to my needs. I have added IPTC data support for description so do not need to tape the “title” manually as is now taken straight from image’s caption field but of course can be taken from any others.
    Also added some overlay fading and hover effects to the layout.
    Best regards,
    Jarek

    ·

  159. sabweb Author Editor

    Would it be possible to integrate a progress bar as opposed to the loading .gif?

    ·

  160. alexia Author Editor

    ciao!
    the script is wonderful! Many thanks Sam! I tried to put it in my page .. but there was a problem of transition on the photos, some photos overlap for a few seconds, be on what caused the problem?

    http://www.trattoriarosa.com/beta2/

    alexia

    ·

  161. Stefan Author Editor

    hi sam,

    it is also possible the images centered horizontally?

    stefan

    ·

  162. 40 MACC Author Editor

    SAM, is it possible to create just 1 image automatically FULL SCREEN? Like, upon going to a web site, I want to make the OME PAGE a Full Screen image. Is there any way to do this? If so, can you Email me at: mr40macc1@yaoo.com I doubt you check these comments judging from the last time you commented. But, if you can help me, that would be great. Also, is there a way to have other pictures on the slide show you created and put them on a web site for family? Thank-you. (O_-)

    ·

  163. Nicolas Author Editor

    does anyone know if this exists for MooTools?

    ·

  164. lumid Author Editor

    hi,
    i tried myself, but can’t get it to work;
    i also would be interessted in further option for random images.
    if somebody can help, i would appriciate it a lot. thanks.

    ·

  165. Mike Author Editor

    can anyone tell me how i could load the content using ajax so i can use lots of images with little loading up front?

    ·

  166. The Frosty Author Editor

    Very nice plugin. I’m wondering if instead of grabbing the image from the img tag, could this be altered to grab the anchor a attribute?

    Reason being, I’m trying to implement this with the flickr API and jQuery gallery..

    ·

  167. Charles Author Editor

    This looks great, and I managed to get it working on it’s own. But I’d like to implement it to provide a fullscreen background for a WordPress site and I can’t seem to get it to jive. Any tips out there?

    ·

  168. Justin Author Editor

    Hello Sam and All

    This is a great script. I have a question, which I am hoping is easy to answer. How would one be able to have the slideshow only play once, and then pause?

    We are using it behind an SWF, and it slows things down with the SWF animations. So, we would like to use the Javascript as an intro, then turn its cycling properties off but retain a freeze of the final image in fullscreen state.

    Any advice would be helpful.

    Thank you

    Justin

    ·

  169. Justin Author Editor

    I just asked a question above, but thought I would elaborate: how would one use Get or Post to pass code out of an SWF to pause the slideshow?

    thanks
    Justin

    ·

  170. Giancarlo Diana Author Editor

    Does Anyone know, if there is a module or an integration with drupal of this nice jquery plugin?

    ·

  171. Joop Vos Author Editor

    Thanks for this great script. Supersized (without nav) is working great on the homepage of this site. But not in IE6 (XP)! Can it be done?

    ·

    • Zach Dunn Author Editor

      @Joop

      I realize that it’s not always within our control, but IE6 is all but extinct with modern web design support. Even Google dropped support for it. Given the semi-advanced nature of the results, I don’t think it would be worth the time spent updating in order to maintain compatibility.

      ·

  172. lungboy Author Editor

    I’ve been testing this script in conjunction with Soh Tanaka’s “Sexy Drop Down Menu” script. I’ve noticed that when I setup a slideshow performance (of the drop down menu) degrades considerably in IE8 (FF3.x is fine). Further it seems when I remove all but one slideshow image perfomance increases. It seems that IE8 has a different way of handling the precaching of images via jQuery — which then interferes with the performance of the dropdown menu. Any ideas on how to resolve this?

    ·

  173. tony Author Editor

    Quick question, any way to slide in an html page? Aside from images looking to slide in flash movies. Or would that best be handled with something like jquery pop up box?

    thanks.

    ·

  174. Christian Schartner Author Editor

    Great script,
    i’m looking for one feature, i’d like to put a link on the descriptions (links to my gallery).
    Does anybody know how to solve this?

    thanks.

    ·

  175. HHBeachboy Author Editor

    Terrific script. Saved me a ton of time getting up this splash page at: JohnRudolf7Summits.com
    Thanks

    ·

  176. HHBeachboy Author Editor

    OOPS, above link fixed.

    Terrific script. Saved me a ton of time getting up this splash page at:
    Thanks

    ·

  177. Xef Ned Author Editor

    Mahmood, do you have a link to your working code? I tried to implement it but I think something is getting stripped out by the comment feature here. I got the first photo to display a caption, but all the remaining photos showed the same caption. Thanks.

    ·

  178. Christian Schartner Author Editor

    by the way, is there already a feature for random?

    ·

  179. Danni Author Editor

    I notice if i set the slide_interval greater or equals to 5000 the first caption is missing.

    ·

  180. Dean Author Editor

    Hi. I have made a site using this plug + Indexhibit. Is there a way removing the function of clicking on an image which then opens in a new window?
    Thank you.

    ·

  181. largowin Author Editor

    Thank you for this great work! I want to know if it is possible to decrease the time of display of all image? For my project, I need to see one image and quickly fade it for another one.

    I tried to change slide_interval: 5000 but nothing happened

    ·

  182. Steve Author Editor

    Thank you for the great work!

    I’d like to know if it’s possible to put this into a container. Say I want to have a layer with 960px width with a resizeable background.

    Thank you.

    ·

  183. Peter S Author Editor

    Hi
    This looks great, but when I try and install it with the latest version of WP, it tells me it cannot be activated because:
    “The plugin does not have a valid header.”
    What could be going wrong here?
    Thanks in advance for any help:
    Peter

    ·

  184. kahtan Author Editor

    Is it possible to use it on a blog? How can I add the code to the html template?
    on my blog I have one image and I would like to add the slide show?

    ·

  185. Dnlees Author Editor

    I am a complete novice (when it comes to Jquery & plugins) but I’m desparate to get this onto my site – is there an idiots guide?

    ·

  186. kahtan Author Editor

    I modified the code to fit it on blogspot but it is not full screen.
    Can anyone help please?!

    ·

  187. Harold Author Editor

    hi,
    many thanks for things wonderful plugin…
    I tried to use it on a new project, but have a problem with loading al the images. It just loads the last image.
    I can’t find the problem.
    Anyone who can help here?

    ·

  188. Shaun Author Editor

    I’ve been trying to get this running, but have some fairly large images (the highest page load atm is 17Mb of images!). It seems to handle this just fine, but with very sluggish slide transitions.

    It appears this script is simply keeping all the images on the screen in the same place, and raising the z-index of the active image. I’ve found I can make this a much lighter load by adding visibility:hidden to #supersized a,img, and visibility:visible to .prevslide and .activeslide.

    Keeping the previous slide visible seems to be necessary for transitions, but getting the rest of the images off the screen seems to make a huge difference.

    ·

  189. ozgur Author Editor

    is it a way to put all the thumbnails in scrolling view when mouse over (pause slideshow) happens, so that user can select the thumbnail and go that image.

    great work.

    ·

  190. clem Author Editor

    how do i get the currently loaded image?

    thanks.

    ·

  191. Peter Author Editor

    Demos are not working!!

    ·

  192. Mattiz Author Editor

    First of all: excellent script! I have built the script into my WordPress theme. I also would like to have the possibility of a scrollbar. Have you found a solution for this yet?

    ·

  193. Jonathan Horst Author Editor

    Hello,

    I really like script but I don’t have the experience to get it to work. If anyone could give me some pointers or know where I can find the answers I would really appreciate it.

    ·

  194. Jonathan Horst Author Editor

    My previous post was too vague. I don’t know how to integrate the scripts into my website.

    ·

  195. Lathan Author Editor

    Does this work with jQuerey 1.4.2?

    ·

  196. Iyer Author Editor

    Hi, great work guys ! I am a beginner working with joomla 1.5.I would want to build a website using this plugin.Could you please help me with the steps in using this plugin @ joomla.

    ·

  197. Lee Boyce Author Editor

    Great & useful piece of work.

    I’ve had a couple of issues, works fine in FF (for both mac and windows). Chrome lags a little on the mac, but usually fine on windows.

    IE…well, transitions don’t seem to be working, and it is very glitchy. (there are only 10 images, each under 200k and dimensions never exceed 1024px wide) If you have any idea how i can stop this i’d really appreciate it.

    I managed to make some edits that change the colour of the text on top of the images so that it is always readable – so i’m really happy with it, i appreciate and applaud your work.
    Keep it up,
    Thanks!

    ·

  198. Jeremy@ chicago web development Author Editor

    I think the navigation is much better now in this version of Supersized. Thanks for sharing the updates.

    ·

  199. Ivan Author Editor

    Overlaying a div on top of supersized possible? Please advice me how? thx

    ·

  200. Phil Author Editor

    hi, I think this is really great!! i tried it on an old mac and it got stuck at the loading page. is there anyway around that? or should i just forget old mac users?

    ·

  201. Seldimi Author Editor

    Hello
    I tried to combine jCarousel with supersized 2 as supersized the bg of the page and the carousel for page need.. the problem is that both working on IE/FF but not in Safari/Chrome… without superisized everything is working ok.. something messing up.. any ideas/hints?

    ·

  202. Seldimi Author Editor

    I found a simple solution myself… supersized and jCarousel is messed because of jQuery document ready and safari/moz different implementation.. you need to delay the process (jQuery ticket #5521)

    ·

  203. Shahzad Author Editor

    Wonder full script.. nice work

    i loved it and i am already using it
    http://www.tasmeeminteractive.com/AAM/index.php

    1 question if you see in my link on right i am displaying name of the image a little description

    name we can get from alt tag,there is any way where we can also pass description so that it can also change with name and picture???

    ·

  204. priya Author Editor

    i cant view the images in Internet explorer…It perfectly Works in Mozilla
    Plz can i know the reason…

    ·

  205. Danilo Author Editor

    One doubt, is there any way to let only WIDTH 100%, but with the height defined with PX?

    ·

  206. Brian Coult Author Editor

    Ive used this script for a client ive just put live and encorporated it into ExpressionEngine too so the client has full control over which images to use, and if it should be a single image or mulitple images etc.. works really well site is http://www.mediamake.co.uk

    ·

  207. sanshuman Author Editor

    how do you actually install this.. from joomla 1.5 extension manager’s install menu it gives an error “Error! Could not find an XML setup file in the package.”
    Is this to be installed with some bespoke method?

    ·

    • Zach Dunn Author Editor

      @sanshuman

      This is not a Joomla specific plugin.

      ·

  208. sanshuman Author Editor

    Thank you for quick response! This is in fact exactly what i have been looking for – its a great thing!
    Can one not use it in joomla at all? If one can, what would the way to integrate it?
    Thanks again

    ·

  209. Chiara Author Editor

    The slideshow is great!
    Is there any way I can make it run just one time without the loop?
    Thanks in advance

    ·

  210. Tim Author Editor

    Can this plugin be used on a commercial website? or does it need a licence? as i have a commercial site where this plugin would be really nice to have.

    Cheers
    T

    ·

  211. Traci Author Editor

    Beautiful! Thanks for sharing!

    Is there a way to control once all the images have been displayed?

    I would love to use this as a way to display a portfolio. There are several categories and I would like to be able to click a link to go to the page that starts this slideshow, then when all the images have been displayed, automatically go back to the list page so another category can be selected.

    Would this be possible?

    Or at least a way to stop it on the last slide so it doesn’t continue to loop?

    ·

  212. Karen Author Editor

    I can’t for the life of me get my navigation buttons to “stick” – they always disappear on rollover – any suggestions to try would be HUGELY appreciated!

    ·

  213. Karen Author Editor

    After way too much time banging my head against the wall, I realized I had to change all the paths in the script to be full paths to the navigation images, not relative paths- in case someone else runs into this problem!

    ·

  214. mexx Author Editor

    hi! thanks for the great plugin!
    i have one question — how can i slow down fading out of prevslide before fading in nextslide?
    thanks for advance!

    ·

  215. matthias Author Editor

    can anyone help me with integrating the script to my wordpress!!!! wolud be sooo nice!!

    kindest regards from munich germany an thumbs up for this blasting script!!

    ·

  216. matthias Author Editor

    now it WORKS but just on firefox!! fuck hahah . anyone knows why?

    and the page is really slow now . i thinks somesthing is wrong

    ·

  217. Phil Draper Author Editor

    Hi Guys.

    I an see I am not ther first to discover this image slider, however nice work guys. Very well put together and smooth.

    ·

  218. Nick Butler Author Editor

    Hi Mat,

    got to say that I LOVE the plugin, has made my life a lot easier using something so well written and easy to use.

    I just used it ona friends 1 page site (http://www.tamburlaine.co.uk) and it looks great, but he’s a really fussy guy, and is asking if there is anyway to make the image fade to black before the next image appears (rather than cross fading)?

    If you could point me in the right direction, it would be very very much appreciated.

    Anyway, thanks for a great script, I look forward to more revisions etc

    Cheers,

    Nick

    ·

  219. Kelly Bill Author Editor

    I kinda fall in love with supersize, so I have been building a slideshow for my new site as prelude to lauching. With the last Java update Supersize does not load in the latest version of firefox or IE8. I’m I missing something? ………..Also is there a way to ease the transition from one image to the next so that they slowly fade into the next at slower rate (almost to the point where one does not realize change of image is taking place)

    Thanks in advance for any suggestions.

    ·

  220. Johannes Author Editor

    Hi,

    can anybody please tell me how to STOP the slideshow after initializing (no autostart)?

    I tried $(‘#pauseplay’).click(); but it doesn’t work.

    Thanks,
    Johannes

    ·

  221. Eymen Author Editor

    Hello,

    First of all great plugin thanks!!!

    Unfortunately I can’t figure out something:
    Slide left transition animates only the “nextslide”, I mean “prevslide” remains still. What I would like is to animate both of them.
    Can someone help me with that?

    ·

  222. fvrs Author Editor

    anybody use this joombla yet? noob seeks help

    ·

  223. 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

    ·

  224. Lucas Author Editor

    Hi Sam, amazing work!

    my question: is there a way to assign the computer arrow keys to control the prev next slide?

    Thanks

    ·

  225. kaveh Author Editor

    i love jquery.good job.very nice .but i think fullscreen photo gallery isnt practical.how we can design a non fullscreen photo gallery for our website ?

    ·

  226. Lucas Author Editor

    Add keyboard control to main script:

    $(document).keydown(function(e) {
    switch(e.keyCode) {
    // User pressed “right” arrow
    case 39:
    return nextslide();
    break;
    // User pressed “LEFT” arrow
    case 37:
    return prevslide();
    break;

    }
    });

    Can’t get break/pause (case 19) to work yet…

    ·

  227. gregory Author Editor

    How to enable nocrop mode

    Hello, I wanted functions just like supersized provides but I want the image to be as large as it can be without being cropped, allowing for background colour to fill in the areas that must remain due to the difference between browser aspect ratio and image aspect ratio, like letterbox on 4:3 screens. This can be simply achieved by changing the “>” to “ ratio){

    It might be nice to make this a parameter called “crop” with default on.

    Great functionality too Sam, thank you.

    gregory

    ·

  228. gregory Author Editor

    Hmmm punctuation not escaped in comments , my bad, please read as:

    How to enable nocrop mode

    Hello, I wanted functions just like supersized provides but I want the image to be as large as it can be without being cropped, allowing for background colour to fill in the areas that must remain due to the difference between browser aspect ratio and image aspect ratio, just like letterbox on 4:3 screens. This can be simply achieved by changing the greater than symbol to a less than symbol in line 152 of supersized.2.0.js

    It might be nice to make this a parameter called “crop” with default on.

    Great functionality too Mr Dunn, thank you.

    gregory

    ·

  229. Mike Author Editor

    Hi, Love the plugin and want to know peoples expereince of using wordpress with this plugin

    ·

  230. Anders Author Editor

    Hello Sam
    Nice script you have here.

    I see that there are quite a few questions here about turning the slideshow off but maintaining the manual controls for next/prev.

    You answered like this on May 21st, 2009:

    “I simply added an if statement in the JS file to only allow navigation with slideshow activated. By removing this if statement, you should be able to accomplish your goal.”

    - – -

    I have tried removing the if statements and I do see that the controls now are active when the slideshow is paused but there are problems…

    Pausing the slideshow and clicking the next button will also start the slideshow again. But in this case the play button is not switched over to a pause button. The slideshow is playing and the play button shows the play symbol. Not good.

    I could not see the next image shift either. The next button became active but did not change the “dull” image upon hover.

    Could you have a look at this please?

    ·

  231. Anders Author Editor

    I also have a question about the required image links. In your example the images are linked to another web page. I don’t want that in my site.

    I’ve added generic links “#” but see one problem. The visitor will see a hand symbol saying “click here”.

    This is commonly used in slideshows for “click here to see next image”.

    Could this be achieved somehow? I think visitors would be annoyed otherwise.

    Or could the hand symbol be hidden?

    ·

  232. laurent Quet Author Editor

    Thank you for the script, it’s exactly what I need.
    Is it possible to remove the fade in when you load the web page ?

    ·

  233. ena Author Editor

    Hello,
    First of all, a big thank you for your work!
    I have a simple question. I would like to add borders (or margins) to the background pictures, so that i have like 20px of white border around the whole thing for example. I tried to add margins or borders into the css for the pictures (img), but it doesn’t work, i can only have one on the left top… Thank you for helping me with this!

    ·

  234. Jean-Jacques GAUDEL Author Editor

    I am experimenting with your great script on this test page, and it works great in Firefox and Netscape, but in Safari, Chrome and AOL, the slide appears way up half off screen. Opera cannot load the page at all.Is there anything I can do to make it work at least in Safari, as I am looking at your script as a full screen alternative to my FLASH pages that don’t work on the i-Pod and i-Pad. Please help. Thanks.
    JJ

    ·

  235. Jean-Jacques GAUDEL Author Editor

    It is me again, it is my first time, and I had assumed the link I typed in the Web site box would be posted. It was not, so here is the link to the page I was talking about:
    http://homepage.mac.com/gaudel/supersized2/goldsmith2.php.xhtml

    ·

  236. Author Editor

    @Anders

    Css fix

    #supersize a { cursor: default; }

    ·

  237. Christina Author Editor

    For those wishing to have the navigation buttons continue to function when the slideshow is turned off, the following solution seems to be working for me. I have not tested this extensively, but so far no glitches.

    Replace the appropriate code section with the following:

    //Slide Navigation
    $(‘#nextslide’).click(function() {
    //if($.paused) return false;
    if($.inAnimation) return false;
    //clearInterval(slideshow_interval);
    nextslide();
    //slideshow_interval = setInterval(nextslide, options.slide_interval);
    return false;
    });
    $(‘#prevslide’).click(function() {
    //if($.paused) return false;
    if($.inAnimation) return false;
    //clearInterval(slideshow_interval);
    prevslide();
    //slideshow_interval = setInterval(nextslide, options.slide_interval);
    return false;
    });

    @Anders
    had the same problem with the slideshow restarting every time the next button was clicked, and this modification solved that for me too.

    Also, I commented out the code in the beginning that checks if the slideshow was activated or not, and it fixed my poor load time:

    //Slideshow
    //if (options.slideshow == 1){

    Don’t forget to remove the closing tag at the bottom as well.

    ·

  238. Marcin Author Editor

    Hi.
    One question. As I understand “Supersized” is meant to fill browser window. Is there any chance to set it up the way that it always show whole picture? this would mean some black borders of course. I need a solution for photography site and all plugins or templates I’ve found have predefined size of a slideshow – which means that it is either too big or too small depending on screen.
    I currently use flash – see http://qpixels.com
    It resizes very well but I am sick of flash and it’s limitations.
    Thanks in advance for help
    Marcin

    ·

  239. Jan Author Editor

    Great plug-inn, I’m very new to this, but I kind of get the feeling of it already.
    @Marcin, what type of flashplug-inn is that? I’ve seen it before and it’s exactly the reason I’m looking to do the same kind of thing ;) It’s pretty much everything I need!
    @Christina, thanks for your part. It didn’t work when I copty-pasted it, but after adjusting my file while looking at your code it worked great!
    Now I’m looking for a way to make the navigation bar see-trough…more or less, or a different color.
    Thanks people!
    Jan

    ·

  240. Jan Author Editor

    Addition:
    @Christina, have you also figured out how the buttons keep working while in pause? I mean the function where the next or previous button lights up. That part doesn’t work with me yet.
    Thanks

    ·

  241. Jon Yeager Author Editor

    Hey Sam,

    It really wouldn’t take much to turn this into a gallery. I don’t have the knowledge to do it, but to add a fixed position layer with thumbnails on top of this thing that would call specific images onclick couldn’t be that difficult… and it would turn this into a VERY sought-after script by Photographers and Graphic Designers for their portfolios.

    ·

  242. Christina Author Editor

    @Jan
    With the changes I posted, the slideshow next/prev buttons are working for me with the slideshow turned on and paused. I’m not sure why yours isn’t. :(

    ·

  243. Chuck Moran Author Editor

    Sam – great job!

    I have the same question @Austin did last year: “I noticed when I turned the slideshow off the navigation is disabled. Is there a way to turn the slideshow off while keeping the navigation active?” Your response was:

    “@Austin I simply added an if statement in the JS file to only allow navigation with slideshow activated. By removing this if statement, you should be able to accomplish your goal.”

    Not being great at JS, I’d appreciate it if you’d include the whole statement so I can delete it.

    Thanks again for a great script!

    Chuck

    Thanks!

    Chuck

    ·

  244. Jan Author Editor

    @Christina
    I’ll show you how far I am now. Got the invisible navigation bar etc ready as I like it.
    I’ve put a few low quality photos inside just to show.
    If I pause the slide-show, the next and previous buttons do work, but they don’t light up.
    Thanks for the input so far!
    http://www.actieinbeeld.nl/supersized/default.htm
    @Chuck, you can view the source code of my page ;)

    ·

  245. Christina Author Editor

    @Jan
    Try commenting out the if statement in the hover controls.

    $(‘#nextslide img’).hover(function() {
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/next-over.jpg”);
    }, function(){
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/next.jpg”);
    });
    $(‘#prevslide img’).hover(function() {
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/back-over.jpg”);
    }, function(){
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/back.jpg”);
    });

    ·

  246. Jan Author Editor

    @Christina
    You’re the best! Thanks a lot…now I can look at other things to change ;)

    ·

  247. Christina Author Editor

    I just realized my code included my own custom buttons. Here it is using defaults:
    $(‘#nextslide img’).hover(function() {
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/forward.gif”);
    }, function(){
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/forward_dull.gif”);
    });
    $(‘#prevslide img’).hover(function() {
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/back.gif”);
    }, function(){
    /*if($.paused == true) return false;*/
    $(this).attr(“src”, “images/back_dull.gif”);
    });

    ·

  248. Marcin Author Editor

    @Jan
    It is nothing programmed by me. Just a service provided by PhotoBiz.com
    Pretty but flash.

    ·

  249. Jan Author Editor

    @Marcin
    Thanks for your mail. I’m gonna skip that one since I don’t earn any money photographing and it’s quite expensive at photobiz.com…very cool though!
    Hopefully somebody makes a open source version of it someday ;)

    ·

  250. Chuck Moran Author Editor

    @Jan – thanks for the code – I tried it but unfortunately what I’m trying to have happen isn’t … my low-rez, messy-coded temp page is at http://widgetville.com/hyatt/index.php. With the slideshow turned on, I can see the Linda Parker link is trying to go to http://widgetville.com/hyatt/home.php but doesn’t when you click on it. On the other hand, http://widgetville.com/hyatt/home.php has the show turned off and that link works fine going to a black page at http://widgetville.com/hyatt/contact.php. That page also has the show turned off, and the link goes back to index.php just fine.

    I think I just need to remove the statement Sam mentioned – just don’t know where it is.

    I’d appreciate any assistance! Thanks a bunch!

    ·

  251. Chuck Moran Author Editor

    PS … the JS up there now is Sam’s original.

    ·

  252. Jan Author Editor

    @Chuck Moran
    No it isn’t. Every line between the /* and */ is disabled. You could also delete these lines if you’re sure you don’t need them in the future.
    If you apply the script from Christina, you’ll be fine.

    ·

  253. George Author Editor

    Very nice script! Congratulations but it works good only for 1024 x768 resolution screens. I tried using for 1280×960 res screens and the transition f.e. fade and slide – top were not as smooth as it was for 1024×768. Besides the width and height of my images do I need to change something else???

    Thank you for your help.

    ·

  254. Marcin Author Editor

    @Jan
    Looks like I’ve found answer to my question.
    To have always full image visible instead of having full window filled it is enough to change:
    if ((browserheight/browserwidth) > ratio){
    into
    if ((browserheight/browserwidth) < ratio){

    Now I just need someone who will write decent template for WP :)

    ·

  255. Chuck Moran Author Editor

    @Jan and @Christina,

    I appreciate your help, but I’m missing something
    here (as I mentioned, I’m not really familiar with JS yet).

    The code that I have installed is Sam’s original one that came with the download files. See http://widgetville.com/hyatt/supersized.2.0.js. I don’t see anything except the opening paragraph commented out. I tried the JS from Jan’s site and it didn’t work. I tinkered with the code in your message above, but to no avail.

    To make my Linda Parker link work on a page with the show turned on, Sam says:

    “@Austin I simply added an if statement in the JS file to only allow navigation with slideshow activated. By removing this if statement, you should be able to accomplish your goal.”

    If someone can copy and paste that specific statement into a message here, I would be extremely grateful – I don’t see where that statement is. Sorry to be a pest, but such are the limitations of JS newbie!

    TIA,

    Chuck

    ·

  256. michael Author Editor

    Is there anyway of influencing the smoothness of the transition that fades? – seems to be the only thing that needs improving on, I think the rest of the plug-in works well.

    ·

  257. Mike Author Editor

    Hi,
    I wondered if anyone could help, I want to load a gradient image on top of supersize with another instance of supersize, does anyone know how I could do this

    ·

  258. Chuck Moran Author Editor

    I found out what I was doing incorrectly. The issue wasn’t in the script (I confused things by misreading a post above) – it was in my HTML flow. Problem solved, all good now.

    Thanks!

    ·

  259. Karen Author Editor

    I am having a really hard time figuring out how to get this plugin to work on a page when there’s a header and a footer as well – I’ve played with the css a bit, as well as vertical centering, but it still seems to cut off a good portion of the images. Does anyone have an example they’d be willing to share where you’ve used this plugin in between full-width header and footer divs?

    ·

  260. marcus Author Editor

    Great script!

    Only prob i have is when loading 50+ images the site crashes. Any workaround for that guys? Anyone that has gotten the script to work with a ton of images?

    Thanks!

    ·

  261. brandon Author Editor

    Is there an easy way to turn autostart off? I keep trying to try different ways to stop it but when I get close it turns off the slideshow entirely or just doesn’t work. Has anyone done this?

    thanks!

    ·

  262. iFerchito Author Editor

    dear sam and zach, THANKS a lot! your work is fabulous!
    wish i could know about the licensing thing… may i use this pluggin for free? i mean, this tool could help me with a client of mine whos driving me crazy about his website with fullscreen pictures! thanks again. please take a look to my post :P

    ·

  263. Lars Author Editor

    Amazing work dude. I was looking for a code lik this for ages. And finally there you have it. It’s Master!!! I made this website with supersized http://www.sitback.nl/ok. It’s the final beta test. Looks like it will be online soon.

    ·

  264. Pino Volpe Author Editor

    Ehi! Hate that link on the images? Do this:



    and CSS:

    #supersize img, #supersize a{
    height:100%;
    width:100%;
    position:absolute;
    z-index: 0;
    cursor: default;
    }

    ·

  265. Jean-Jacques GAUDEL Author Editor

    I posted this question back on June 17, but got no answer. Can’t anybody help with this? I am experimenting with the script on this test page:
    http://homepage.mac.com/gaudel/supersized2/goldsmith2.php.xhtml
    It works great in Firefox and Netscape, but in Safari, Chrome and AOL, the slide appears way up half off screen. Opera cannot load the page at all.Is there anything I can do to make it work at least in Safari, as I am looking at this script as a full screen alternative to my FLASH pages that don’t work on the i-Pod and i-Pad. Please help. Thanks.
    JJ

    Jean-Jacques GAUDEL
    June 17th, 2010 at 7:19 PM

    It is me again, it is my first time, and I had assumed the link I typed in the Web site box would be posted. It was not, so here is the link to the page I was talking about:

    ·

  266. Carlos Author Editor

    I know this article was written a year ago, but I need some help. I am using the Supersized 2.0 plug in. Awesome plug in by the way. I am trying to add content where the img alt or title tag is. I am trying to add a thumbnail image, with a small caption. I added a div inside the “a” tag and changed some of the script from find.(‘img’).attr.(“title”) to .find(‘div.newContent’) . It cycles through the first time but when it recycles the images that div content disappears. Am I able to replace the image title attribute with the thumbnail image, a paragraph tag. Like I said, the first cycle is fine but then the rest of the cycles they disappear. Thanks in advance for the help. Admin guys, feel free to email me about this. I can send a screen shot of what I have now.
    Thanks

    ·

  267. erika Author Editor

    Hi- I have been trying to get this to work, and it does… until I add my art on top of it. I’m getting a weird black space on the right and the bottom. Help please! Here’s the test site: http://www.wolfeldesign.com/bigstar/indextest.html

    ·

  268. Chris Hayward Author Editor

    we have this up and running now at http://www.opacitydesign.com — works great, thanks!

    ·

  269. TheEdge Author Editor

    Hello,
    I found your script a few days ago and find it wonderful. I’ll probably be using it for my website.
    If by chance you’re working on an update, the one option that I would love is to randomize the order in which images are played.
    Bravo !

    ·

  270. marcus Author Editor

    For you guys wanting to display the first image directly after it has loaded i figured out an easy way of doing this.

    Simply change the (around line 17):

    $(window).bind(“load”, function(){

    to

    $(window).load(“load”, function(){

    If you for example have a large number of images to load this will make the first image display faster so the users dont have to wait so long if they are on slow Internet connections.

    There is probably a more efficient way to do this but this works well for me so far :)

    ·

  271. Peter Staud Author Editor

    Hi Sam,
    thanks for your great work, it really runs like hell!
    I just have one question:
    Is there a way to use the next and previous buttons when the animation is paused. I think this would be more useful if people like to click one pic after the other.
    All the best, Peter

    ·

  272. Melissa Author Editor

    hi,
    great stuff!

    but… I need help: I tried to turn the slideshow off, so that it just does not start on its own, when the site is opened. I changed “slideshow: 1;” to “slideshow: 0;”
    it was like before…

    Please help me as soon as possible! thx!

    ·

  273. Melissa Author Editor

    correction:
    I got it now, I had to change the number in the .php-file, too, not only in the .js
    But now, the forward-backward-buttons don’t work anymore, although I took Christinas new code.
    Maybe you can just bring the complete correct code online for using the navigation without slideshow… I think it would help many of us!
    Cheers!

    ·

  274. Muhammad Qasim Pasta Author Editor

    It continuously increasing memory for my instance! any solution?

    ·

  275. Kelvin Author Editor

    @Marcus
    I too would like it to “fade” in the first image once the first 2 or 3 images is loaded. Its too long a wait for a whole set of images to load. You’re solution works but its not pretty :). The first image progressively loads in along with the second image.

    Also, sould someone point out what line the part of the if statement that lets the navigation work when the slideshow is pause/turned off? Sam mentioned this in an early reply, but I can’t find it.

    thanks

    ·

  276. Kelvin Author Editor

    Recap from Christina’s post above.
    TO KEEP THE NAVIGATION WORKING WHEN PAUSED.

    Comment out the following from lines 36 to 66.

    //Slide Navigation
    $(‘#nextslide’).click(function() {
    // if($.paused) return false;
    if($.inAnimation) return false;
    // clearInterval(slideshow_interval);
    nextslide();
    // slideshow_interval = setInterval(nextslide, options.slide_interval);
    return false;
    });
    $(‘#prevslide’).click(function() {
    // if($.paused) return false;
    if($.inAnimation) return false;
    // clearInterval(slideshow_interval);
    prevslide();
    // slideshow_interval = setInterval(nextslide, options.slide_interval);
    return false;
    });
    $(‘#nextslide img’).hover(function() {
    // if($.paused == true) return false;
    $(this).attr(“src”, “images/forward.png”);
    }, function(){
    // if($.paused == true) return false;
    $(this).attr(“src”, “images/forward_dull.png”);
    });
    $(‘#prevslide img’).hover(function() {
    // if($.paused == true) return false;
    $(this).attr(“src”, “images/back.png”);
    }, function(){
    // if($.paused == true) return false;
    $(this).attr(“src”, “images/back_dull.png”);
    });

    ·

  277. marcus Author Editor

    @Kelvin

    Yepp, not pretty i know :) Unfortunately its the only solution i’ve found so far.

    Will let you know if i find something else.

    ·

  278. Nick R Author Editor

    Wondering why you hardcoded the selector in several places as “#supersize” ie:
    $(document).ready(function() {
    $(‘#supersize’).resizenow();
    });
    I would expect to be able to initialize any element using $(selector).supersized(); and it would just work, but not so.
    Is there a good reason for this?

    ·

  279. BARBES Author Editor

    Hi thx for this plugin, its really nice but i get a problem

    My picture has a resolution of 1024 x 768 and when i put it on your plugin, the picture is too big. I have tested it with another picture and works well so probably the problem come from my picture but i dont know why, i’ve tried all the resolution for it and same problem each time

    I can put it my html test online if you want to see it

    Thx for the help

    Regards

    ·

  280. Anders Author Editor

    I revisited this page and found that Christina fixed the pause thingie I asked about before.

    This really made my day as I am about to launch the site. Thanks Christina.

    :-)

    ·

  281. George Carter Author Editor

    This has already been asked but I also would like to know how to have the slides only cycle one time, leaving the last slide displayed as the background.

    Thanks

    ·

  282. Andrew Tibbetts Author Editor

    I got a doozy for yall.
    In IE7 and IE8, once an image is cached, you cannot return to it.
    http://everythingstandsforsomething.com
    Any insight would be appreciated.

    ·

  283. Andrew Tibbetts Author Editor

    Had to fix quickly by adding a query string to the end of the image source, so it can’t be troubleshot.

    ·

  284. kyllmode Author Editor

    Is there a way to make #content on top scroll while maintaining the full-browser background?

    See http://chicagolshirts.com/beta for example. I want all the white text to scroll without scrolling the background image.

    ·

  285. zzan Author Editor

    I guess this is not usable for resolutions exceeding 1024×768 – on 1680×1050 and good computer (2x2ghz,2gb ram) it fades in like 3 images… but still, i’m gonna try implementing this into my site, though i”m not really sure how it will handle 2000px wide images :/

    ·

  286. foko Author Editor

    since 6 month i have integrated this banging script to my wordpress site but i have always problems with iexplorer . i just works on the compability view mode .
    some examples:

    Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
    Zeile: 83
    Zeichen: 4
    Code: 0
    URI: http://www.formkoalition.de/wp-content/themes/FOKOpage/jquery-1.3.2.js

    on firefox it works great but its a little slow . can anybody share some tricks to do the integration well??

    kindest regards FOKO

    ·

  287. Beben Author Editor

    so smooth and warm looking
    aw aw aw

    ·

  288. Olaf Author Editor

    Hi

    I have a problem – and would appreciate help:
    I want to deliver a “streaming” image (meaning: A php file is in the image tag. I am using a php script to deliver a random image.
    It does not work. Always only 1 image is shown. How can I convince supersize to read that image again and again after the time specified?

    Olaf

    ·

  289. Olaf Author Editor

    Hi

    also – what about images that have a greater height than witdth. They do not seem to work correctly (or is this only me?)

    Olaf

    ·

  290. mekanik proje Author Editor

    really nice plugin, thanks for sharing..

    ·

  291. Marcin Author Editor

    Hey.
    I see that some of you guys are actually building sites. I would like to find someone who will do it for me. Of course supersized integration is a must. You will find my current site under http://www.qpixels.com. It should be something like that, preferably with an easy way to manage content and what’s even more important to add/remove photos to galleries and have an easy influence on their sequence. At first I thought about a template to wordpress because I already have a blog but I am not sure if it would be so easy. If not then at least styles should be somehow similar. Can anyone help?

    cheers
    Marcin

    ·

  292. Sino Author Editor

    Is there any way to include thumbnail navigation. I saw a comment with solution on the top but it didn’t work out well for me.

    ·

  293. Jeff Author Editor

    The plugin seems to fail to complete install. Is anyone else having any issues? Using WP 3.0.

    Any thoughts or solutions appreciated.

    Cheers

    ·

  294. Marcin Author Editor

    Hi Heff.
    Looks like this thread is dead.
    If I understand your problem right, this is not WP3.0 plugin os it will not install. Try to unzip it and drag any php file to your browser.
    If you will find such plugin for WP I would appreciate an info.
    cheers
    Marcin

    ·

  295. Andrew Author Editor

    This is an amazing job! I’ve been playing with this for a little bit and wonder if anyone has any idea on how to do the following with the current javascript:

    Change (either random or not) the background color of the body with every change of image.

    I already reduced the opacity of the images of the slideshow and gave the html body a background color this way all the images have a duotone effect. It would be very cool if the duotone changed colors with every image as well…

    Any ideas?

    ·

  296. Johan Author Editor

    Is there a way to detect if the monitor has an aspect ratio of 3:4 or 16:9? so that I can set the startwidth and startheight accordingly?

    ·

  297. MacGeol Author Editor

    I just love this jQuery plug-in!
    A great thank to you Sam and Zash for this nice job and overall for sharing it!
    I would have loved to thank Stephane too for is mod on http://www.soundphuket.com… but unfortunately it seems that this website is no further online.
    “What a pity” cause i guess this mod is exactly the mod i’m trying to do as every guy here talking about ajax random loading.
    Does anyone got the “supersized.2.0-mod.js ” made by Stephane?
    Or better : is Stephane is still getting a look to this discussion?
    Or the best : Do you, Sam and Zash, hav worked on a new version including AJAX random loading?

    I would be really regarding about obtaining this code (or a code approaching) cause i must confess i’m quite a newbie in AJAX and jQuery coding.

    Thanks a lot!!!
    (still working on… i will tell you about my work further)

    ·

  298. k-ro Author Editor

    Thank you for this great script.
    Is it possible to choose the images resize/display from the bottom right ?

    ·

  299. Ian Mac Author Editor

    Hi, love the work.

    Would it be possible to, instead of a slideshow, have the background image be random from a list of images+captions?

    Thanks again

    Ian

    ·

  300. Carl Schneider Author Editor

    Is there a way to have an external link to a specific image within the gallery?

    ·

  301. Rob Fletcher Author Editor

    I’m using this to help center a background image for my site (which over time shows different backgrounds). What I’m struggling with, is that my image is taking a few seconds to load between each page (maybe because it’s resizing per the SuperSize script?).

    So, is there a way to either:

    1. Load that image into the cache so that at least the second/third/etc. pages load faster?
    2. Fade the first image in
    3. Hold off on loading the page until the image is completely downloaded & rendered

    I apologize if these statements are bettered answered with another solution; I’ve very new to this development game.

    Thanks in advanced!

    Cheers,
    Rob

    ·

    • Ths! Author Editor

      What Austin said, it seems a bit sluggish, causing the loading time of the website I’m building to be a bit slow. And I’m using it to show only 1 background image.

      Besides that, I wish for the image to fade in if possible..
      is there such an option available?

      ·

  302. Andrea Author Editor

    Excellent job!!! I was wondering if supersized may be included easly in a cms (content manager system) like wordpress and if you was thinking to do a plugin for WordPress would be great!!

    ·

  303. Gerry Straathof Author Editor

    Thanks for what looks like a brilliant plugin, which I naturally can’t get to work.

    Is there a way to get the resize to occur on an orientation change? I am trying to incorporate this plugin within an ipad webapp that behaves like the popular science magazine. Of primary importance is the ability to have the image center vertically and horizontally, so the transition isn’t quite so jarring.

    I can’t get it to work, though. My site (the basics) is here: http://straathof.acadnet.ca/beta4.1

    Previous sites (beta3.5 being the last) were created with Sencha, but I am hoping to do much the same thing using Jquery to reach more users. (sencha serves only webkit browsers)

    ·

  304. ameali Author Editor

    I’ve got it going, but the load time is incredibly slow. I’ve simplified it to really only use onclick to change slides.

    Pls, check it out. http://www.farm-architecture.com

    Also, i i update to the newer jquery file it doesn’t seem to work at all.

    ·

  305. Gerry Straathof Author Editor

    ameali, your am-du jpeg is almost three times the size of the other ones. 777 or so k vs 77-220k. That could cut your load time.

    The plugin, as it stands, is trying to resize all fifteen of your images, which is no doubt what is causing the delay. It bogs down the auto-rotation on the ipad/iphone as well. If you know how, altering the system so it only handles two slides at a time (current and next) when doing the internal calculations, and swapping the ‘next’ slide with the next image may be a better system.

    ·

  306. Jeff Author Editor

    Several people have said that they were able to get this to work in wordpress. I have been trying for a day & 1/2 to figure it out with no luck. I was hoping someone would be kind enough to share their process.

    Thanks

    ·

  307. ivo Author Editor

    I am trying to use Supersize with multiple albums. That is, somehow that your code can switch to a different list of images after clicking a button. How can I do that most easily with a hack or so? Thanks!

    ·

  308. Sean Author Editor

    very nice work! i was wondering if anyone has gotten a swf file to overlay on top of this though. i’ve tried everything i can think of.

    ·

  309. Jeff Author Editor

    Sean, I am having the same problem. I want to replace the starfield background on the main page of this site with a series of images. http://edream.illinois.edu/

    This is a custom wordpress template and I can’t get figure out what I am getting wrong. Any insight would be greatly appreciated.

    ·

  310. Kevin Author Editor

    @ Ivo

    Use this code to generate your list of images:

    <?
    if(isset($_GET['var'])) {$dir_name=$_GET['var'];}
    $path = "yourmainimagesdir/".$dir_name;
    $dir_handle = @opendir($path) or die("Unable to open $path");
    while ($file = readdir($dir_handle)){
    if (substr("$file", 0, 1) != "."){ // don't list hidden files
    echo "“;
    }
    }
    closedir($dir_handle);
    ?>

    Than make a menu like this:

    <a href="yourpage.php?var=dirnameyouwant
    <a href="yourpage.php?var=dirnameyouwant

    Make a directory on your ftp, and give it the same name as “yourmainimagesdir”. In that dir, make dir with the name you want, but make sure it’s the same as the var name behind the menu link.

    After that, GO GO GO!!

    ·

  311. Kevin Author Editor

    See my implentation of supersized 2 @ http://www.gaddo.nl

    ·

  312. Giles Author Editor

    Firstly – thank you and great great job!

    Thought I should mention that I’m finding IE6 crashes when you resize. I’ve stripped default.php right down (resize a single image only, no fades, no menu bar) to see if its a peripherals issue but it appears not to be.

    I know that many would say f*** IE6, but this plugin appears so near passing this feature back to 6 users, it seems a pity not to finish the job.

    Well done again. It really is great

    ·

  313. Ankit Jain Author Editor

    hey, lovely lovely lovely!

    i needed some advice though or if code can be given, i will dance with glee, now i basically need a clone of the home page of bing.com and this is the closest i could find, however am having trouble porting it into a table and then making a form on top, :((

    i’m a novice at html and php.

    please advice thnx, the basic thing is the bg image fading into another image, (will be fetched from a db) and then there will be a multiple tab with 3 tabs on top of the slide show which will be 75% ht and width of teh total screen space.

    i understand i’m asking too much… i’m sorry for that, but, yeah i’m looking forward to responses, many many thnx :)

    ·

  314. Maarten Author Editor

    For people who want to use this script and want to have the images non-selectable, wrap this around the image tags:

    ·

  315. Maarten Author Editor

    Maybe this works..

    “</span"

    ·

  316. michael Author Editor

    Is it possible with the use of CSS to have the bar that goes horizontally across the background images ( I think it is) to be set to some kind of transparency allowing the images underneath to slightly show through ?

    ·

  317. ahmad Author Editor

    its a gr8 work. but its not working with mootools. so does anyone has the solution to fix this.

    ·

  318. Jens Author Editor

    Excellent work, this i a very nice and useful script.

    However i have one feature request. I would like to show a lot of existing images of dresses on my website, but they are in different ratio.

    Would it be possible to show images in different ratio without distortion. I.e. always resize the height to max and change the width so it does not distort.

    Maybe someone can explain how to fix that?

    Regards Jens

    ·

  319. john Author Editor

    why can’t I see all the comments? I think I saw something about thumbnails some time back.

    ·

  320. Austin Author Editor

    Is there any way possible to increase the performance? It just seems a bit sluggish. I love jQuery but it seems like performance has always been an issue. I can do this relatively easily with Flash with amazing performance at that, however I will be able to reach more people with jQuery. So is it possible to get better performance when loading full-screen images like this?

    Thanks.

    ·

  321. AKKI Author Editor

    I have a query…!!!

    I want to experiment by decreasing the size of the slider and fit into the header section of a webpage..(still under sonstruction). I want a fade effect in my website and if it could be sized to my personal requirements i.e. 1012x 300 or 1012×280 I would go for it. please help me know it on my email id.

    ·

  322. king Author Editor

    full size is useful…. would be even useful with the adding of thumbnail as many has been requested….consider supersized or http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery for similar needs….we wait for a day when buildnet do a better version with thumbnail and better sliding effect..

    great work, keep up…..

    ·

  323. miguel Author Editor

    It looks like it would work beautifully… but I can’t seem to get it to transition correctly. I’m VERY new to jQuery. can you help:

    Website Title

    $(function(){
    $.fn.supersized.options = {
    startwidth: 1920,
    startheight: 1200,
    minsize: .5,
    slideshow: 1,
    slideinterval: 5000
    };
    $(‘#supersize’).supersized();
    });

    body {
    overflow:hidden;
    margin:0px;
    }
    #supersize img, #supersize a{
    height:100%;
    width:100%;
    display:none;
    }
    #supersize .activeslide, #supersize .activeslide img{
    display:inline;
    }



    ·

  324. Zach Dunn Author Editor

    Hi Everyone! We’ve taken a lot of the feedback and issues from this thread and incorporated them into the latest release of Supersized.

    I’m closing this post’s comments now so that conversation regarding the plugin can be in one place on the new Supersized 3.0 release page.

    ·

 

Build Internet by One Mighty Roar. Since 2008.