Supersized 3.1 jQuery Plugin – Fullscreen Background Slideshow with Flickr Support

Supersized just got rewritten from the ground up. It’s faster, with more options, animations, and added Flickr support.

Hello, Supersized 3.1

Features

  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles backgrounds via slideshow with transitions and preloading
  • Core version is available for those that just want background resizing.
  • Navigation controls with keyboard support
  • Integration with Flickr – pull photos by user, set, or group
  • Head over to the project page for all the details.

New in Supersized 3.1

  • Complete rewrite of the Supersized script.
  • Automatically adds in required elements.
  • Added image rendering for faster transition speeds on FF and IE.
  • Dynamic image handling (no longer relies on predefined ratios).
  • Unobtrusive backgrounds – you no longer need to wrap your content in a special div.
  • Many options added, including fit to screen, keyboard navigation, transition speed, and more.
  • Created separate script specifically for Flickr – can pull by user, set, or group.

Upgrading from Version 3.0

3.1 cleans up a lot of extra code, which means the majority of the upgrade process entails cutting out extra lines. Here’s the process to upgrade from a clean version 3.0 install:

  1. Update the paths to the new JS and CSS files.
  2. Remove the #supersized element and #loading (now called #supersized-loader)
  3. The default image path is “img/” – make sure this matches your setup or change line 56 in supersized.3.1.js
  4. Replace the jQuery which calls Supersized from your page with the new format (“jQuery(function($){ $.supersized …” found in any of the downloadable demos).

If you are experiencing trouble upgrading a clean installation feel free to post below in the comments. If you have done a substantial amount of customization and need help, I am available for hire – details are at the bottom of the project page.

Comments and Further Development

If you are going to use the Flickr version of Supersized, you will need to get an API key, available here. Keep in mind Flickr limits you to 3,600 calls per hour – so I apologize if the Flickr demo on the project page goes down.

In order to keep things loading as quickly as possible, if you make any edits to the Supersized javascript file you will want to minify it when you’re done. There’s a number of ways to go about this, but I’ve recently become quite fond of this GUI solution which uses YUI Compressor – Smaller.

I’ve added Supersized to Github, which is were I will publish minor point releases and field any bug reports.

Thank you for continuing to make Supersized one of the most popular posts on Build Internet.

If you have an urgent problem and would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com.

Banner image provided by Kitty Gallannhaugh.
Other photography by Emily Tebbetts and Larissa Felsen.

Posted Sunday, February 27th, 2011 · Back to Top

SPONSOR

Add Comment

895 Comments 11 Mentions

  1. ad34 Author Editor

    Hi,

    Great work

    For some reason, I cant get to work the fade version in my project, maybe a css and/or javascript conflits with other jquery plugins

    Supersized works but the fade transition is not visible even if I set a very long transition_speed

    Any idea why?

    ·

    • Sam Dunn Author Editor

      That is likely a problem with either how you have set up Supersized or another script is conflicting. A good step would be to try running jQuery noconflict mode.

      ·

  2. cris Author Editor

    hi
    i want to have an action happening when image 1 of the slide enters the page, what do i need to call because vars.current_slide only works on page load?
    thanks

    ·

    • Sam Dunn Author Editor

      You would need to have a check in the beforeAnimation function on the theme file.

      ·

  3. Daniel Author Editor

    Hi,

    Does Supersized support to make a preloading for each image. Ex: when moving to the next slide, there is a preloading symbol that let user know this image is loading.

    Thanks

    ·

    • Sam Dunn Author Editor

      If you have version 3.2.1 all these things should already be included.

      ·

  4. ingvi Author Editor

    Is there a js event to stop the slideshow?

    thanks

    ·

    • Sam Dunn Author Editor

      Documentation is available on the project page. There is an API function called playToggle()

      ·

  5. ANFSTUDIO_LAX Author Editor

    I see that in the newest version of Supersized, the slides are listed in the function call for Supersized in the ‘head’ section of the html document. Since the slides are loaded in dynamically via jQuery/Javascript and not hardcoded into the ‘body’ section of the html doc there’s no way to make each slide a clickable element is there? What I have in mind is for each slide to be a huge giant button that leads to various sections of the website. Is there a way to accomplish this or am I S.O.L in regards to using this plugin in this way?

    ·

    • Sam Dunn Author Editor

      You can make each slide a link, there is a field specifically for doing so – you can take a look at the demo. I would read the project page documentation for any further questions.

      ·

  6. Ashish Author Editor

    i tried to add 15 images in the current version and found that it stop working after 9 images… there is some problem with shutter theme or somewhere.. just download your own latest version, add 3 more images and see the problem.. i tested in mozilla and ie both…

    ·

  7. belinda Author Editor

    Thankyou Sam for your time and efforts… Supersized is Super!
    Please can I have supersized customized for a horizontal site… 1 page layout- 8 sections all requiring a different image? Please see: http://www.dancephotography.net.au/test1.htm

    I dont mind paying for this service… I am deperate!
    thankyou,
    Belinda

    ·

    • Sam Dunn Author Editor

      Thanks Belinda! If you’re interested in hiring me, please shoot me an email – info is available on the project page.

      ·

  8. Jonathan Nook Author Editor

    Just wondering if there might be a Lightroom plug-in at some point that would create the Supersized slideshow directly inside the Web module of Lightroom.

    ·

    • Sam Dunn Author Editor

      At this point I have no plans to do a plug-in of that sort – right now I’m focused on custom themes for Tumblr/Wordpress as those seem to be the most widely used and requested.

      ·

  9. cris Author Editor

    thank you , so i did this:

    if(vars.current_slide==1){
    $(“.rooms_desc”).slideUp();
    $(“#citation”).fadeOut();
    api.options.slides.shift();

    }

    the menu slides up but i also need to remove the first element in the image array and it does not work, the slide show stops. :/

    ·

  10. G470 Author Editor

    Hi Sam, just downloaded the fresh version from github. I’m facing a small problem. Somehow I can’t get the default image path to work. All Ui Images that get a new path via script, show the default path.

    I’m calling it like this:

    image_path : ‘newpath/test/’,

    but I always get pathes like: img/button-tray-down.png

    no syntax errors, I just can’t pass the variable… got a Idea why this doesn’t work?

    ·

    • Sam Dunn Author Editor

      The options on the actual page overwrite the theme options, which overwrite the default options. Make sure you’ve specified your custom path in the options, so it doesn’t get overwritten by the other two.

      ·

  11. Glynn Author Editor

    There seems to be an issue between anchor tags and this, I created an absolute div to sit as the footer ( always at the bottom ) and inside that div I created a left and a right side..

    in the left side there is a menu and on the right would be the content that replaces every time you click on the anchor in the menu on the left.

    The issue is that instead of controlling the content area the anchors are controlling the images, 1, 2, 3 etc, i can choose which I want to look at.. so, my question is, is there a way around this ?

    thanks

    ·

  12. chris Author Editor

    Hello,
    this plugin is awesome! Thanks for it!
    I’ ve got a short question. I need on the homesite always the same picture at first. All following ones random. Is this possible?

    ·

    • Sam Dunn Author Editor

      Chris -

      There isn’t a setting to do this by default, but you could probably customize it to do so, if you’re familiar with jQuery.

      Best of luck

      ·

  13. sebastien Author Editor

    Hi Sam,
    Thanks for the awesome script. Yesterday I downloaded it, and set it up for my wordpress website. Everything worked smoothly!

    But this morning when i came back on the site, there were all the images of the slideshow which appear on top of the slideshow. I m a bit confused. I did not touch the code at all meanwhile. What went wrong?
    Is it a conflictual behavior between the jquery of your script and worpress ???
    Did it happen to someone else?

    Hope to get some answers…

    ps : I remember having seen this happen to your demo page as well. How did you fix it ?

    ·

    • Sam Dunn Author Editor

      Sebastien,

      Thanks for downloading the plugin, although not quite sure about your problem, since I haven’t seen this happen. It sounds almost like you’re describing the thumbnail bar which can be toggled on and off in the settings. Other than that I don’t have a clear answer – if you’ve customized it, I would suggest making sure none of your additions are causing quirks.

      Thanks

      ·

  14. Ricardo Vercesi Author Editor

    Are you considering adapting the plugin to work in mobile platforms? I have tested it in iOS smartphones and tablets and there are some flaws. I haven’t tested with Android phones/tables yet.

    Regards.

    ·

    • Sam Dunn Author Editor

      This plugin currently does work on mobile platforms. iOS doesn’t support position:fixed which means that if your site content requires a vertical scroll bar the image will not move with it.

      ·

  15. Gurkan Sengun Author Editor

    It worked fine for me on the iPhone. What’s your issues?

    ·

  16. sebastien Author Editor

    Hi Sam,

    thanks for your reply. This is a mystery, now it works again. And I did not change anything again. Well, there must be a conflict somewhere, but I don’t know where.

    Thanks again for the good work
    best
    /seb

    ·

  17. Ricardo Vercesi Author Editor

    I have tried with a iPhone 3GS iOS 4.3.2 and an iPad w/ iOS 4.3.3 and – in both cases – the site gets stuck in the loading animated gif.

    ·

    • Sam Dunn Author Editor

      Is this a customized version you are using? I have not encountered this bug on the out-of-the-box version yet.

      ·

  18. Ben Author Editor

    For all of you interested in integrating Supersized in WordPress, I have just released a WordPress plugin that does just that. It gives you access to all options in the WordPress admin. As I had just finished it when Sam released Supersized 3.2, my plugin is still using version 3.1.3. I am working on an update that will include the latest version.

    Sam, Thanks for your great work!

    ·

  19. Jason Coe Author Editor

    I am trying to make content in a change depending on the image background… I have looked in your documentation and all I can find that may do this is theme.afterAnimation( ) but I cant find how to implement this. Any ideas?

    Great code though – used it a couple times.

    ·

    • Sam Dunn Author Editor

      Jason,

      You would basically want to either add custom divs that are hidden/shown for each slide number (which you can check using vars.current_slide or you can tie element names to a slide by adding a field in the slides array (where you define the slides) and fetch it using the getField API call after each animation.

      Thanks and glad you like it!

      ·

  20. Ryan Riegner Author Editor

    I am trying to add a custom header nav and body content above and below the slideshow. I do not want to place text and links directly over my images as it is done in the demo. Any ideas everyone?

    ·

  21. belinda Author Editor

    Hi Sam,
    I sent you two emails via the comments page and other email listed on this site…
    Really looking forward to hearing from you,
    thanks – Belinda

    ·

  22. Steven Grant Author Editor

    This does just the job I’m looking for, lovely full width slider. I’m not using it in fullscreen, only a height of 475px. However, I’m noticing that browser resizing changes the height of my images. How would I set them not to change?

    Thanks and again, excellent work.

    ·

  23. nicmare Author Editor

    awesome plugin!
    can i somehow share my supersized gallery to a specific image?
    When i have a paused slideshow by default, i want to share a specific image of that gallery.
    but right at the moment i can just share the slideshow with the first image starting.
    also it would be nice to have an option to have hardcoded links to the images instead of an array because of SEO!

    ·

    • Sam Dunn Author Editor

      Thanks! Currently direct slide linking is not supported, but certainly a consideration for the future. Sounds like your solution might be the best bet for now.

      ·

  24. Bimal Author Editor

    Is it possible to have a clickable link in the core version? I see how it’s done for the slideshow, but I just have a single background that I want to use as an entrance page with a clickable link.

    Thanks!

    ·

    • Sam Dunn Author Editor

      Hey Bimal,

      You most certainly can – the problem is unless you position:absolute the content above the image, the div blocks the user from clicking the background (except on IE)

      ·

  25. nicmare Author Editor

    hey sam, in the last hours i just built a neat transition effect dummy with the help of supersized!
    http://goo.gl/ML39V

    i think i will love this plugin :)
    hope to see direct linking soon!

    ·

  26. Bimal Author Editor

    Thanks for getting back to me so quick, Sam.

    Sorry, I’m not a coder – I’m just learning as I go, but if I change the .css position from relative to absolute and then add code for the URL similar to the way it is done in the slideshow version – would that do the trick?

    Thanks!

    Awesome plugin, by the way…

    ·

    • Sam Dunn Author Editor

      Yessir, that should take care of it. Thanks!

      ·

  27. Bimal Author Editor

    Sorry Sam – I’m a pest and seem to be slow! That didn’t seem to work. I edited the .css to change all the position:absolute and have used code from the slideshow to get a link for a URL, but there is still no way to click the background. Am I missing something extremely obvious?

    The site is here: http://www.bimalandnatasha.com

    thanks & sorry!

    ·

  28. Jason Coe Author Editor

    Worked a treat!!!… thanks for your advice.

    ·

  29. nicmare Author Editor

    bimal, the supersized code works if you watch closely with firebug. you code is full of garbage! remove primaryStylesheet and it will work!

    ·

  30. nicmare Author Editor

    sam, do you have an idea why this works: http://goo.gl/c4KFb
    but this with 3.2.2 not? http://goo.gl/2YTOR
    the image appears two times and offline it does not even start the slideshow. beta troubles?

    ·

    • Sam Dunn Author Editor

      Supersized 3.2 requires more than just swapping out the supersized file – you’ll notice theme files now play a role. You can refer to the examples in the download to help guide you!

      ·

  31. Bimal Author Editor

    Thanks nicmare – I think I’m getting in over my head now. I’m using a square space build and I don’t know how to remove the primary stylesheet for just one page. Getting mostly confused now…

    ·

  32. nok99 Author Editor

    Hi Sam and great thanks for your job ;)

    it save my life :)

    I have the same question as Steven Grant :

    I would like to have a regular height of 484px on my images,
    only full resize for width
    ¿ here is an issue to do that ?

    Regards,
    Nicolas

    ·

  33. nicmare Author Editor

    sorry sam, but i dont get it. i copied all files and themes to my dummy but it is not willing to start and i dont get any js errors. http://goo.gl/2YTOR
    when i hit 5x refresh, it nearly works. but most of the time not! veeeery strange

    ·

    • Sam Dunn Author Editor

      Try dropping down the 3.2.1 – it’s the primary download on the project page – I’m tweaking 3.2.2 still.

      ·

  34. Bimal Author Editor

    Sam or nicmare – if you’ve got any final ideas for me, i’d really appreciated it! nearly pulled out all of my hair over here!

    Cheers!

    ·

  35. nicmare Author Editor

    bimal, find a way to disable the primary stylesheet. ask the responsible people how to do that. sam is not responsible for that.
    @sam. do not hesitate. i will wait for stable release of 3.2.2. even the current version breaks on my firefox4 out of the box. so i will keep 3.2.1 for now

    ·

  36. Michael Author Editor

    Documentation says that if I change height & width in the #supersized part of the CSS then it will take it out of fullscreen. This is not true. It changes the images height & width only.

    Anyway to change the height & width of the entire box?

    ·

    • Sam Dunn Author Editor

      This takes a little tinkering on the CSS-side, but is possible, you would also want to try adjusting the “#supersized a” dimensions.

      ·

  37. Sam Lowry Author Editor

    I’m trying to figure out if this is the right plugin for me. I’m trying to create a two-color background for a site similar to http://www.staceyapp.com/in-use/. I want the background of the navigation to be white and the content to be blue. I can change the div backgrounds, but that of course will only change the div colors. I want the background to be completely 2-color no matter how far you scroll down. The challenge of course is that the container div is centered – I’m about to give up on the centered idea unless there is another way.

    Any suggestions are welcome. Thanks.

    ·

    • Sam Dunn Author Editor

      Sam,

      First off, nice name. Secondly, I’m not really sure this is what you’re looking for – this plugin is for fullscreen background slideshows, which doesnt sound like something you’re aiming to do.

      Best of luck,

      ·

  38. Bimal Author Editor

    Thanks guys – figured it out. Much appreciated!

    ·

  39. Little Rich Author Editor

    My navigation menu links have stopped working after upgrading to version 3.2.1. I’m running a WordPress site and had no problems with 3.1.3.

    Any ideas what causing this?

    ·

  40. Ed Maximus Author Editor

    I just used the core portion of this plugin (v3.2) to create a clickable welcome page for a website. It works fine except for the fact that the target is set to _blank by default. I want the link to open on the same page when I click on the background. How do I go about doing that?

    ·

  41. Michael Author Editor

    I figured it out. Thanks :)

    ·

  42. Ed Maximus Author Editor

    I figured it out. I just had to go in the js (supersized.core.3.2.0.min), looked for _blank and change it to _self. I hope that help someone else.

    ·

  43. Nick Author Editor

    I absolutely love this plugin– awesome job. I’m wondering how difficult it would be to add a collapsible description box overlay that could pull rich content– i.e. formatted text– from say a div associated with each slide?

    ·

  44. Edgar Author Editor

    Could you give me an example, please???

    ·

  45. Edgar Author Editor

    Hello, I need to get the current slide in a variable, could you give me an example, please??? Something like

    script type=”text/javascript”>

    var $c = $.supersized.vars.current_slide;
    document.writeln(c);

    ……

    ·

  46. Ryan Riegner Author Editor

    I am also having the same problem. I am trying to take the picture out of full screen mode, so that I can have content above and below the slideshow. How did you solve this Michael?!!!!!

    ·

  47. nicmare Author Editor

    @edgar, use v3.2.1 and var $c = vars.current_slide;

    ·

  48. Rob Author Editor

    Seems to be working perfectly in Chrome and Firefox, but in IE I the images won’t load – the progress icon just keeps on going. Any ideas?

    ·

    • Sam Dunn Author Editor

      Have a look at the FAQ section on the project page – hopefully that helps!

      ·

  49. alan Author Editor

    is there a way to session the background – so if person clicks on one of the thumbs to change the background – can it stay per page – as a cookie or session

    ·

    • Sam Dunn Author Editor

      That would certainly be possible, but it’s outside the scope of the plugin and would take a bit of tinkering on your end.

      ·

  50. Spoonk Author Editor

    Hi Sam,
    first of all, I want to say that your job is just amazing. One plugin passes adobe flash technology in the past once and for ever:)
    And now I want to ask, is there a way to keep the thumbnails open when someone opens my site, instead to click tray button to opens them?
    I need to be opened when you enter the site, and after that if you want – close them.
    P.S: Sorry for my bad english, I hope I was clear enough:)

    ·

    • Sam Dunn Author Editor

      Sure thing – you would just want to edit the start position in the theme file, you can track it down with some hunting!

      ·

  51. selvia Author Editor

    goog work, beutifull

    ·

  52. Chris Author Editor

    I’m trying to implement this for a website atm. I’m fairly new to web design, and very new to Javascript/Jquery and am finding it very very tough to put this in properly.

    I keep getting the scroll bar on the right, and the image isn’t staying in proportion like any of the examples, it’s stretching and fitting the screen absolutely. Any ideas where I may be going wrong??? Other than that it’s easy! haha. Great plug in to be fair, it’s just me i’m sure.

    Cheers if anyone can help.

    ·

  53. kristof de borle Author Editor

    Hello

    Is it possible to run .swf files with the Supersized plugin?

    ·

    • Sam Dunn Author Editor

      At this time, Supersized is just for images, not swf files

      ·

  54. Stéphane Author Editor

    Hello,

    Thank you for this great job!

    I have a question. I want to stop the slideshow when i click on a link. Where I have to place the code to do that?

    Is it these lines of code?: $(element).click(function(){
    api.playToggle();
    });

    Thank you.

    ·

    • Sam Dunn Author Editor

      Correct, you can place that in the theme file – you’ll see an example of it already in there. Keep in mind you’ll want to replace “element” with the actual element.

      ·

  55. Spoonk Author Editor

    Oh, it seem I’ve to rework the entire “supersized.shutter.min.js” file?
    That’s… out of my knowledge, as far as I think that I have to replace “a” with “-a”, and etc. inside entire .js file?

    ·

  56. Spoonk Author Editor

    Oh my gosh, I realized my mistake. I should use not the .min.js, but the full .js theme file. There I found the solution as you said! Thanks a lot my friend! I’m gonna donate abso-fuckin-lutely:)))

    ·

  57. felek Author Editor

    Hello, I believe plug is great. But i have question is it possible to:
    a) after click insert for to slide show (and show it instantly )an image, and after peroid of time (form current options) disappear form sliding or stay
    b) put on click an entire new array of images to slider?

    ·

  58. Saint Author Editor

    Hi i have a prob with IE9, i did a web site with this fantastic plugin but work fine in FF chrome safari ie8, but not in 9 infinite preload…any suggestion?

    ·

    • Sam Dunn Author Editor

      Try debugging with the developer tools in IE9, that should help you lock down the problem.

      ·

  59. Phil Author Editor

    Hi Sam, nice job!
    Is it possible to add html over the sliding images?
    I mean a single part of code for each?

    Thank you

    ·

    • Sam Dunn Author Editor

      Hey Phil,

      I’ve addressed this is some of the above comments, feel free to take a look.

      Thanks!

      ·

  60. Saint Author Editor

    Thanks Sam
    the error was a bug in IE9 with jquery.min 1.5.0, this was the debug:

    SCRIPT438: Object doesn’t support this property or method ‘getElementsByTagName’
    jquery.min.js, Line 16

    i fix it using the next version 1.5.1

    thx again and great job!

    ·

  61. nok99 Author Editor

    Just for information…
    it’s doesn’t working on Internet Explorer 8 :(

    ·

    • Sam Dunn Author Editor

      Refer to the FAQ section, you likely have a stray comma.

      ·

  62. nok99 Author Editor

    thx ;)

    ·

  63. Dan Hostettler Author Editor

    Hello Team
    I tried to activate the plugin (buildinternet-supersized-v3.2-2-g13d252f.zip) in wordpress 3.1 with the standard theme Twenty Ten 1.2

    I got always this error
    “The plugin does not have a valid header.”

    Any idea?

    Thanks, Dan

    ·

  64. David Landa Author Editor

    Hello, plugin works very well. But i need little help :) I want to have slide links (dots navigation) in 3 columns. I used some jQuery plugins to do this, but active “clickable” links are only in the first list (original ul#list-slide) and other are inactive. Is possible to parse list to 3 columns (in one original ul#slide-list), for example with six elements in each column? Or how to load (on click) background pictures in custom menu links.

    Thank you.

    ·

    • Sam Dunn Author Editor

      Supersized can only populate one list with dots navigation dynamically. If you want to hard code each link to jump to a specific slide, you can use the goTo API function, but that is not a dynamic solution. This requires version 3.2+

      ·

  65. nok99 Author Editor

    but after removing coma = same result :( doesn’t work on IE 6 – 7 – 8 – 9 and Safari windows :’(

    ·

  66. Thomas P Author Editor

    The images start off distorted in internet Explorer, works in FireFox.
    Anybody here know the fix before I uninstall???????????????

    ·

  67. Evan Sampson Author Editor

    Same Here. Images are distorted vertically loading the page, takes about 10 seconds before they seem to fix themselves.

    ·

    • Sam Dunn Author Editor

      Do you have a link to an example page? What version are you using?

      ·

  68. Dan Hostettler Author Editor

    Hello,
    I am using “buildinternet-supersized-v3.2-2″
    Now I am looking for the “image_path” in the global js “supersized.3.2.1.js”.
    But this global variable is disapeard?

    I need to specify the path (http://xy.com/members/_slideshow-supersize_files/img) for the “play” and the “button-tray-down.png”.
    I found something in the “theme/supersized.shutter.min.js” (image_path:”img/)
    but do not now ho to put an absolut path there (http://xy.com/members/_slideshow-supersize_files/img).

    Thanks a lot for any hint:-)!

    ·

    • Sam Dunn Author Editor

      The image path is specified in the theme file, you can add it in and it should take care of your problem if it’s missing.

      ·

  69. Evan Author Editor

    Example, if you click through the golf hole pages you will see what I mean
    http://www.linvilleridge.com/coursetour.aspx

    ·

    • Sam Dunn Author Editor

      You’re running an older version of Supersized (3.1.3) – 3.2.3 is now available and has many fixes, but keep in mind it’s not a “drag and replace” update

      ·

  70. Dan Hostettler Author Editor

    Thanks Sam,,
    but the *:* after the *http*
    in
    ….,image_path:”http://xy.com/members/series/mg/”,….
    creates a problem because of the syntax.
    What is the correct sytax to insert the full http adress?

    :-) THANKS!

    ·

  71. Dan Hostettler Author Editor

    Syntax: No it does creates NO problem. Just my editor (EditPlus 2) shows a wrong color in the syntax. In practice it works
    ….,image_path:”http://xy.com/members/series/mg/”,….

    Thanks a lot!
    Donation follows:-)

    Have a great weekend,
    Dan

    ·

  72. David Landa Author Editor

    Thank you very much. I will share this plugin with my friends.

    ·

  73. Edgar Author Editor

    Hello, please I need help with this:

    jQuery(function($){
    $.supersized({

    //Functionality
    slideshow : 1, //Slideshow on/off
    ….

    mouse_scrub : 0
    });
    });

    var c = new Number;
    c = ????
    ???? HOW CAN I GET THE CURRENT SLIDE HERE????????

    ·

    • Sam Dunn Author Editor

      vars.current_slide is a global variable that spits out the current slide, you can access it from anywhere in the jQuery function

      ·

  74. Márcio Author Editor

    Sam Dunn, help me please!
    What I did wrong? Works on Chrome, Firefox, Safari and Opera but not in Internet Explorer.
    http://www.marcioamerico.com.br/teste/

    ·

    • Sam Dunn Author Editor

      That site you link to isn’t even running Supersized. Check the FAQ for more on potential IE fixes.

      ·

  75. Márcio Author Editor

    It shows:

    Webpage error details

    Message: ‘d.options.slides[...].thumb’ is null or not an object
    Line: 13
    Char: 1152
    Code: 0
    URI: http://marcioamerico.com.br/teste/js/supersized.3.2.1.min.js

    ·

  76. Márcio Author Editor

    http://marcioamer.dominiotemporario.com/teste/

    The DNS changed, but are in here.

    ·

  77. Márcio Author Editor

    You rock!

    [QUOTE]

    Supersized isn’t loading on IE7/8.
    Remove the comma after the last slide in the your slides array. If this doesn’t work, make sure you’re running a version of jQuery later than 1.5.0.
    slides : [
    {image : 'image1.jpg'},
    {image : 'image2.jpg'},
    {image : 'image3.jpg'}, // Get rid of this
    ]

    [/QUOTE]

    ·

  78. Márcio Author Editor

    Aw.. it’s working but the images don’t load in IE :/

    ·

  79. Márcio Author Editor

    fixed ;)

    ·

  80. Simon Author Editor

    Hi Sam, I saw 3.2.3 is out… the “all images preloaded” feature is not in yet, correct?

    ·

  81. Chris Author Editor

    Hey Sam, great work. I have question regarding images. I’m using both landscape and portrait images while using a background image. If the previous image has smaller dimensions, I’m having trouble getting the previous image to hide once the active image is loaded. For instance, transitioning from landscape to portrait still displays the landscape image behind the portrait image. The only thing I have been able to do is change #supersized a.prevslide to display none, but this just causes the previous image to suddenly hide, which degrades the quality of the transition. Any help would be awesome! Thanks

    ·

  82. Todd Author Editor

    Hi Sam,

    thanks for the awesome work! One very simple question: How do I call the resizenow function externally? I change the background dynamically via

    $(‘#supersized img’).attr(‘src’, ‘mypicture.png’);

    But then, calling

    $.supersized.resizenow();

    fails (I need to call it, because the aspect ratio changes). Maybe the syntax is different….? Any help would be very much appreciated!!

    ·

    • Sam Dunn Author Editor

      If you’re using 3.2.x you can just use the goTo API call instead, which would be better practice. You can try calling api.resizenow() – it may work.

      ·

  83. Todd Author Editor

    …so for 3.1.3 there is no way? :-( I tweaked it a bit (to fill an element instead of the whole window) and would therefore prefer to stick to 3.1.3….

    Thanks for your answer!

    ·

  84. Todd Author Editor

    Ok, tried to 3.2.1:

    api.resizenow() does not work.

    Also, in Chrome the resize function is NOT called after page load, only after resizing the window.

    ·

    • Sam Dunn Author Editor

      In 3.2 you would use goTo instead of the method you’re aiming for – it handles all that for you. You might be able to work out your method with 3.1.3, but that would involve tinkering on your end, as my suggestion would be upgrade to 3.2

      ·

  85. Todd Author Editor

    Sounds good, but: 3.2.1 does not offer a goTo method and on the downloads page you can only get 3.2.1 (even though it is labelled being 3.2.3!!)

    ·

  86. Nico Author Editor

    Is there a way to set a maximum width? I would like to use a background image for a website which uses the min width option as well as a maximum width, so that it doesnt scale itself over the whole site when the site is viewed in a very large browser window (1680+1050 and higher). In this case it should only scale until 1200 width and stay then in the center.

    best regards,
    Nico

    ·

  87. Todd Author Editor

    Sam: I just downloaded it AGAIN (first link on http://buildinternet.com/project/supersized/download.html)

    -> core/js/supersized.core.3.2.1.js

    That seems to be 3.2.1 ;-) …and there is no goTo method in it!

    Also, I think you got me wrong. I don’t want to jump to another slide, but instead dynamically set another image (that is not known when the page is loaded and therefore can not be a slide).

    The following hack seems to work in 3.2.1:

    api.options.slides[0]['image'] = mynewimageurl;
    $(‘#supersized a’).remove();
    api._start();
    api.resizeNow();

    Still, resizeNow() is NOT called after page load in Chrome, so I have to resize the window to make it look right – but that must be a jquery 1.6 bug.

    ·

    • Sam Dunn Author Editor

      Ah, gotcha – thought you were using the slideshow version, you’re correct – the core version is 3.2.1 and doesnt have API calls.

      ·

  88. MrD Author Editor

    Just about to start using when I noted that there isn’t a ‘no javascript’ fallback.

    The script and how it nice it top notch stuff, but not having a fallback and SEO friendly code is a not that awesome. Are you intending on introducing this vital bit of code?

    ·

    • Sam Dunn Author Editor

      Realistically, there aren’t many options for gracefully “no javascript” fallbacks in this case as the entire site is a jQuery slideshow, short of a “Javascript Required” line. This is certainly something that you can add in if it is vital to your project.

      In terms of “SEO friendly code”, I’m not entirely sure what you’re gunning for there, since it’s simply a slideshow that you could still place content on top of in whatever fashion you desire.

      ·

  89. Ryan Riegner Author Editor

    Hey Sam! This plugin has been amazing for my website so far. Is there any way to embed video as a slide? I’ve been fiddling and I am thinking it’s impossible… Say it isn’t so?!?!

    ·

    • Sam Dunn Author Editor

      Ryan,

      Thanks for the kind words – Supersized is just an image slideshow and at this point I have no plans to expand into the video realm anytime in the near future.

      ·

  90. Teren Author Editor

    Hi! Thanks for this plugin!!

    I set up it but the pictures do not appear in the chosen order.. sometimes, the same one appears many times on the bounce.? How can I fix it?
    (sorry for my english, check the website http://www.wadupclothing.com/ to understand my problem)
    Thanks again!!
    Teren

    ·

    • Sam Dunn Author Editor

      What browser are you experiencing this problem with? All of them? From my review it seems to be running correctly, in the proper order you have them listed in the slides array.

      ·

  91. Herbert Broost Author Editor

    Hello
    I use a simple background per item but on explorer the background is not fullscreen and is displaying on the half right screen
    a solution?
    Thanx

    ·

  92. Gurkan Sengun Author Editor

    why would jquery supersized not load on iphone or with safari? affected url is http://www.aiei.ch/ any hints are welcome, thank you.

    ·

  93. Teren Author Editor

    Yes, with all the browers.. check it again.. it still has these problems.. do you know how to solve it? thanks!!

    ·

    • Sam Dunn Author Editor

      Teren,

      There is nothing wrong that I can see from looking at your site page. In your slides array, your numbered slides aren’t in sequential order, but that’s all I can think of – I have no indication that there is a problem on my end since it shows the same 4 images in the same order every time.

      ·

  94. Carlo Author Editor

    Hi,
    In the api documentation there is this:

    “api.getField( field )
    Toggles between pause/play states. Changes the vars.is_paused variable to true/false accordingly.”
    The explanation is the same for the previous command, so I think it’s a mistake.

    And, one question: is there any way to put a div with some text over any slide? I mean, a different text for each slide. How would I do this?

    Thanks and good work.

    ·

    • Sam Dunn Author Editor

      Thanks for pointing that out, I’ll make the update!
      I had posted a few times in the comments above regarding possible ways to tie divs to slides, hope that helps.

      ·

  95. Sam Dunn Author Editor

    Hello Guys,

    Holy smokes we’ve had a lot of comments on this post, thanks to everyone that participated. At this point I’ve put up the post for the release of Supersized 3.2, so I’m moving all conversation over there:

    Post: http://bitly.com/obBzbb
    Project Page: http://buildinternet.com/project/supersized/

    Thanks,
    Sam

    ·

 

Build Internet by One Mighty Roar. Since 2008.