spacer
    • Topics

    fullscreen + jQuery + Project + slideshow + Supersized

    • Jul 11, 2011
    • 1,390 Comments
    • Resources

    Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

    This version of Supersized has themes, direct slide links, dynamic preloading, and an API.

    Introducing Supersized 3.2

    spacer

    Features

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

    New in Supersized 3.2

    • Complete rewrite of the Supersized script.
    • More options, including ability to prevent slides from being cut off.
    • Link directly to slides
    • API lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)
    • Theme files are now separate from base files, which will make upgrades much easier. The Shutter theme is included in each download.
    • Flickr is not yet updated to 3.2 (it’s on it’s way)

    Inspiration / Sites Using Supersized

    I’ve put together a small sample of Supersized sites that I’ve come across recently. Keep in mind, these sites are not necessarily running the latest version, and some are heavily customized. I will be putting together a more extensive list for the project page, so feel free to shoot your site to sam@onemightyroar.com!

    spacer spacer spacer spacer spacer spacer spacer spacer

    Plans for WordPress

    I’ve noticed quite a few WordPress themes based on Supersized floating around – I plan on entering into the ring with an official Supersized WordPress theme. While I’m still at the early stages at this point, in the meantime, you should check out WP Supersized developed by the talented Ben De Boeck from World In My Eyes. Note: This plugin is currently using version 3.1.3

    Comments and Feedback

    Just a reminder, you can follow Supersized on Github, which is were I will publish minor point releases and field any bug reports.

    If you have an urgent problem and/or would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com. For troubleshooting, make sure you have first checked the documentation and FAQ sections on the project page.

    Enjoyed this project? Have a look at our Build Internet Projects page for some other stuff you make fancy as well.

    Banner image provided by Colin Wojno.
    Other photography by Brooke Shaden and Maria Kazvan.

    Posted Monday, July 11th, 2011 · Back to Top

    Tweet
    Related Posts
    • Supersized 3.1 jQuery Plugin – Fullscreen Background Slideshow with Flickr Support
    • Supersized – Full Screen Background/Slideshow jQuery Plugin
    • Supersized 2.0 Released – Now with Transitions & Controls
    SPONSOR
    Add Comment

    1390 Comments 55 Mentions

    1. spacer
      Henk Author Editor

      I’ve made some websites with this script, all fade transitions, and it looks fine on my iPad2 with iOS5. after updating to iOS6 I see (only with the fade transitions) a ‘flash’ between 2 images. The transition isn’t going smooth. In one of your showcase websites too, see this example:
      www.februe.de/

      ·

      • spacer
        Paul. S Author Editor

        I am experiencing the same problem on iOS6 devices. I see a jump for a split second on all the fade transitions. Quick-fix would be greatly appreciated.

        ·

      • spacer
        Javier Author Editor

        Hi Henk,

        I´m experiencing the same problem on iOS6, Have you got any solution?

        ·

        • spacer
          Henk Author Editor

          Hi Javier,
          I’m sorry, not yet. I’ve send Sam Dunn an email a week ago and this is his answer:
          “iOS 6 introduced a few hiccups that I’m looking to address when I have a moment in my schedule (transitions are one of them). I image it has to do with my use of animate functions with a 0 timer, although I haven’t dug in too deeply yet.
          I’m looking to address this and a few other bugs in the coming weeks”.

          ·

        • spacer
          Javier Author Editor

          Henk, thank you very much for your answer. Yes, I also have written to Sam and he has said me the same, he is making a new Supersized version and he will solve some bugs.

          I think I’m also going to investigate a few…

          ·

        • spacer
          Sebastian Ginard Author Editor

          The same issue for my web page on iPad/iPhone. Still trying to solve it. I wrote to Sam to notify him about this.
          If anyone get a path or a temporary solution before Sam’s fix please share it. Thanks.

          ·

        • spacer
          Paul S Author Editor

          Try adding this plugin. This is a temporary solution that I got from Sam. It fixed my problem on iOS6.
          playground.benbarnett.net/jquery-animate-enhanced/

          ·

        • spacer
          just saying Author Editor

          I can confirm the above plug-in fixes the flickering image in ios6. thank you!

          ·

        • spacer
          Eduardo Iturbe Author Editor

          Could you tell me more specific where should I use this plug-in fix, I tried to load in my index.html but I still face the flickering. I am using iphone 4 ios 6.1. Thanks

          ·

        • spacer
          Mark Author Editor

          It would be greatly appreciated if someone could help specify how to include the alternative animate code into a Supersized website. It’s not clear to me how we integrate it with the existing js files, or how to include it in such a way so that it overrides the methods causing the problem.

          Many thanks!

          ·

      • spacer
        Mitchell Author Editor

        Hi Henk,

        I have a question. This is my first time using supersized jquery. I’m having issue on ipad io5 and io6. The image doesn’t resized instead it cuts off on the left side and on bottom. Since you used supersized jquery on the iPad. Does that happend to you? Does it cut off like that? The only thing I change is the height and width in the supersize.css file. I made them 90% width and 90% height on #supersized, #supersized li, #supersized a, #supersized li.image-loading. Any solution and suggestion?

        ·

        • spacer
          Chris Author Editor

          I’m having this issue as well. Just on iOS6. Tested an Android device and it works fine.

          ·

        • spacer
          BArry Author Editor

          Yep, me too. Left side cut off (white) in mobile browser

          ·

        • spacer
          Dr. Marco Marsaòa Author Editor

          Hi.

          it is the known iOS 6 -128px bug that affects sites where the html and body tags have an overflow:hidden property. this bug was introduced in iOS6.

          You can fix bu adding position:relative to html and body tags in your stylesheet.

          MM

          ·

      • spacer
        Eduardo Iturbe Author Editor

        Sorry, my mistake, I forgot to reload. The plug-in fixes the flickering image. Thanks

        ·

        • spacer
          Chad Thurman Author Editor

          I was wondering where to paste the plug-in in the index?

          ·

    2. spacer
      peter` Author Editor

      Hey man

      is there a way to change the default thumbnail dimensions?

      ·

    3. spacer
      Questioneer Author Editor

      So, would you please tell me if there is an option to load an image before the others. Waiting without an image before all load up is not good UX and we would like to modify that to maybe load each image before it’s turn to display so we have load time for next during display time of the previous one.

      Thank you.

      ·

      • spacer
        peter` Author Editor

        i agree this would quite an improvement

        ·

    4. spacer
      mijat Author Editor

      Hi everyone, i ‘ m new at jQuery and have downloaded this slider and all work perfect for me, just i dont know how to disable prev_slide button on first page and next on last page, just to have no looping? Thank u very much for helping!

      ·

    5. spacer
      Dade Author Editor

      How to you make a full list of thumbnails appear at the bottom of the screen? by setting the thumb nails and link to ’1′ it shows the previous and last thumbnails for navigation, but I would like to have all the images to have a thumbnail

      ·

      • spacer
        Ankur Author Editor

        Hi Dade, Did you get any solution for this? I am also trying to find it. Image of demo page showing thumbnails list at bottom but that feature is not available in it. Could anyone pls help me?

        ·

      • spacer
        Marcelo Author Editor

        The thumbnails list appears when you click the button on the bottom in right side (up arrow).

        ·

        • spacer
          Eemeli Author Editor

          Does anybody know what part of the code I have to modify to have the thumbnail list appear by default? I want to have it open when page loads, and then press the button if I want to hide it.

          ·

        • spacer
          Eemeli Author Editor

          Ah actually I already found an answer to this, it’s posted as a reply to valenzul’s question on October 18th… Sorry. :)

          ·

    6. spacer
      Marius Wathne Author Editor

      Hello, we have been using supersized for a little while now, and it’s amazing! Thanks for sharing. :)

      ·

    7. spacer
      Dade Author Editor

      If anyone know how to solve my question above, please email me at theemeraldream@gmail.com

      Thank you.

      ·

    8. spacer
      CJ Author Editor

      Hello, I’m trying to add a strip at the bottom of the supersize window which would just contain a few text links (about, contact, etc.), but I’m having a problem figuring out where to insert a new div into the layout. Anywhere I put something seems to interfere with the existing layout or puts the content in an unexpected place. Could you point me in the right direction?

      Thank You.

      ·

    9. spacer
      Peter Author <">
    Related searches:
    middot author editor jquery slideshow
    gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.