Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin

Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. We thought it was time for an update.

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!

Introducing Supersized 3.0

Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. It was later updated during spring 2009 to version 2.0 and has laid untouched ever since. During this update hiatus, the comments stacked up – they demanded thumbnails, scrolling, better performance, and a number of other requests that I took into account this time around.

Over one year later, I’m happy to announce Supersized 3.0 – enjoy. Visit the project page for more details.

Features

  • Resize images to fill the entire browser window while maintaining proportional dimensions.
  • Fullscreen slideshow complete with transitions, navigation, captions, and preloading.
  • Integrate with existing sites or create your own portfolio gallery.

New in Supersized 3.0

  • Added scrollingyou can have your site on top of Supersized.
  • Increased performance for larger number of images.
  • Images are now loaded from an array.
  • Added thumbnail navigation.

Questions, Thoughts, and Dreams

I have done my best to include a healthy number of demos showing potential uses on the project page, they should help you get started and answer a lot of your questions.

As always, please leave any questions, requests, or bugs below. If you end up using this plugin, provide a link – I love to see it in action.

License

Creative Commons Attribution 3.0 License
*If you want to share this plugin with others, link directly to this post, please do not directly link to the download or host the current version on your site. Other than that, if you feel so inclined, provide a link back if you end up using it (not required, but appreciated).

Header image contains browser window by Liam McKay and background by Interfacelift


A Note on Support: If you’re experiencing problems with the plugin, or want advice on how to modify it, you can post a comment below. Even though we read these comments regularly, we can’t keep up with the volume of “How can you make it do XYZ…” requests. We’ll try to fix any issues, but please don’t rely on these comments for a direct how-to fix for something custom. This includes integrating to WordPress, changing content, etc. Thanks!

Posted Sunday, November 7th, 2010 · Back to Top

SPONSOR

Add Comment

