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
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!
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
Tweet1390 Comments 55 Mentions
-
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/wp_date_in_a_nice_tone(); ?> ·
-
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.
wp_date_in_a_nice_tone(); ?> ·
-
Hi Henk,
I´m experiencing the same problem on iOS6, Have you got any solution?
wp_date_in_a_nice_tone(); ?> ·
-
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”.wp_date_in_a_nice_tone(); ?> ·
-
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…
wp_date_in_a_nice_tone(); ?> ·
-
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.wp_date_in_a_nice_tone(); ?> ·
-
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/wp_date_in_a_nice_tone(); ?> ·
-
I can confirm the above plug-in fixes the flickering image in ios6. thank you!
wp_date_in_a_nice_tone(); ?> ·
-
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
wp_date_in_a_nice_tone(); ?> ·
-
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!
wp_date_in_a_nice_tone(); ?> ·
-
-
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?
wp_date_in_a_nice_tone(); ?> ·
-
I’m having this issue as well. Just on iOS6. Tested an Android device and it works fine.
wp_date_in_a_nice_tone(); ?> ·
-
Yep, me too. Left side cut off (white) in mobile browser
wp_date_in_a_nice_tone(); ?> ·
-
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
wp_date_in_a_nice_tone(); ?> ·
-
-
Sorry, my mistake, I forgot to reload. The plug-in fixes the flickering image. Thanks
wp_date_in_a_nice_tone(); ?> ·
-
I was wondering where to paste the plug-in in the index?
wp_date_in_a_nice_tone(); ?> ·
-
-
-
Hey man
is there a way to change the default thumbnail dimensions?
wp_date_in_a_nice_tone(); ?> ·
-
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.
wp_date_in_a_nice_tone(); ?> ·
-
i agree this would quite an improvement
wp_date_in_a_nice_tone(); ?> ·
-
-
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!
wp_date_in_a_nice_tone(); ?> ·
-
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
wp_date_in_a_nice_tone(); ?> ·
-
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?
wp_date_in_a_nice_tone(); ?> ·
-
The thumbnails list appears when you click the button on the bottom in right side (up arrow).
wp_date_in_a_nice_tone(); ?> ·
-
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.
wp_date_in_a_nice_tone(); ?> ·
-
Ah actually I already found an answer to this, it’s posted as a reply to valenzul’s question on October 18th… Sorry. :)
wp_date_in_a_nice_tone(); ?> ·
-
-
-
Hello, we have been using supersized for a little while now, and it’s amazing! Thanks for sharing. :)
wp_date_in_a_nice_tone(); ?> ·
-
If anyone know how to solve my question above, please email me at theemeraldream@gmail.com
Thank you.
wp_date_in_a_nice_tone(); ?> ·
-
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.
wp_date_in_a_nice_tone(); ?> ·
-