294 Comments 27 Mentions

  1. Boba Author Editor

    Awesome plugin guys, got to find myself a project to use it on :)

    ·

  2. Aamir Author Editor

    GREAT FEATURES!

    ·

  3. Ralph Author Editor

    Cool… the new version. Especially the static background (no slideshow) option. I’ve tried in the past to get this to work with the 2.0 version, but then FF didn’t rendered the background at all. Thanks for the update!

    ·

  4. depi Author Editor

    Another very nice job…but ATTENTION, in this new version, with IE8, the thumbnail images are cuted!! (all it’s OK with Firefox).

    Bye

    ·

    • Sam Dunn Author Editor

      Thank you for pointing that out, I have updated the source files to correct this problem.

      ·

      • webmastro Author Editor

        Probably I did not understand, why do not know much English (I apologize for that), but the thumbnail images you still see evil su IE8.
        How it works?
        Thanks and compliments.

        ·

      • rache Author Editor

        still does this in IE for me, I’m a complete novice, though willing to learn, what do I need to do to make it work?

        ·

      • Sam Dunn Author Editor

        Add height:auto; to correct the thumbnail distortion.

        ·

  5. Miguel Oliveira Author Editor

    Great plugin… I want to set the images in a random order… Can I do this? How?

    ·

    • Zach Dunn Author Editor

      This version doesn’t have support for it, but if you’re keen on JavaScript and/or jQuery it shouldn’t be hard to throw in your own function.

      ·

      • Nick Author Editor

        Nice work all around, well supported.

        So, randomly generated images, yes, but where would that code go? I have a couple scripts, even a jQuery script, just not sure how to plug them in?

        Much thanks, N

        ·

  6. Chris Author Editor

    hi guys.

    great job. i used 2.0 but never with transitions, because it was slow and laggy. it seems to be fixed now :)

    IE9 Beta: Thumbnails cut off just above the “bottom bar”

    do i have to use the slides : [] or is there another way like in 2.0 where I put the content between ?

    ·

    • Sam Dunn Author Editor

      Thanks for the heads up on IE9, it’s appreciated.

      In terms of using the slides array, Supersized now pulls exclusively from the array and automatically puts the slides into the #supersized div tag. You aren’t required to provide a link or title for each image.

      You shouldn’t need to put additional content in the #supersized area, it is reserved for just the slides. If you are looking to place content, I provided an example in the download which shows how to place content on top of the slideshow.

      Hope that helps.

      ·

      • Marco Ottolini Author Editor

        I absolutely need to let Supersized retrieve the images like the 2.0 version did.
        I will look into the code and try to add a “2.0 compatibility” mode…
        If you have any hint, I appreciate

        ·

  7. Ste Author Editor

    This is great. Is it possible to add a carousel (of thumbnails) of all the images in the bottom bar?

    ·

    • Sam Dunn Author Editor

      This was something I considered, but given the file size and the potential for dozens of images, the load times and transitions would be lacking. For the sake of performance, I have avoided adding in that functionality.

      ·

      • yeoung Author Editor

        Please do that SAM!
        i begyou… make all thumbnail 50px x 50px
        BIG HUGS FROM INDONESIA!

        ·

  8. Beben Koben Author Editor

    its a cool…so supersized \m/

    ·

  9. guillaume Author Editor

    work great in chrome but when I open it in IE it’s just loading and loading and the backround does not show up … any idea ?

    ·

    • Tomas Author Editor

      I’m having the same issue; works fine in Chrome and Firefox, but hangs at loading screen on IE 8.

      ·

      • Tomas Author Editor

        guillaume, I seem to have corrected my issue with IE by making sure that all slides had a URL associated with them. In Chrome and Firefox, the slides would render without it, but in IE it would not unless there was a link included for each. Hope that helps.

        ·

      • GUILLAUME Author Editor

        ok so u mean link back the image to itself in this way user wont go anywhere else ?

        what your website that I can see ?

        ·

  10. Stephen Webb Author Editor

    Having seen this used in a number of projects I can see that this update will quickly be snapped up, especially due to the transitions capabilities. If used in the correct design this plugin can be very effective and really add to a user experience on a site.

    I’d like to know how it performs in the different browsers, especially Internet Explorer version 6, and I assume that a fair amount of processing power is required to make the plugin run smoothly.

    ·

    • Sam Dunn Author Editor

      I can appreciate your concern for browser compatibility, but I would remind you – even Google has stopped supporting IE6.

      http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html

      ·

      • Philip Author Editor

        Doesn’t perform in IE6 (no resize), but no matter… more importantly, I’m not getting the desired result in IE7: my background image gets pushed to the right. Have a very simple page: nav list (positioned relative, top left, z-index 5), div with supersized img (z-index -1), footer (absolute position, bottom left) in use with supersized.3.0.js. Is it my footer? Btw, possible to post screenshots here?

        ·

  11. Walter Apai Author Editor

    Excellent Article given by you, thanks a lot. Keep posting more.

    ·

  12. Chilzap Author Editor

    Amazing plugin. Thanks for sharing.

    ·

  13. George Author Editor

    Just Great!

    ·

  14. Maurice Author Editor

    Hi,

    Great plugin! Except it gives an error in WordPress… Is it a plugin that I upload or do i’ve to do something?

    “something about a header”

    Hope to hear!

    Greets

    ·

    • Sam Dunn Author Editor

      Hey Maurice,

      This is not a WordPress plugin, it’s a jQuery plugin. This means that you will have to actually work it directly into your markup and site code. I have provide multiple examples in the download to get you started.

      ·

      • Maurice Author Editor

        Allright! Thanks for the quick reply!

        ·

  15. Bryan Author Editor

    Is there a way to use Supersize to make a full-screen video instead of photo slideshow? Not Flash, but more of a HTML5 or MP4.

    ·

  16. Apostolos Author Editor

    Can this be added to a WordPress theme? I currently have a flash site and I’m trying to build a WordPress site and if you look at my old flash site it has a similar look to your plug-in, that i’d like to emulate in my new site. The WordPress theme that I’m trying to set up

    http://themeforest.net/item/photoshot-photo-blogportfolio/full_screen_preview/108551

    has the capability of adding large pictures but not quite fullscreen.

    ·

    • Sam Dunn Author Editor

      Short answer, yes.

      As I mentioned above, you can integrate this with WordPress, but you will need to add it directly into the source files, which means you will need some experience with HTML/CSS. It is a fairly quick setup and I have provided sample demos in the download to address these exact type of concerns.

      ·

      • Apostolos Author Editor

        Thank you very much for your quick reply. Could I pay you to do it? If so, how much would you charge? You can email me if you’d like.

        ·

  17. antoine Author Editor

    Great plugin, thanks. I used it on several sites, I am just disappointed by the performance aspect when using several images with high definition, but I guess the problem is on the browser side. Especially IE8 is very very bad in handling those. I didn’t have any other choice than to cancel the transitions and use one single image…
    Do you have any advice in order to correct this performance issues?

    ·

  18. Chris Author Editor

    Hi, is there a chance to give us some more informations on how we can add Supersized in WordPress?

    ·

    • dusty Author Editor

      Dude, c’mon now. Sam answered this question twice the day before you made this comment. And it’s mentioned at the bottom of the post as well. Take have a second to read before you bother developers with obvious questions.

      ·

      • dusty Author Editor

        * “half” a second

        ·

  19. kalahaine Author Editor

    Thanks for this very great plugin.
    I am currently trying to use it in a different way than the one presented here :
    I would like to be able to define different groups of slides and to choose the one I want to use according to a parameter passed as a querystring.
    Have you got any idea on how I could achieve it ?

    ·

  20. Ignacio Author Editor

    Hi could you help me make it noConflict?

    I changed the first part using $j=jQuery.noConflict() but when it calls the resize function from supersized.2.0.js it doesnt work. I tried including the $j variable in every $ of supersized.2.0.js without success.

    Anyone who uses Joomla might be needing this since it conflicts with Mootools.

    thanks, great work.

    ·

  21. Prolinks Author Editor

    Great product…I would love to see the ability to allow .FLV & .SWF file to show sull screen in the background also.

    Thanks again!

    ·

  22. inspiral Author Editor

    First: thanks a lot for this and for sharing your knowledge, it’s a great piece of codes!!

    Second: yea, here comes the questions. :) I’m new to web programming and trying to do as much as possible on my own, but im stucked at this point. I’d like to rewrite and use the 3.0 revision as a background setting part for my website. So i don’t want to use the slideshow feature, but somehow to load images from a list in a non-linear way. I think i can do the list handling, filling stuff, but i can’t see how could i trigger the load of the picture.

    By checking the ‘prevslide’, ‘nextslide’ ids in ‘navigation’ section, I can’t see in the code how it does trigger the load of the picture.

    Could somebody pls point out the direction to go?

    ·

    • inspiral Author Editor

      Ok, never mind. I found it, just had to ask… :)

      ·

  23. Paul Author Editor

    Thanks for this. Is there a way to make the transitions between the images smoother. Instead of just switching out the images, can it fade one out and then fade the new one in slower? I’m not talking about the fade setting, I mean just a fade in and out effect so it isn’t so jarring. Thanks.

    ·

    • Faisal Shahzad Author Editor

      Also need that.. with some fade in and out or some good transition effect.. please help any one.. :)

      regards

      ·

  24. Kevin Oh! Author Editor

    Love the 3.0! This is just what I was looking for on a current project. I had resorted to using the bgstretcher by Ajaxblender but wasn’t super thrilled. But with the new features of having my site on top of the slideshow and not needing a link on the image, it was a no-brainer to go with 3.0.

    One question… I like the vertical_center option. However, it controls not only vertical but also horizontal centering. Is there a way to separate the two or override the setting for one or the other???

    Thanks!

    ·

  25. Dinesh Verma Author Editor

    Recently a read an article on adding videos to slider gallery, is this possible with this too. If yes, then it will be great!

    ·

  26. Christoph Author Editor

    Great plugin! Is there a way to put content above the #supersized DIV? I mean not to overlay it, but to have content before #supersized. When I apply top:200px for #supersized the image gets cut off at the bottom.

    ·

  27. chuck Author Editor

    can you run all your flickr photos as the background images, rather then putting them in 1-by-1?

    ·

  28. Bold Author Editor

    Hi Sam, thanks for your great plugin!

    I have a question, is there a way to prevent the background image from going below a certain size? For example a min. height that prevents it from becoming too tiny when the user chooses to make the window really small. Thanks!

    ·

  29. Michelangelo Author Editor

    Sup friend

    This is so amazing. Too bad I’m a dumb newbie and don’t know how to use it.
    Say, is there any way you could point me to a helpful resource with regards to how to “install” this kind of thing? I’ll really, really appreciate it a lot.

    Thank you so much

    ·

  30. Tommy Author Editor

    Nice script, thanks guys.

    Would it be possible to run this script twice, next to each other, sharing 50% each.
    Creating an almost Book like experience?

    I am desperately trying to achieve a circular photo gallery split into two divisions, sharing the same image array, displaying full screen. With click control. (much like the old flash flip page effects, but just with a simple fade transition)

    Any hints tips, answers or suggestions to other scripts would be appreciated

    Tommy

    ·

  31. Michelangelo Author Editor

    Please help me. I’m desperate. I’ve looked everywhere and haven’t found any help online.
    I’m sorry for being impatient but this plugin is brilliant and I need to get it on my blog. It does work on blogs like Blogger and WordPress, right? Please, please can you point me to some phelpful resource with regards to how I would install this on my blog.

    I’ll honestly appreciate it so much.

    ·

    • Zach Dunn Author Editor

      This is a jQuery plugin that can be used in the template files of a WordPress theme. You can certainly use this on your site, but it will take some knowledge of jQuery/HTML/CSS/Wordpress to make happen.

      ·

  32. Dan Author Editor

    Hey Zack! Love this plugin. Do you know of a quick way for me to set it so that it starts out paused for the slideshow instead of playing?

    thanks!

    -dan

    ·

  33. inspiral Author Editor

    Hello Guys!

    I’ve used this cool plugin on my very first website and found a strange thing. Since i doesn’t need the slideshow feature, just to set the full background by different triggers, i made a mix of the core and full version of supersize js code. So here is the site: http://www.olgoya.com
    The ‘feature’ at the moment is that if you move the mouse over or out the ‘olgoya’ logo a color or greyscaled image is loaded. The unwanted feature is that after 5 or 6 in/out it becomes significantly slower and slower…. Same on FF and IE8 as well. I don’t know if its because of my wrong adaptation of your idea or its a limitation of jquery or whatever.
    The other thing is that i’ve inserted a jquery menu on the page and it works smootly on FF but very slow on IE. Plus on IE if i do a lot in/out as i mentioned the menu becomes more and more slower too.

    I would really appreciate if you could have a look on the code and tell me if you see anything wrong. Thanks a lot!

    ·

  34. Peter Author Editor

    Fantastic script!

    Do have a question. If I view site through iPhone, unable to scroll down. Anyone else with this problem? Also, happens with demo site.

    ·

    • Andrew Author Editor

      Yeah, it won’t work on iPhone / iPad because they aren’t capable of dealing with jQuery and all that it can do.

      The best thing to do is use server side code to detect iPhone/Pad and serve it something different. I had the same issue on a site I just completed and used that for my solution.

      Great plugin!

      ·

      • Marvin Schröder Author Editor

        The only thing to do for working on iPad/iPhone is to change “overflow: hidden;” on “body, html” to “overflow: auto;”!

        But you have to do this with a pre-user-agent analysis (like TeraWURFL) or at least CSS3 media queries – so you know when your visitor is using an iPad (tablet) or an iPhone (mobile) and you include an extra CSS file for the new CSS declaration.

        ·

  35. Omar Author Editor

    Hi, is it possible to include this plugin in a Joomla 1.5 Template?

    ·

  36. Prof.Yeow Author Editor

    great gallery!! i will try to put in my wordpress

    ·

  37. Craig Author Editor

    This is an amazing plugin. My only concern is the image loading when you have a large number of large images – do the perfomance improvements in version 3.0 address? Or are there other ways in which this can be addressed – e.g. jQuery LazyLoad?

    Also, do you have any recommendations regarding the pixel dimensions of the images (quality versus size of image).

    Thanks.

    ·

    • Dan Author Editor

      This is a good question I would like to know also. I have mine set for 1080×720 just because I want them to look good if they go fullscreen, but I am noticing that they don’t have enough time to load. Also the transitions struggle.

      Any optimal settings?

      ·

      • Zanzuar Author Editor

        Thanks for plugin!!!!

        This site ( http://www.brandrepublic.nl/#/home )use similar plugin but loads faster and animation is smoother. Preloading perhaps?

        ·

      • Zanzuar Author Editor

        Good example of the same thing brandrepublic.nl
        Why it’s faster and smoother? Preloading perhaps?

        Thanks, keep it up. Great plugin.

        ·

    • Paul Author Editor

      I think that you need to re-size your images for web. In Photoshop, save the images at 72 dpi and then save for web. I would aim for about 500kb or less for full screen images.

      ·

      • vi54 Author Editor

        500kb? subtract 400 from that… for a MAX. on kb’s.thats more in terms of “optimal”

        ·

  38. Filipe Author Editor

    Does anyone know where I could find a script for a slideshow just like this website http://catrabbit.com.au/

    ·

    • yeoung Author Editor

      yo zachdunn answer this! :D any help appreciated~

      ·

      • Zach Dunn Author Editor

        Unless I’m missing something. That’s pretty much what this plugin does. Assuming this wasn’t a marketing attempt, what specifically did you mean?

        ·

  39. Benoit Author Editor

    Amazing plugin, exactly what I wanted to put on our website for having our background images to be changeable…
    Thank you much for it, it’s so good work.

    Good enough in fact to make me give you a real feedback on animation bug I encountered… I tried to show you as much precisely as I can so you can see what’s going on with Chrome, Firefox and Safari (I’m on a Mac).

    The transition just does not appear even though it’s occurring somewhere in the non-visible area.
    To show you what I mean, I recorded the screen while changing backgrounds, with the screen zoomed-out so you can see what happens “outer screen”.
    During the video, I resize it to 100% so you can appreciate what really happens while changing background, and reput it after then to zoomed-out state.

    Here is the video : http://www.youtube.com/watch?v=FtsdvLBccIc

    It also shows that the plugin does not handle very well the zoomed pages in browsers… If I ever can give a hand on coding, let me know, as I’m a developer myself… Greetings again, really appreciate your work.

    ·

  40. gunness Author Editor

    Hi,
    thank you for sharing your work.
    Question: When Java Script is turned off – is it possible to show the picture (without sizing) in the background?

    ·

    • Zach Dunn Author Editor

      You can do that using regular CSS background styles.

      ·

  41. greghudd Author Editor

    Hi. Supersized is great stuff and works great. Thanks.

    (wondering out loud) if there some way to add/alter this to give me a (sorta) ‘Ken burns effect’? I am thinking of something similar to the iPad ‘flipboard’ app. Which fades in a full screen background, pauses, does a ken burns left, right or a pullback effect, stops then fades in next image full screen and repeats new content. Obviously (flipboard) ‘fullscreens’ the image to approx 75% else it couldnt go left right without hitting the edge of the image. This is a very powerful technique to grab attention to static images.
    Just wondering if anyone else has seen a similar technique applied to ‘supersized’ or a similar jQuery addon.

    Cheers GH

    ·

  42. Michelangelo Author Editor

    Can someone please try to help me?

    ·

    • Zach Dunn Author Editor

      Michelangelo,

      Unfortunately we don’t have the availability to undertake custom projects like this at the moment. If you download the example files you will see a sample that uses Supersized under a content area. If you have a moderate understanding of CSS/jQuery, you should be able to edit a custom theme from there. Good luck!

      ·

  43. Omar Author Editor

    Hi, does anyone know if it’s possible to integrate Supersized in a Joomla Template?
    I need to have a linkable fullscreen background image… Thanks!

    ·

  44. Daniel Author Editor

    Hey, I’m really sorry if this has already been covered, I did look through the coments, but I can’t seem to find the answer.

    What I would like to be able to do is call a specific image to fade to. i.e in my menu bar:
    About us (image1) – Service (image2) – Portfolio (image3) // with upto about 10 different images all attributed to html or CSS code. Is this possible?

    I found something close at : http://www.cyberward.net/photography/ but if you click on the same link twice it falls over and the screen goes blank.

    Any ideas with Supersized 3.0?

    Help much appreciated in advance.

    Cheers

    Dan

    ·

  45. MacGeol Author Editor

    Hit there!

    Thank you again for that great work. I’m following the improvements of that helpful work.
    Beside the good improvements of reactivity on loading and transitions, I have to tell that I’m a little disappointed about the way images load.
    As some many people here i think, I’d love to see this plug-in able to random load images from just a given folder and load the next image just when the current image is displayed.
    Thus you could add three options to settle :
    Random : 0 or 1
    Images Folder Path : /folder/
    Number of images : integer
    I’m trying to do that but i’m afraid my skills in java and JQuery are not so good (nore my english sorry ;-) ). Then i hope i’m not the only one to work on these improvements.

    Tell me if you find they are interesting and possible improvements.

    And once again : thanks a lot for that great work

    ·

    • Marco Ottolini Author Editor

      You simply can’t do that.
      How can you guess the name of the images to be loaded from a remote folder?
      It can work if the images have all the same name in the form image-1, image-2, image-3, etc.
      In this case you should a fourth option:
      prefix name: image-

      ·

  46. Tom Author Editor

    Awesome work on the plugin, very cool. One question, is it possible to have a link, be it a thumbnail or text link that points to and skips to a specific image rather than just the next or previous image?

    Thanks guys.

    ·

    • Luca Author Editor

      I’d like to know it too

      ·

      • Sam Dunn Author Editor

        Short answer, yes it is. I have done this for some custom Supersized gigs – this is something that I’d possibly look at in future versions.

        ·

  47. peter Author Editor

    Thanks for this great plugin!
    Is there a way to link the captions(external link to flickr) instead of the whole image?

    Thanks
    P.

    ·

  48. Carlos González Author Editor

    Hi! Is there a way to alternate css stylesheets (ex. style1.css, style2.css) at the same time the slide changes?
    Kudos!

    ·

  49. Mark Author Editor

    I’ve found an issue with calculating the browser height.

    When I added this CSS for an image:

    #logo{ background-image:url(‘logo.gif’); width:591px; height:397px; margin: 30px auto; }

    The margin:30px for the top margin causes a problem when the window is resized to be tall enough compared to the width so that this if clause (in supersized.3.0.core.js) kicks in:
    if ((browserheight/browserwidth) > ratio)

    What happens is that there is a 30px margin of blank space at the top of the window that appears.

    This is occurs on the Mac in both Safari and Firefox.

    ·

    • Mark Author Editor

      P.S.: the sample for this is at http://tinyurl.com/2attvvf

      ·

      • Sara Author Editor

        Hi Mark,

        I’m also having the same problem with the extra space on top.

        Hope someone can help out…

        Thanks!

        ·

      • Zach Dunn Author Editor

        Hi Mark & Sara,

        Seems like this might be something that might require some attention our end. I’ll speak with Sam today about and see what he thinks.

        For the record, we’ve put together a list of reported bugs in 3.0 and we’re planning on releasing a patch soon (plus Flickr integration). We’re swamped with client work this week so unfortunately we can’t jump on it immediately. If you find a workaround in the meantime, please share!

        ·

      • Mark Author Editor

        After lots of experimenting, I found something that works, although I don’t know if it has any other side effects.
        In the file supersized.css, under #supersized img, #supersized a:
        changed position:absolute; to position:fixed;

        Was there a reason you were using ‘absolute’ instead of ‘fixed’? I’m just wondering what effects the change might have.

        ·

      • Mark Author Editor

        Another PS: this site has some interesting info: http://css-tricks.com/perfect-full-page-background-image/

        ·

  50. Dante Lopez Author Editor

    Hi..

    I am planning to use this on my project. May I ask how will I disable the auto-play? Whenever the page loads it automatically plays the slideshow.

    Thanks

    Regards,
    Dan

    ·

    • Zach Dunn Author Editor

      Hi Dan,

      I think we’ll have to include an autoplay parameter in the next revision.

      In the meantime, you might try editing the plugin to remove the timer if you’re comfortable with jQuery. Alternatively, the sloppy (but usable) workaround for now would be to just have an enormous interval set by default (e.g. 10 minutes). I’m not proud of it from an optimization standpoint, but it would likely solve your problem.

      ·

  51. Sara Author Editor

    Hey Zach,

    I couldn’t reply to my earlier post…but I think I may have found a workaround to the blank space issue.

    In the supersized css document change:

    #supersized{
    position:fixed;
    }

    to

    #supersized{
    position:fixed;
    top: 0px;
    }

    It’s worked for me! I love how the simplest thing can take hours to figure out…

    Regardless, thanks for a kick ass script!!

    ·

    • Mark Author Editor

      That’s funny, right after I posted the solution above, I saw that you had already found (almost) the same answer!

      ·

  52. Dante Lopez Author Editor

    Thanks for the quick input Zach. I am looking forward for the next revision.

    Nice script you got there, definitely recommendable for quick solutions.

    ·

  53. warballs Author Editor

    Hey Sam, fantastic plugin! I have found it very useful on a number of sites. I do have one question which you may or may not be able to help with. I have performed extensive cross browser tests – IE 6, 7, 8, Chrome and FF & Safari on both Mac and PC – and on some of these the fade transition seems to run a little ‘blocky’. There doesn’t seem to be any commonality between those that run smooth and those that are staggered as even those that are running little other than the browser run slow and machines that have a lot of apps / plugins going seem fine periodically. I just wanted to see if this was a problem you or anyone else was familiar with as otherwise this is a great piece of kit! Thanks for taking the time to read this.

    ·

  54. guillaume Author Editor

    not working under IE :S its just lading and loading without showing any image… any idea how to solve?

    ·

  55. Marty Author Editor

    Hi Sam, great plugin – but doesn´t load with windows/ie8. Loading the page generates error:

    Message: ‘slides[...].url’ is null or not an object
    Line: 23
    Char: 3
    Code: 0
    URI: supersized.3.0.js

    How can I solve this?

    ·

    • Fellipe Author Editor

      I just had the same problem. You forgot a comma (,) after the last parameter.

      Do it, easy to fix =)

      ·

      • Marty Author Editor

        Hey, no other problem – I had to remove the comma after the last image slide – now everything works fine! Also fixed the problem, that in IE the content box is transparent. Look for workaround with PNG

        ·

  56. balanza Author Editor

    Very useful, I’m gonna use it on a website i’m building.
    I guess would be better if there’s no explicit reference to $(“#supersized”) in the library core code, and not to write options directly in the $.fn.supersized prototype.
    jQuery plugins usually work in a way that let you do something like:
    $(“#myID”).myPluginConstructor(options)

    Sorry if it sounds like I’m a stuck up person, I’m not, I’m really thankful for your job

    ·

  57. frey Author Editor

    Wonderfull, great job!

    ·

  58. Jared Author Editor

    Supersized is great exactly what is was looking for but i need to use it along with lightbox2. Im using Supersied for the background and light box for a photo gallery on top. I keep getting an error. Is there a way that I can use both the scripts together without the javascript code conflicting?

    thanks

    ·

  59. pia Author Editor

    aarrgg this is so good!
    will be updating my site with the new version soon.
    I can’t thank you enough, keep up the awesome work!!

    ·

  60. alex Author Editor

    Hi,

    Great plugin, testing it out and i have a question. How is the url used? With firebug i can see the <a href's but the images can't be clicked.

    I just put your plugin into an already existing page might be some sort of conflict but i can't see it??

    Any tips, suggestions?

    ·

    • alex Author Editor

      hmm, i am using a wrapper and content-wrapper div and when i remove both it seems to work, But i like the background to be clickable how do i accomplish this??

      reegards

      ·

  61. tony Author Editor

    Nice plugin. Is it possible to have this applied to just a container div? Thanks.

    ·

    • Sam Dunn Author Editor

      Yessir, it currently uses the body as an umbrella container for everything. If you alter all the CSS to reflect a different top level container, it should work fine.

      ·

  62. carlos Author Editor

    so we are using the supersized, in a smaller form actually, I shrunk it down to use as a basic slideshow on our site. Works very nicely. Love the supersized version too. and V3 is real nice.

    Question. Since I made these smaller, is there a way to use multiple “Supersized” slideshows on one page?
    Most likely have to use different ID’s or classes. Probably. Just a question if there is that possibility so I don’t have to rip all of our code apart to make it work with multiple slideshows on one page.

    Thanks in advanced. You can email me directly if you would like to. I can show you examples if need be. Great work you guys do.

    ·

  63. Asfahaan Author Editor

    Very nice plug-in. I am using this plugin for a project of mine. Is there an option to randomize the images?
    Thanks!

    ·

  64. Trillian Author Editor

    Supersized is great.
    I use it with a single background (no slideshow) and content on top.
    But when i resize the browser i want the background-image not get smaller then 1024×768. In Supersized 1.0 there was the option “minsize”. But how do i accomplish this in Supersized 3.0 ?

    ·

    • Sam Dunn Author Editor

      Thanks for bringing this up, min-size didn’t seem to be a popular option so we got rid of it. Some browser automatically dictate a minimum size so we left it at that.

      I will consider bringing it back for a future update if I hear more people requesting it.

      ·

      • zander Author Editor

        Yes please!!

        Minsize is avutally pretty important if you’re laying content over an image – for instance, if an image has an area of black over which you would like to put text, using minsize is one of the only ways of ensuring that it doesn’t spill out of this black part of the photo into the busier parts (if that makes sense!!).

        The short version – bring back minsize please!!

        ·

      • eric Author Editor

        +1 on bringing back minsize

        ·

    • Kathy Author Editor

      Hi thanks for a really great plugin. I would like to add a + on the minsize feature request.

      Also some answers to questions I saw earlier. Maybe these got answered already, but I couldn’t find these myself when I was looking for it so here goes:
      - there is a Joomla (1.5 and 1.6!) template from http://www.joomspirit.com that uses this plugin. Template is called ‘full screen’. Really well documented and very affordable.
      - it took me a while to realize that the top portion of my image was missing. after rereading the instructions, i noticed the vertical_center property. now my image is shown from the top left corner. I noticed more people needed this.

      ·

  65. Luis Author Editor

    Hi there guys, what a great job it’s done here, f*ckin’ love the plug in.

    But (always must be a but, god damn it, dont you think? hahaha) I want to have more than one supersized… why this? cuz’ im not using it for the bg of my site, I’ll show my photography portofolio with it, so, i wanna know if this its possible :)

    thanks guys

    Luis, from Chile (sorry 4 my bad english)

    ·

    • Sam Dunn Author Editor

      Luis,

      You can use Supersized across multiple pages, but it would involve some serious customizing to allow multiple instances on one page, which is really outside the original intent of this plugin.

      Thanks for the kind words

      ·

  66. Rick Author Editor

    Hi guys. First of all; great plugin!
    I’m using it for a website, but i want to implement my own thumbnails with an onclick event for the preferred background.
    Is this possible, and if yes; what will be the syntaxis for the ???

    Many thanks!
    Rick

    ·

  67. guillaume Author Editor

    wow thank you ! it work now on explorer !!!

    ·

  68. inspiral Author Editor

    Slides doesn’t fade…. I kept this part of the ‘supersized’ code and don’t understand why.

    If you select ‘textiles->body->some clothes’ the background changes. And if you click on ‘contact’ it sets back.

    http://www.olgoya.com

    Any idea?

    Thanks!

    ·

    • Sam Dunn Author Editor

      Nice modification, unfortunately since it falls outside of the original plugin scope I don’t know offhand, but you are completely stuck shoot us an email, we get hired frequently for this sort of thing, maybe we can work something out.

      ·

  69. alex Author Editor

    Hi,

    I have made a simple adjustment so i could randomize the images
    I downloaded jquery.shuffle.js

    and
    [code]
    $(function(){
    slidesTest = [
    {image

    }, etc
    ];
    slidesTest = $.shuffle(slidesTest);

    $.fn.supersized.options = {

    slides : slidesTest

    };

    $('#supersized').supersized();
    [/code]

    Hope this help.

    ps: any answer on my previous question

    ·

    • philsn Author Editor

      First of all, this is a grat piece of work. Thank you for that Sam.

      I’m trying to use supersized in my WordPress template. Ideally, a random background picture (from a list I provide) should fade in on every page refresh.

      This is my script:

      <script type="text/javascript" src="/supersized.3.0.js”>
      <script type="text/javascript" src="/jquery-shuffle.js”>

      slideURLs = [
      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/tower.jpg'},
      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/fence.jpg'},
      {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/tracks.jpg'}
      ];

      //randomSlide = slideURLs;
      randomSlide = $.shuffle(slideURLs);

      $(function(){
      $.fn.supersized.options = {
      startwidth: 1280,
      startheight: 800,
      vertical_center: 1,
      slideshow: 0,
      navigation: 0,
      thumbnail_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,
      slides : randomSlide
      };
      $(‘#supersized’).supersized();
      });

      As it is, this script doesn’t work. When I use
      randomSlide = slideURLs;
      instead of
      randomSlide = $.shuffle(slideURLs);
      it works but always takes the first picture from the list. It nevertheless shows that the code works in principle except the shuffling. So if anyone or Alex in particular (since you seem to have realized that) has a solution, please provide me with details what I’ve done wrong. I guess multiple visitors here would be interested in this as well.

      Thank you in advance and best regards,
      Philipp

      ·

      • Cédric Author Editor

        Philipp,

        Your declaration using a wrong at end:
        “/jquery-shuffle.js-”-
        Maybe not affect the script but..
        :-)

        Regards

        ·

      • Cédric Author Editor

        A wrong quote, sorry.

        ·

      • Cédric Author Editor

        Random doesnt work for me :-(

        [code]

        $(function(){
        $.fn.supersized.options = {
        startwidth: 1280,
        startheight: 800,
        vertical_center: 1,
        slideshow: 1,
        navigation: 0,
        thumbnail_navigation: 0,
        transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
        pause_hover: 1,
        slide_counter: 0,
        slide_captions: 0,
        slide_interval: 9000,
        slides : [
        {image : 'slides/40_1.jpg', title : '40', url : ''},
        {image : 'slides/41_1.jpg', title : '41', url : ''},
        {image : 'slides/41_2.jpg', title : '41', url : ''},
        {image : 'slides/42_1.jpg', title : '42', url : ''},
        {image : 'slides/42_2.jpg', title : '42', url : ''},
        {image : 'slides/43_1.jpg', title : '43', url : ''},
        {image : 'slides/43_2.jpg', title : '43', url : ''},
        {image : 'slides/44_1.jpg', title : '44', url : ''},
        {image : 'slides/45_1.jpg', title : '45', url : ''},
        {image : 'slides/45_2.jpg', title : '45', url : ''},
        {image : 'slides/46_1.jpg', title : '46', url : ''},
        {image : 'slides/48_1.jpg', title : '48', url : ''},
        {image : 'slides/49_1.jpg', title : '49', url : ''},
        {image : 'slides/49_2.jpg', title : '49', url : ''}
        ]
        };
        $('#supersized').supersized();
        });

        $(function(){
        slidesTest = [{image}, etc];
        slidesTest = $.shuffle(slidesTest);

        $.fn.supersized.options = {

        slides : slidesTest

        };

        $('#supersized').supersized();

        [code]

        ·

      • philsn Author Editor

        @Cédric: Thank you for your effort

        Can anybody else be of further assistance? I’d appreciate it.

        ·

      • philsn Author Editor

        Okay, this should work:

        function randomOrder(){
        return (Math.round(Math.random())-0.5);
        }

        slideURLs = [
        {image : 'pic1.jpg'},
        {image : 'pic2.jpg'},
        {image : 'pic3.jpg'},
        {image : 'pic4.jpg'},
        {image : 'pic5.jpg'},
        {image : 'pic6.jpg'}
        ];

        randomSlide = slideURLs.sort(randomOrder);

        $(function(){
        $.fn.supersized.options = {
        startwidth: 1280,
        startheight: 800,
        vertical_center: 1,
        slideshow: 0,
        navigation: 0,
        thumbnail_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,
        slides : randomSlide
        };
        $(‘#supersized’).supersized();
        });

        ·

      • philsn Author Editor

        Some code was removed after submitting my comment, but I guess you get it.

        ·

      • pipep Author Editor

        philsn, last solution worked for me, thank you very much, i’ve been for days working on this.

        ·

      • Micsa Author Editor

        Thank you very much, philsn, this last code works also for me.
        I finally got a random slideshow running!

        ·

    • Rodiolex Author Editor

      Many thanks Philipp!

      ·

      • Zak Author Editor

        Hi guys

        Would you mind giving a quick breakdown of where to place the codes in WordPress? I’m not sure what part of Philsn’s code goes in the header and what goes in the php theme page.

        Many thanks

        ·

  70. Robert Author Editor

    Great!!

    The only problem is transitions like “slide top”, “slide right” don’t work in IE.

    Or is there a fix for this problem?

    ·

    • Sam Dunn Author Editor

      Robert,

      I have tested all browsers with this plugin and this is the first time I have heard this – what IE are you using and have you customized the script?

      ·

  71. alex Author Editor

    hello sam & zach! hello community! many respects for the great plugin you provide us.!
    i used it for the website of our music group..
    in chrome, safari, opera plays perfect. ie don’t care (waiting for the ie9)

    but, in firefox there is something strange..
    (the supersized slideshow images are displayed from the middle of the page to the right..)

    if you like to drop an idea….here it is..

    http://109.75.160.102/~batala/

    ·

    • Sam Dunn Author Editor

      Alex,

      It seems like you have done some modifying of the original plugin, which looks quite nice, very good work.

      Unfortunately since you have made these changes, I can’t tell you offhand exactly what to do to correct it – it seems like you might have some issue relating to position, which I might try to correct by using fixed (this is a complete guess).

      If you are really in a bind and need to hire us, we can be reached via the Hire Us link in the header.

      ·

  72. punk Author Editor

    is there a way to add 10000 photos to this jquery plugin without adding one by one manually? drop me an e-mail with the answer please lic.guzman at gmail…………………

    ·

    • Sam Dunn Author Editor

      I will be sending you an email shortly.

      ·

      • Dave Author Editor

        could you pass that info on to me too?
        are you able to maybe have it pull from a web album or rss feed or something?

        ·

  73. punk Author Editor

    http://img337.imageshack.us/img337/8070/workspace1034.png
    i want to make it small like i show in this photo…to do it i had to press “ctrl -” in my chromium… :( but i want to have it small real small.. and aligned to the right instead of the left anyone can help?

    ·

  74. denoizzed Author Editor

    Great plugin, thanks!

    Do anyone else experience slow animation / poor perfomance in Firefox and IE? Chrome, Opera and Safari work like charm, animations are very smooth.

    Tried different machines, images and resolutions. Windows XP, SP3.

    Any advice on this?

    ·

    • Sam Dunn Author Editor

      I have tested on multiple machines and the only advice I can give is to limit yourself in overall image size. If your slides are high resolution, you’re probably going to hit a lot of slowdown. It’s something I’m always looking to improve, but partly is a limitation of browser and cpu power.

      ·

      • Omar Author Editor

        I used an earlier version of Supersized and the transitions are much smoother. For some reason the latest script is slower, but the code/implementation is easier…?

        ·

  75. Asfahaan Author Editor

    Hi There. Thanks for this awesome plugin.

    I am having issues using the supersized3.0 when the page is scrollable. http://asfahaan.tasmanit.com/client/kw/takepu.html

    How do I make it so that the background is always fixed (doesnt move) when scrolling the page up and down.

    Urgently help will be much appreciated as I am running out of time.

    Thanks heaps in advance!

    ·

    • Sam Dunn Author Editor

      I would try to change the background from absolute to fixed.

      eg.
      #supersized a{
      CHANGE position:absolute; to position:fixed;
      }

      ·

  76. toscal Author Editor

    Very very Nice, I was looking for something like this

    ·

  77. Mike Author Editor

    Anyone know how I might be able to lay an image (like a marker on a map) over the top of a full size scaling background image, and have it scale proportionately and maintain its position proportionately to the background?

    ·

    • Sam Dunn Author Editor

      Mike,

      I would first try disabling vertical center in the options, you would have a much easier time accounting for resizes.

      ·

  78. Sam Dunn Author Editor

    Hello everyone,

    I would like to thank you for your interest in the plugin, it’s absolutely awesome to see everyone finding it useful.

    On another note, we do our best to address any problems with the actual plugin. Many of the questions that we are starting to receive have to do with very particular customizations to individual projects, which makes it difficult to address “Why is it broken in (insert browser here)” questions.

    If you are running a customized version of Supersized and are facing errors as a result of your modifications, fear not, we are available for hire at an hourly rate and can be contacted for more information here: http://onemightyroar.com/contact

    We have done quite a few custom Supersized jobs and would love to help in that regard.

    Expect some updates in the near future, Supersized and Flickr are going to get friendly.

    Thanks,
    Sam

    ·

  79. Lance Author Editor

    I can upload supersize3.0 into wordpress plugins but when i go to activate the plugin i get an error message:

    Program does not have valid header

    then the plugin doesnt even show up in the plugin list, only in the directory.

    Can someone help???

    ·

    • Sam Dunn Author Editor

      This is a jQuery plugin, not a WordPress plugin, you will need to integrate it into the HTML/CSS directly.

      ·

  80. flo Author Editor

    hi sam,
    i think the ability to embed a vimeo/youtube code would be a necessary feature for the future. than its perfect.

    looking forward, flo

    ·

  81. Barry Crowley Author Editor

    Thank you for this great plugin Sam, it is just what I was looking for. I am using the default settings and simply changed the photos to PNG files that are 960×720. I kept the ration 4:3 but the slides are stretched beyond the browser when viewing full screen. Any thoughts?

    ·

    • Sam Dunn Author Editor

      If you turn vertical center off in the options it will lock the image to the upper left hand corner of the browser.

      ·

  82. Alex Author Editor

    is there a way of playing the images in the slideshow in a random order?

    ·

  83. Paul Author Editor

    Hi

    Thank you for a great plugin – really appreciate you sharing.

    Is there anyway to integrate a countdown timer to give the user an idea of when the slide will transition. A simple display of seconds remaining would be fine or even better an image – eg a circle forming or disappearing in segments. I have looked at other plugins but have not been able to successfully integrate.

    ·

  84. yve Author Editor

    Trying to turn off the follow on click. And Sam, couldn’t find your reference to new post where a solution may be.

    USING: default.html with thumbnails. Found the hard way that removing a comma from last URL line AND need to use URLs is what I needed to do to get IE’s to work at all. (with my skill level of course:-)

    So, could someone please please tell me how to stop the follow on click to happen with the backgrounds when using code just like the default.html in demo/download.

    FROM default.html demo (shortened example):
    {image : ‘http://buildinternet.s3.amazonaws.com//tower.jpg’, title : ‘City Clock Tower’, url : ‘http://www.flickr.com/photos etc…/’},

    I Found that if I replaced ‘url:’ with ‘scr’ or ‘image’ that IE’s did NOT work.
    gasping for a solution as if anyone clicks on a background it goes off to the picture itself. not pretty. asking please for a solution.

    I would like thumbnails so I need something like the full line above only other than URL? or? use href? dunno. sorry.

    ·

  85. Lance Author Editor

    I would really love a tutorial on making this work in WordPress. Its killing me!!

    ·

  86. Kel Author Editor

    Hi Sam! I’m in the same boat as Lance. I love what it does…but I don’t know where to place any of the code. Can you pleeeeeeaaaase give a quick tutorial on how to add the code to the WordPress theme files? I’m a beginner with code, but if I know where to place it, I should be in great shape. Please help! Thanks. BTW, can this work on just a regular HTML web page?

    ·

    • Zak Author Editor

      Hi Guys

      @Lance @Kel I just wanted to add to the request for anyone who can provide a basic guide on how to install in WordPress?

      @Beniot – Thanks for the tutorial. Any idea how to install it by just altering existing header, css and template?

      Many thanks

      ·

      • Benoit Author Editor

        @Kel and Lance – Have a look at my tutorial on the integration of Supersized in a WordPress page. You can see it in action on my About page .

        @Zak – Simply follow my tutorial but add the required bits of code to your existing files instead of creating a new copy of them.

        ·

  87. zylonne Author Editor

    I am testing supersized right now for my website. I noticed that on Firefox 2.0.0.14 running on a linux machine (aspire one limpus v1.0.6) that the static background with no slideshow is always blank.

    When I go to your demo site and look at the demo slideshow I can see it.
    However, the demo of the static background is blank – as on mine.

    Does anyone know a quick fix? I am hoping that this is only a linux issue, and that Firefox 2+ is otherwise supported….

    ·

  88. Benoit Author Editor

    I really wanted to use Supersized as a slideshow for the background of my photography website based on WordPress. After a lot of experimenting, I finally managed to integrate it into a WordPress page. It seems that I am not the only one who has tried to make it work so I thought that my experience could be useful for others. Here is how I have done it. I am no specialist in coding so this can probably be done more efficiently but the essential is that it works !
    I still need to fine tune my new home page including Supersized but you can have a preview of the result on this page.

    I have not modified anything in the code itself so all the credits go to Sam for creating this superb full screen background !

    So far, I tested it successfully with WordPress 3.0.3 in Chrome 8.0 and Firefox 3.6. I still have an issue with IE8: it behaves erratically and several attempts are sometimes needed to get to the page. Also, it takes ages to load the first image or it just hangs there loading and loading… If you have any idea on how to improve this, please tell me !

    For details of the procedure that I used, have a look at this tutorial on my blog.

    Benoit

    ·

  89. Jason Author Editor

    Hey Sam,

    Great plugin! I have everything setup, but for some reason the slideshow won’t play on this site: http://shopappa.nexcess.net/

    Any ideas?

    Cheers,
    Jason

    ·

  90. Christian Brand Author Editor

    From time to time, I build some web-sites and at the time I do use the Supersized-script for my next project – thank you very much for your work! It does work and really is a great solution. Cheers!

    ·

  91. Angela Zhu Author Editor

    Any comments on the best image size or ratio? I’m using 1200×800 images, but the images are inevitably being cut off. Is there any way to specify the focus of each image (if that makes sense)?

    ·

    • Paul Author Editor

      I have the same problem. I’ve experimented with different ratios in the script code and image sizes. I’d also like the images to not look pixelated because the Supersized code slightly enlarges the images. I’m going to give it another go here soon to try to crack the code. It’s tough. Also, monitors have different dimensions.

      Looks like these guys got it figured out, however I still haven’t: http://omnia.ae/

      They left the jQuery script code the same but have a width=1500px and height=1000px in their HTML for their images. Don’t know if the images are really that size in their ‘images’ folder. That may be the trick:

      EXP:

      Any thoughts Sam or Zach? Great script BTW!

      ·

  92. Holly Author Editor

    I have the same problem as YVE – but before I whine- this is really amazing code when you’re looking at it from a “i don’t code java, i don’t code flash and i really just want a nice, simple site to work” point of view… And I appreciate your efforts… Now is there any simple (relatively simple) way to disable the click through to flicker? I’m using the full backgroup with no controls and I want the images obviously but I don’t want to leave the website just because someone accidentally clicked on the background…

    Thanks again for your hard work.

    ·

  93. Marina Author Editor

    Hello. This plugin is just what I was looking for for a redesign and so far all is good. But what I would like to do is pass the filename to the function via onclick so I can change the background without refreshing the page. I can’t seem to get the slides array to take my variable. For example:

    slides : [
    {image : 'images/' + value }
    ]

    Is there a way to get it to work?

    Thanks!

    ·

  94. Arnaud Author Editor

    Hi guys,

    I’m wondering since few hours how to put more than only 3 pictures ???
    Is it possible ?
    Where do you change this option ?

    Thank you VERY MUCH for your answer.

    ·

    • Arnaud Author Editor

      OMG, it was an issue with the “,” at the end of the line… Grrr

      Thank’s to Andrew ;)

      ·

  95. thebettertwin Author Editor

    Good plugin, im using it as an alternative to css background cover which produces horrible performance in chrome.
    There is one problem that i would appreciate help with, however.
    It seems that when i use the simplified version just as a full page background with content on top, anchor links no longer work (eg link at bottom to scroll to top doesnt scroll back to the top).
    Thanks in advance for any advice on how to fix this.

    ·

  96. Frank Author Editor

    Nice script and I am attempting to use it in an application. I have found the top of the navigation thumbnails are being cutoff in IE 8 though. Works great in FF and Chrome though.

    ·

    • Frank Author Editor

      I figured out why the top of the thumbnail image (css) was being cut off in IE8, but the other odd behavior that still remains is the thumbnail isn’t being proportioned correctly. Instead of shrinking the thumbnail to the correct size, like it does in FF and Chrome, IE8 just shows a section of the large picture. I haven’t looked at the source code too closely yet :) But in case someone else knows the reason why already I am sharing before I investigate!

      ·

      • Richard Author Editor

        Hi Frank, did you ever get any further with resolving the thumbnail issue in IE8?

        Sam + team, great plug, although the thumbnail in IE8 (PC) is a pest. It isnt a case of using a customised script as looking at this sites example it has the same bug.

        Cheers in advance if you get a chance to take a look

        - R

        ·

  97. Fernando Morales Author Editor

    Just to say thanks! you totally made my day with this kicking ass plugin

    ·

  98. Quinn Merio Author Editor

    I have been yearning for some features in this most excellent script. I hacked a version of the source to include passing a custom event handler for onSlideLoaded. This was only one of a few things I would like to control externally. How difficult would it be to expose some of these types of methods: like play(), pause(), startAtSlide(x), init() ?

    That would require the supersizer function to pass back an object that could be controlled. Then you could do something like this: var mySuperSized = $(‘#supersized’).supersized(options); mySuperSized.pause(); etc..

    Any plans of exposing a bit of an api for this plugin to allow external control?

    ·

  99. Frank Author Editor

    Can anyone help out with how to properly add easing into this script? I have attempted to today but can’t get it 100% right. I modified the script to pass in the easing type to effects.slide.js

    el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
    if(mode == ‘hide’) el.hide(); // Hide
    $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
    if(o.callback) o.callback.apply(this, arguments); // Callback
    el.dequeue();
    }});
    But I am obviously missing something. Help?

    ·

    • Luca Author Editor

      resolved?
      I’m interested too

      ·

  100. Cédric Author Editor

    Hello,

    Thanks for the plugin! Alex told about a random effect using jquery shuffle.js. Is it possible to have more informations, codes, links to see what’s result.
    Thanks in advance,

    ·

  101. John Brits Author Editor

    For those who want multiple Supersized in one page here is a crude but effective way of doing it without modifying scripts using iframes:

    Two supersizeds using iframes

    Sorry about the formatting. I have only tested this in IE8. Bear in mind that this uses double the resources.

    ·

  102. John Brits Author Editor

    Oh it all disappeared! How do I post HTML code here?

    ·

  103. Kellen Author Editor

    For all you that wanted the random image… see below. Hopefully this code shows up.

    var images = ['slides/fence.jpg', 'slides/tower.jpg', 'slides/tracks.jpg'];

    $randomImage = (images[Math.floor(Math.random() * images.length)] );

    $(function(){
    $.fn.supersized.options = {
    startwidth: 640,
    startheight: 480,
    vertical_center: 1,
    slides : [
    {image : $randomImage }
    ]
    };
    $(‘#supersized’).supersized();
    });

    ·

  104. Micsa Author Editor

    Hi Kellen,
    I tried your code for a random slideshow. It doesn’t work for me. Maybe I put the code in the wrong place?
    var images = ['slides/slide_1.jpg', 'slides/slide_2.jpg', 'slides/slide_3.jpg',];        $randomImage = (images[Math.floor(Math.random() * images.length)] );        $(function(){            $.fn.supersized.options = {                  startwidth: 1024,                  startheight: 682,                vertical_center: 1,                slides : [                {image : $randomImage }                ]            };            $('#supersized').supersized();         });

    ·

    • Cédric Author Editor

      This script not working for me too.
      Mac OS 10.5.8 / Safari 5

      ·

  105. Luca Author Editor

    hi,
    what can I do to increase performance in sliding with high resolutions? I have a page with 4 sliding images as background and with my 1440×900 the animation is quite jerky (not bad, but if I resize the window it’s better).
    any suggestions?
    thank you, really nice plugin

    ·

  106. Jelle Author Editor

    I need the slider to end when the last image is displayed, Can’t find a way to stop the loop. Anyone?

    ·

    • Dawn Author Editor

      It’s driving me nuts, Jelle, I can’t figure out how to stop the loop either.

      I am new to jquery and javascript. :(

      Hero aka, Sam Dunn, aka smart guy, made this, Please Help, I really like your cool plug-in and I hate to have to use something else because I am too slow to figure this out!

      Thanks for reading this, Cheers, Dawn

      ·

    • Sam Dunn Author Editor

      If you are looking at the supersized js file, you can stop a slideshow by using the clearInterval line that appears multiple times throughout. Within the nextslide portion, you would need to have a conditional statement that detects if it is the last slide and then uses clearInterval to stop the slideshow.

      ·

      • Luke Author Editor

        Hey Sam, thanks so much for this plugin.

        Is there any chance you can tell us how to write this ‘conditional statement’?

        Thank you,
        Luke

        ·

  107. Matthew Author Editor

    Hey guys, Can Supersized be used with Blogger? If so, how exactly??

    Cheers!

    ·

  108. Patrick Author Editor

    Re: Thumbnails cut off

    in supersized.css
    try changing thumbs dimension:

    #nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:60px; width:80px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }

    and

    #nextthumb img, #prevthumb img{ width:80px; }

    You will get better centered thumbs. (safari 4.0.5, FF3.6)
    ( images needs to be in 3/4 aspect ratio)
    Thanks for this great plugin

    ·

  109. PiT.79 Author Editor

    Hello. I like this plugin but I would like to ask, why the transitions between the pictures are so jerky? I found another plugin, where the transitions are realy smooth (the plugin is http://script.aculo.us) If i want to use both plugins together for other elements like moving menus etc. with backgroun presentation, it does not work togeter. Do you have any idea how to fix it? I am not programmer and i play with that trial and error method. Thanks for help.

    ·

  110. Amy Author Editor

    Thanks for a great plugin!

    It is exactly what we need for the site we are working on. We have the slideshow on our homepage, automatically rotating images after 6 seconds. After about one rotation through the slides the pace begins to quicken, alternating between staying on an image only a couple of seconds and staying 3-4, no longer following the six second interval. It seems as if there are perhaps to competing interval timers, out of sync with each other, each triggering a page load.

    Has anyone else experienced time interval issues, with your slideshow quickening its pace? Any help or guidance would be greatly appreciated.

    ·

    • Amy Author Editor

      *Sorry for the typo. It should read: “It seems as if there are perhaps two competing interval timers…”

      ·

  111. Rodiolex Author Editor

    The really great work! Thanks Sam!

    How to use (to add) transition effects of jQuery Easing? In my opinion, now the visual effects in the plugin are not too good…

    My suggestion for the next version of the plugin is the asynchronous loading of photos using AJAX to reduce the time of a page loading and respectively the starting of slideshows.

    Best wishes from Russia, Alexey.

    ·

  112. Michael Author Editor

    Hi Sam, is it possible to engage you guys customising the ‘Supersized’ for a hired project?

    ·

  113. Raul Leal Author Editor

    Hey, just wanted to drop a quick note of thanks for this amazing plugin.

    I was doing some messing about for a project of mine, and added some changes to the code to toggle the auto-switch of photos.

    Came up with some spaghetti code that works, but could definitely be improved. All I did was add a few conditionals which would stop the setInterval function if slide_autoplay was set to 0. You can see it working at http://vera.raulgrell.co.uk/
    and the code at http://vera.raulgrell.co.uk/js/supersized.js

    On an unrelated note: has anyone reported any issues with using your plugin with head.js (http://headjs.com)?

    ·

  114. internet dizi Author Editor

    was doing some messing about for a project of mine, and added some changes to the code to toggle the auto-switch of phdd

    ·

  115. Luke Author Editor

    Great plugin! I’m trying to do an experiment with it – I hope someone can help.

    Is there any way I can into the .js and control how long it takes to fade between two images?

    Thanks

    ·

    • Jerry Kornbluth Author Editor

      Hi all,

      Great project.

      I’m also interested in changing the crossfade length between slides in a balanced fashion.

      In the suoersized3.0.js when I change the 750 in the code (in both places) :
      [code]
      if (options.transition == 1){
      nextslide.fadeIn(750, function(){$.inAnimation = false;});
      [/code]
      to a lower number, but even though the code says nextslide.fadeIn, it seems only to affect the fade out of the previous slide and not the fade in of the next slide so the new slide pops up quickly and the previous slide fades out (just not too smoothly) in the duration entered. (Firefox 3.6 IE 8)

      Thanks for your help.

      Jerry Kornbluth

      ·

  116. t Author Editor

    Absolutely brilliant bit of code, thanks :)

    Exactly what I was looking for too, I’ve only used it fairly simply, but I’m really happy with the results.

    http://lightsondoorsopen.co.uk/pixelpost/

    Not sure I’ve got quite the right aspect ratio mind, but I’ll figure that out tomorrow.

    ·

  117. mark Author Editor

    Any way to have different sets of slides. We want to use a navigation element to trigger a different set of slides to play. Then when you click on another link, a new set of 2-3 slides plays, and so on.. thanks so much!!

    ·

    • t Author Editor

      Why don’t you just have a few pages linking to each other, each with three different slides to play when they’re loaded?

      ·

  118. Arnaud Author Editor

    Hi dudes,

    I don’t understand why but i have an issue with Internet Explorer. I tried the gallery on IE7 and 8 but it doesn’t appears. Only the gif’s downloading.
    I didn’t change anything in the code. Just added some pics. What could it be ?
    if you want to have a look go to http://www.7underwear.com, and in the naviguation go to “Athletes”-> Gallerie…

    kind regards

    ·

  119. Heder Neves Author Editor

    Hello,

    Great plugin, thanx !

    But, we can fix the image at the top ?

    Best regards

    Heder

    ·

  120. Joke Author Editor

    Hi, thanks for this lovely solution…
    which would be even lovelier if i could get it to start with a random picture.
    I see many people asking for it, and some offering some solution, but I am not capable enough in this sort of stuff to find out why those solutions won’t work for me.
    Is there anyone who has a working example that i can study?
    Where does the code go, etc et.

    thanks!

    ·

  121. Heder Neves Author Editor

    Me again,
    forget my question, I found the solution.
    Thanx

    ·

  122. Wajid Author Editor

    Gr8888888 Works.

    Thanks for this lovely solution…………..

    Wajid Ali

    ·

  123. Jason Author Editor

    I would like to add a form to the non slideshow version, how can i do that please? THank you for sharing this template.

    ·

  124. Mads Author Editor

    Hey, guys
    I been trying to use your great work in my recent project. And a few things that I’m missing from your plugin is:

    1. Turn autoplay on/off
    2. Key input to change slide
    3. Navigation list – the most common ex. is the small dots where I can change to any picture and not having to scroll through all of them.

    I really love the http://www.serialcut.com/ website and would like to be able to make something like it more or less.

    Thanks, guys

    ·

  125. Luke Author Editor

    Yo!
    Is there any way we can get it to cycle through the images and then stay static on the last one when it reaches it? (rather than going back to the 1st slide)

    ·

  126. Frank Author Editor

    Hi Sam,
    I wrote an extension for TYPO3 which includes supersized and makes easy to configure it. Additionally I extend it with a full screenwidth banner functionality. Is it okay to publish it in the TYPO3 Extension Repository (http://typo3.org/extensions/repository/)? Including the demo images? That would break your condition not ‘to host the current version on your site’.
    Best regards
    Frank

    ·

  127. max Author Editor

    it would be nice to have an option to set the order of the images it loads at random.
    or start the first image random and from that one go thrue the array.

    ·

  128. max Author Editor

    oh, and a visible preloader would be nice if images are big or slow to load.

    ·

    • max Author Editor

      I see that there is a preloader, a very tiny one.

      ·

      • t Author Editor

        You can change that to a bigger gif of course, it’s in the CSS called preloader.gif

        ·

  129. Bledar Ramo Author Editor

    Great plugin, and effects
    thanx !

    ·

  130. Brad Shaw Author Editor

    Hi guys. Loving the new version of the plugin. I am noticing a considerable amount choppiness on the fade transition, even on a fairly powerful machine, when viewed on a large screen. I can see slide interval in the settings, but is there a way to increase/decrease the transition speed? I can’t see a setting for this.

    ·

  131. Sammy Author Editor

    Hy, nice Plugin!

    I have one question:

    I´m using the core version now. On click on a h2 i want to fire a js that replaces that image loaded by supersized.

    The supersized.js only gives me the oportunity to load the “next” image, but i´m using a navigation (with h2) that needs a specific image on click.

    Is that possible?

    Thaaaaanxxxx

    ·

  132. Ran Author Editor

    hey man!
    great plugin, thanks!

    im having a problem, since my site is in hebrew, im changing the htm dir to RTL, and it seems to stop the plugin from working in safari. is there a work around ?
    thanks so much..

    ·

    • VirtualFlavius Author Editor

      Go into supersized.css, locate #supersized img, #supersized a and change position to fixed ;)

      ·

  133. iamasq Author Editor

    hey, this a great plug in and it’s working near-perfectly for me. My one question is this, I seem to be getting some image distortion on my site. Is there a way to dyanimically generate the startwidth/startheight? (Is that even my problem? Thanks in advance for your time and awesome script.

    ·

  134. Joey Author Editor

    Fantastic plugin, it was incredibly simple to implement and looks great. I have a question/request for the developer or anyone else.

    Right now I have a static supersized background, no slideshow. Is it possible to have a list of 5-6 images and make the script load one of them at random on refresh? No slideshow, just one image – but each visit to the page it would draw from the group of images at random.

    My current implementation is written as:

    $(function(){
    $.fn.supersized.options = {
    startwidth: 2323,
    startheight:  1555,
    vertical_center: 1,
    slides : [
    {image : 'images/bg1.jpg' }
    ]
    };
    $(‘#supersized’).supersized();
    });

    Cheers, Joey

    ·

  135. max Author Editor

    I noticed that when you have a lot of pictures it preloads them all before showing the first picture. Is this correct?

    Perhaps it would be nice to have an option to preload the first 3 (or 5 or more) pictures then show the first picture and then start preloading number 4 and above. This way the first picture shows much quicker.

    ·

  136. Al Author Editor

    First of all thank you Sam for this awesome plug-in, it has become the foundation to my website!

    Are there any plans to incorporate landscape and portrait aspect ratios or is there a way for the current version to support both?

    Reason I’m asking is because currently my portrait images (which are padded to be the same aspect ratio as the landscape ones) will have their tops/bottoms cut off on wider displays.

    ·

  137. Kong Author Editor

    Hello, how do you do 2 different image layers per single slide? Both to retain its relative dimensions/aspect ratios to each other. I have a 1024×600 jpg background and would like to have a 1024×600 transparent .png logo over it. Many many thanks in advance!

    ·

  138. anxhelo Author Editor

    very good project… thanks

    i have one question:

    how can i get the current image get off and then the next image fade in?

    sorry for my bad english ;)

    ·

  139. ZUZ3L Author Editor

    Hi,

    First off: Nice plug-in.

    Is it possible to disable the initial fade in? I only use it to display a single image full screen, so when I navigate to other pages, I don’t want it to fade again.

    Thank you in advance.

    ·

    • ZUZ3L Author Editor

      I’ve found out my self. If anyone else would like to achieve this, simply replace line 23 in supersized.3.0.core.js with:

      $(‘#supersized’).show();

      ….then it’s fixed.

      ·

  140. Peter Author Editor

    Hi, Nice plugin to begin with!.
    However i wonder how to add pictures, for instance i want to have a 7pict backgroundslide. When i add a h-ref in the html the screen becomes black. It would be the bom if i could get the script to just pick a slide from the slides-file and name the slides like slide-1.jpg, slide-2.jpg and so on. Is that posible and how? directions, or tutorial uri’s are verry welcome.

    Thanks

    ·

  141. Nick Author Editor

    Hi guys, just want to say thank you very much for your amazing plugin!
    Currently using it here: http://www.beuniq.com

    ·

  142. Banreyy Author Editor

    Hi Sam,

    great plugin, but i ask myself how to insert the img directly into the supersized-div and not into to jquery-call like this one:

    slides : [
    {image : 'slides/fence.jpg' }
    ]

    How can i delete this option in supersize and insert the image into the div – tried so many options but can’t get it to work! It’s important for me because i want to make it work with my framework called modx and want to insert the image each page manually….

    some help would be nice – thx in advance

    barneyy

    ·

  143. Thomas Author Editor

    Nice work!
    It would be perfect if you could add a zoom function, and maybe and index overview – And suddenly you have made a very cool way to show online magazine without that creepy flippage that it used everywhere in flash.

    Please look at it :-)

    /Thomas

    ·

  144. Juan Author Editor

    Zach Dunn and all you guys …. thank you for this plugin, all your comments and suggestions… I’m not expert on coding :-) working on a new look for my site and I love all your work… I think I made a mess of your code… but by luck :-) it is working can wait to put all my site up in the few days…

    http://juancarlosfuentes.com/fulljcf/index.html

    (where can i donate $? )

    ·

  145. Jelle Dijkstra Author Editor

    Hi! thanks for the great script. I’m currently trying to use it with flickr pictures, their titles and descriptions. However, i do run into a problem with the the descriptions of those pictures, which are full of ampersands, comma’s and quotes. Since the script is in json and json doesn’t have cdata, i can’t se a way to get it to work.

    have a look here for the problem: http://keesverwey.com.php5.server3.firstfind.nl/beleving/atelier

    thanks in advance for helping me out

    ·

  146. Tim Middleton Author Editor

    I was having a lot of problems due to my slow internet link. It’s not good when the setInterval function (which loads the images) can’t return fast enough before being fired again.

    I wrote a patch so a flag is set when images are being loaded in nextslide(), and nextslide() then exits immediately when this flag is set rather than trying to load the next images. A “load” event is put on the loading images which removes the loading flag so nextslide() is able to proceed on the next interval.

    The patch isn’t perfect (mostly in that you have to wait till the next interval after the image loads before the slideshow advances, also I don’t know it should be added to prevslide), but seems to work okay on firefox and chrome and makes Supersized 3.0 work for me.

    If anyone wants the patch email me tim at vaults dot ca.

    ·

    • Sam Dunn Author Editor

      Tim,

      Thanks for point this out, I’m aiming to take a look at this for a future release.

      ·

  147. David Author Editor

    Has anybody implemented this on a squarespace hosted site? Im having difficulty knowing what parts of the code go in the code injection section and what parts go on the page it self. if anybody has done this plese let me know. thanks!!

    ·

  148. Depi Author Editor

    Please, has someone a piece of code so that slideshow start when user click the play button, not at the page loading? Many thanks

    ·

    • Depi Author Editor

      I resolved by my self. bye

      ·

      • CMentality Author Editor

        @Depi, I would like to do that too. How did you accomplished that?

        CMentality

        ·

  149. CMentality Author Editor

    Does anybody know a way to target specific images in the slideshow?

    ·

  150. Nick Author Editor

    First off, brilliant plugin! This thing is legit.

    My issue – I can’t seem to get any of the transitions to function. No matter which number I set the transition parameter to, it just switches the image with no transition between them.

    http://thefutureforward.com/home-test.html

    Any ideas as to why this might be?

    ·

  151. xufi4 Author Editor

    Hi!
    I want to use it like this: as a background with a 3 image slideshow that stops at the third, and this last one stays as background.
    How do i make it stop after 3 images?
    thanks!!

    ·

  152. Jen Author Editor

    I made my site on top of this plug in so that the background is a slideshow of images. When I open my site in a web browser, there are no scroll bars, so only part of my site can be viewed. Here’s the site jennamoore.org/scungilli

    Any help would be appreciated!

    Thanks.

    ·

  153. m Author Editor

    Thanks for this. Very nice! What do I do to make the image transition random? It would be cool if it didn’t begin with the same image every time the page is refreshed or when you visit the page. Is that possible?

    ·

    • m Author Editor

      nevermind. I should of read this thread more thoroughly.

      ·

  154. Sebastian Author Editor

    hey,
    is there any way to define different time intervals for different pictures.
    for example one pic slide_interval: 5000 und an other slide_interval: 10000?
    cheers

    ·

  155. karthik Author Editor

    if there is only 1 image the image is not displaying in the slider…..
    can any 1 help me to sort out this problem pls………..

    ·

  156. orange73 Author Editor

    Great JS but transition is not fluid !

    ·

  157. vicperg Author Editor

    Terrific plugin. Love it so far. I would like create a page similar to the plainsides.html demo. Is there a way to close the content area on click? Similar to a lightbox or fancy box feature? So the user has the option of watching the full screen slideshow with and without the content area overlay?

    ·

  158. Aaron Author Editor

    Great plugin. Would like to show an example of how someone is using this on their website with some customizations. It looks like they started with an older version of supersized but have added some very useful features. Most interesting is the “scaleTo Fit” in addition to the default “scaleToRatio”. The allows for a different (and very useful) style of scaling the image within the browser window. Check it out here…

    http://www.christianothstudio.com/galleries

    I would love to see this incorporated into the next update of this plugin.

    Thanks!

    ·

  159. Magic8 Author Editor

    Is there any way to make the slide transitions smoother? I’ve seen flash apps that make very smooth transitions, but I don’t know about jQuery.

    ·

  160. wouter Author Editor

    Hi, The slideshow looks great. For my slideshow it is rather important to have the entire image shown (not cropped) preferably keeping its aspect ration, is there a way to do this?

    I wouldn’t mind seeing the black background if the browser window is not 4:3. I do mind missing out on half my image on for example IPhones… Thanks!

    ·

  161. Peepshow Author Editor

    Hi Sam

    I’ve been following this plugin for a while now and have finally had a chance to use it on a project.

    I had no problems getting it working on a plain html prototype page, but am now having some issues with implementing it into wordpress.

    I have my theme set up so each post can have a nice big background image, this image is defined with a custom field. I have no problem with it when I have only one post in the blog but as soon as I add a second post it stops displaying the supersized image.

    In the frontend I am only displaying 1 post at a time so its not trying to load two images or anything. And the custom field is loading no problem. When I inspect the code with firebug I can see the image path has loaded in just fine but the “supersized” div will not display. When I disable “position: fixed;” the image appears but the proportions are distorted. For some reason the javascript does not initialize when there is more that 1 post.

    Its very strange. It loads fine when I have only 1 blog post. Do you have any idea why this may be? Any suggestions would be greatly appreciated.

    Here is the dev site http://tangocomms.net/staging/austral/inspiration/

    Thanks
    Regan

    ·

    • Peepshow Author Editor

      And it seems I’ve found the problem. I had some kind of issue with the other custom fields in my post, if they were left blank its was causing the problem. I think I need a few more “if” statements.

      Thanks for this sweet sweet plugin.

      Regan

      ·

  162. iru Author Editor

    hello,
    already that might be a big job, but since there are so many people (including myself) to make it work as a plugin for wordpress, you could do? I knew if I try to write the code … Only I can say is that I tried to make it run under the theme wordpress Atahualpa and I know how to do it … I’m sorry, I followed the instructions on Benoit, and I failed …
    would be fantastic if some programmer did …
    thanks

    ·

  163. vi54 Author Editor

    Maybe i am overlooking things but how would you add a delay:
    fe. wait 5 seconds and then show the image?
    (for a single background image)

    also: when using 16:9 format images like fe. 1700×960 on widescreen monitors it displays well. on regular monitors, theres an “obvious” white border at the top. However, when trying to center the div vertically. on the regular monitor it works, but then the widescreen monitor view gets scrambled.

    any insights? I won’t post code here cuz this comment list is allready way to long :) ! nice tools though, not complaining ;)

    ·

  164. stefan Author Editor

    i need to implement an adopted version of the slide transition. when sliding in a new picture from the right the current picture needs to slide out to the left and the other way round. therefore i added a new transition mode with following source

    if (options.transition == 6){
    nextslide.show(“slide”, { direction: “right” }, ‘slow’, function(){$.inAnimation = false;});
    currentslide.hide(“slide”, { direction: “left” }, ‘slow’, function(){$.inAnimation = false;});
    }

    it works fine for every image except the first one, here a live example
    http://brigola.net/home/arbeiten/microsite-tirolwerbung/

    any ideas how to fix this? … i think it would be a great transition for other users too

    ·

    • Sam Dunn Author Editor

      Hey Stefan,

      Not positive, but it might help if you added .addClass(‘prevslide’) to the end of the “//Set previous image ” line near the top of the js file.

      Hope that helps

      ·

      • stefan Author Editor

        Hi Sam,

        i tried to add the class ‘prevslide’ but still the same result. do have any other hints? i’m really despair on this problem :(

        regards,
        stefan

        ·

  165. Manon Author Editor

    Hi, I need your help because the script doesn’t work for me with IE7.
    Here is the url http://www.legrandmonarque.com/html
    Thanks for your help

    ·

  166. Sam Dunn Author Editor

    Just wanted to share an update that’s coming with 3.1 (you can implement now):

    You can speed up transitions on FF and IE by adjusting image rendering for images. This lowers quality, but makes it really snappy. Webkit doesn’t support this yet.

    #supersized img{
    -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges;
    }

    Mozilla’s entry:
    http://mzl.la/alChzz

    ·

    • Matt Author Editor

      Hi Sam,

      Amazing plugin. I’ve used it on a few sites now and the clients love it. I’m building another site and I know it’s something that’s been mentioned a lot throughout these posts, but wondering if you’d come across anyone who successfully set it to load random images and if so, were they able to just have that one image load? I’m using WordPress and have the plugin working great, but I simply want a random background image to load on refresh or page load.

      Thanks again and great work.
      Matt

      ·

  167. senza Author Editor

    I have to fund large images, 1920×1280. But the plugin resize the images 1.5 times. Is there any way to see the full images without broadening?

    Congratulations. Regards.

    ·

    • senza Author Editor

      I mean, it’s possible non resize the image resolution in full frame view?
      ( if the image is 1920x1280px and the resolution of my screen its to 1920x1280px, why i watch the image in background website like 150% amplified?)

      ·

  168. senza Author Editor

    I have background pictures for the background of my website with a resolution of 1920x1280px, and the resolution of my screen its 1920x1280px. When i load my website project the picture are resize like 150%,its possible change this effect? how i can do?

    Great job, congratulations.

    ·

  169. Francois Author Editor

    Hi,

    Is there a way to have the image only scale automatically to the height of the browser window and not the width, to use landscape and portrait images in the same slideshow?
    Thanks.

    ·

  170. Bernhard Giden Author Editor

    There seems to be a bug in Firefox 3.6 (for me it’s 3.6.13) in supersized3. The plainslides.html demo doesn’t work properly (although it does in Opera and IE8).

    The background is not “clickable” or “linked”. You can’t click on the image to get to the flickr page. Is there some workaround?

    Best regards,
    Bernhard

    ·

  171. Bernhard Giden Author Editor

    I’d also recommend to add an id to the img-tags, i want to use jquery blockUI until loading finishes.

    line 28 add .attr(“id”, “something”)

    Best regards,

    ·

  172. PD Author Editor

    Hi, Sam,

    superb plugin do you by any chance or somebody knows how to implement it into Joomla template?

    Cheers

    ·

  173. Gérard Author Editor

    Hello Everyone… Love this slider…

    But can anyone tell me how to make the ‘images links’ open in a new window?

    Tried all the ‘target=’ stuff…

    thnkss

    ·

  174. Dan Author Editor

    Hi,

    I have managed to intergrate the supersize background image into my site but i am now trying to add a fixed header with 100% width that my content scrolls behind. how do I achieve this without the header overlapping the scroll bar of the content wrapper?

    any help would be great

    Thanks

    ·

  175. Shelfcloud Author Editor

    Hi,

    What about the partly transparent content-div which is not shown in IE8? Can that be worked around?
    Pse see http://buildinternet.com/project/supersized/3/plainslides.html
    In IE8 you don’t see the background of the content.

    Thanks!

    ·

    • Shelfcloud Author Editor

      Oh uhm… rgba doesn’t work in IE, you have to use alpha opacity.
      But that doesn’t work in FF, so I solved it with “If IE” style…

      ·

      • Sam Dunn Author Editor

        If you use alpha opacity in IE that dims the content as well as the background. It’s also an option to provide a fallback solid background color for IE to use.

        You can do this by preceding the background:rgba style with a standard background color one.

        ·

  176. Tim Author Editor

    Love the plugin, but what about adding a “push” transition effect, moving the previous image out at the same time as the new on comes in?

    ·

    • Tim Author Editor

      uh…what stephan up above said…

      ·

  177. Brian Stanley Author Editor

    Hi, great stuff. This code works with Safari and Firefox but not with IE (7 or 8 I think).

    Any ideas why not?

    ·

    • Sam Dunn Author Editor

      Brian,

      Please try to avoid posting all that code, it creates an awkward flow within the comments.

      I can’t speak for your entire website, but you don’t need to have empty slots in the slides array – it is probably throwing off the system.

      ·

  178. Garth Author Editor

    Works great on the desktop, any chance you’re going to update it to work with ipads and other mobile devices?

    Fullscreen background (no slideshow) with content on top – need ability to scroll through content on mobile devices!

    Thoughts? Is there a fix?
    g.

    ·

  179. Sam Dunn Author Editor

    Hello Everyone!

    Good news – I have released Supersized 3.1.

    It’s got all sorts of good stuff (including Flickr support) and I’m looking forward to the comments continuing over on the new post.

    http://buildinternet.com/2011/02/supersized-3-1-jquery-plugin-fullscreen-background-slideshow-with-flickr-support/

    Thanks!

    ·

 

Build Internet by One Mighty Roar. Since 2008.