Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin

WRITTEN BY

Sam Dunn

Sam is Co-Founder & Creative Director at One Mighty Roar. He is also one of the Editors here at Build Internet.

Files

Highlights

Supersized 3.0 has increased performance, thumbnail navigation, and scrolling.
The project page has more demos and documentation.

Short URL

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 scrolling – you 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!

Wordpress.com stats not installed! Posted Sunday, November 7th, 2010 / Back to Top

I this post. Tweet

More in Resources »

SPONSOR

294 Comments 26 Mentions

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

November 7, 2010 ·
Aamir Author Editor
GREAT FEATURES!

November 7, 2010 ·
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!

November 8, 2010 ·
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

November 8, 2010 ·
- Sam Dunn Author Editor
  Thank you for pointing that out, I have updated the source files to correct this problem.
  
  November 12, 2010 ·
  - 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.
    
    November 25, 2010 ·
  - 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?
    
    February 9, 2011 ·
  - Sam Dunn Author Editor
    Add height:auto; to correct the thumbnail distortion.
    
    February 27, 2011 ·
Miguel Oliveira Author Editor
Great plugin… I want to set the images in a random order… Can I do this? How?

November 8, 2010 ·
- 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.
  
  November 8, 2010 ·
  - 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
    
    January 4, 2011 ·
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 ?

November 8, 2010 ·
- 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.
  
  November 9, 2010 ·
  - 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
    
    December 2, 2010 ·
Ste Author Editor
This is great. Is it possible to add a carousel (of thumbnails) of all the images in the bottom bar?

November 9, 2010 ·
- 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.
  
  November 12, 2010 ·
  - yeoung Author Editor
    Please do that SAM!
    i begyou… make all thumbnail 50px x 50px
    BIG HUGS FROM INDONESIA!
    
    February 8, 2011 ·
Beben Koben Author Editor
its a cool…so supersized \m/

November 10, 2010 ·
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 ?

November 10, 2010 ·
- Tomas Author Editor
  I’m having the same issue; works fine in Chrome and Firefox, but hangs at loading screen on IE 8.
  
  November 15, 2010 ·
  - 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.
    
    November 16, 2010 ·
  - 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 ?
    
    November 25, 2010 ·
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.

November 11, 2010 ·
- 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
  
  November 12, 2010 ·
  - 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?
    
    November 26, 2010 ·
Walter Apai Author Editor
Excellent Article given by you, thanks a lot. Keep posting more.

November 11, 2010 ·
Chilzap Author Editor
Amazing plugin. Thanks for sharing.

November 11, 2010 ·
George Author Editor
Just Great!

November 12, 2010 ·
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

November 12, 2010 ·
- 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.
  
  November 12, 2010 ·
  - Maurice Author Editor
    Allright! Thanks for the quick reply!
    
    November 12, 2010 ·
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.

November 12, 2010 ·
- Sam Dunn Author Editor
  I haven’t really explored this on the video end, I would imagine it’s possible, but it’s a little outside my intent for this version of the plugin.
  
  November 12, 2010 ·
- Camilo Sanchez Author Editor
  There’s a plugin to achieve the background effect with a video. You can see here:
  
  http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html
  
  February 9, 2011 ·
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.

November 12, 2010 ·
- 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.
  
  November 12, 2010 ·
  - 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.
    
    November 12, 2010 ·
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?

November 13, 2010 ·
Chris Author Editor
Hi, is there a chance to give us some more informations on how we can add Supersized in WordPress?

November 13, 2010 ·
- 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.
  
  February 5, 2011 ·
  - dusty Author Editor
    * “half” a second
    
    February 5, 2011 ·
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 ?

November 13, 2010 ·
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.

November 13, 2010 ·
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!

November 14, 2010 ·
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?

November 14, 2010 ·
- inspiral Author Editor
  Ok, never mind. I found it, just had to ask… :)
  
  November 14, 2010 ·
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.

November 14, 2010 ·
- Faisal Shahzad Author Editor
  Also need that.. with some fade in and out or some good transition effect.. please help any one.. :)
  
  regards
  
  January 28, 2011 ·
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!

November 14, 2010 ·
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!

November 15, 2010 ·
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.

November 15, 2010 ·
chuck Author Editor
can you run all your flickr photos as the background images, rather then putting them in 1-by-1?

November 16, 2010 ·
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!

November 17, 2010 ·
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

November 17, 2010 ·
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

November 18, 2010 ·
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.

November 18, 2010 ·
- 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.
  
  November 18, 2010 ·
  - Michelangelo Author Editor
    Thanks for your reply, Zach :)
    The thing I’m most stuck with is – if I have a blog and not a domain, how would I host the necessary files without a server? Can I use some kind of alternative like Dropbox or something? I’m sorry for dumb questions, I’m not terrible with jquery/css/html, but I’m still pretty new to it.
    
    November 19, 2010 ·
  - Zach Dunn Author Editor
    So my guess is that you’re running a WordPress blog on the WordPress.com domain. Unfortunately I don’t think (correct me if I’m wrong) that you’re able to have customized themes on a free WordPress domain. This means that hosting this plugin would be a problem. I suppose Dropbox could work, but I’d recommend looking at entry level hosting (or upgrading WordPress.com) to get this working easily.
    
    November 19, 2010 ·
  - Michelangelo Author Editor
    Thanks so much for your help, Zach. Much appreciated.
    God bless
    
    November 20, 2010 ·
  - Michelangelo Author Editor
    Thanks for your help, Zach. Much appreciated. God bless
    
    November 20, 2010 ·
  - Michelangelo Author Editor
    At first I was content with just having my background be resizabl (I found a code from a different developer that worked instantly with no problem) but I’ve decided that I really, really want to use Supersized 3 – ’cause it’s awesome.
    
    I have a Blogger thing, and I’m just confused on where to put everything. Please can you help me implement this slideshow background it really would mean so much. I could even possible transfer you a fee if you wish (I don’t know how to do that either, but I’m sure I could figure it out).
    
    If you need to email me, please don’t hesitate, I’m always available. Here’s my email attention-starved@hotmail.com
    
    I greatly anticipate your response.
    Many thanks
    
    November 23, 2010 ·
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

November 19, 2010 ·
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!

November 19, 2010 ·
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.

November 19, 2010 ·
- 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!
  
  November 20, 2010 ·
  - 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.
    
    January 12, 2011 ·
Omar Author Editor
Hi, is it possible to include this plugin in a Joomla 1.5 Template?

November 20, 2010 ·
Prof.Yeow Author Editor
great gallery!! i will try to put in my wordpress

November 21, 2010 ·
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.

November 22, 2010 ·
- 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?
  
  November 22, 2010 ·
  - 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?
    
    November 23, 2010 ·
  - 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.
    
    November 23, 2010 ·
- 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.
  
  January 6, 2011 ·
  - vi54 Author Editor
    500kb? subtract 400 from that… for a MAX. on kb’s.thats more in terms of “optimal”
    
    February 16, 2011 ·
Filipe Author Editor
Does anyone know where I could find a script for a slideshow just like this website http://catrabbit.com.au/

November 23, 2010 ·
- yeoung Author Editor
  yo zachdunn answer this! :D any help appreciated~
  
  January 7, 2011 ·
  - 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?
    
    January 9, 2011 ·
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.

November 25, 2010 ·
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?

November 25, 2010 ·
- Zach Dunn Author Editor
  You can do that using regular CSS background styles.
  
  November 25, 2010 ·
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

November 25, 2010 ·
Michelangelo Author Editor
Can someone please try to help me?

November 28, 2010 ·
- 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!
  
  November 28, 2010 ·
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!

November 28, 2010 ·
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

November 28, 2010 ·
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

November 29, 2010 ·
- 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-
  
  December 2, 2010 ·
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.

November 29, 2010 ·
- Luca Author Editor
  I’d like to know it too
  
  December 21, 2010 ·
  - 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.
    
    December 22, 2010 ·
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.

December 1, 2010 ·
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!

December 1, 2010 ·
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.

December 1, 2010 ·
- Mark Author Editor
  P.S.: the sample for this is at http://tinyurl.com/2attvvf
  
  December 1, 2010 ·
  - Sara Author Editor
    Hi Mark,
    
    I’m also having the same problem with the extra space on top.
    
    Hope someone can help out…
    
    Thanks!
    
    December 2, 2010 ·
  - 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!
    
    December 2, 2010 ·
  - 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.
    
    December 2, 2010 ·
  - Mark Author Editor
    Another PS: this site has some interesting info: http://css-tricks.com/perfect-full-page-background-image/
    
    December 2, 2010 ·
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

December 2, 2010 ·
- 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.
  
  December 2, 2010 ·
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!!

December 2, 2010 ·
- Mark Author Editor
  That’s funny, right after I posted the solution above, I saw that you had already found (almost) the same answer!
  
  December 2, 2010 ·
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.

December 2, 2010 ·
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.

December 3, 2010 ·
guillaume Author Editor
not working under IE :S its just lading and loading without showing any image… any idea how to solve?

December 3, 2010 ·
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?

December 4, 2010 ·
- Fellipe Author Editor
  I just had the same problem. You forgot a comma (,) after the last parameter.
  
  Do it, easy to fix =)
  
  December 7, 2010 ·
  - 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
    
    December 8, 2010 ·
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

December 5, 2010 ·
frey Author Editor
Wonderfull, great job!

December 5, 2010 ·
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

December 6, 2010 ·
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!!

December 7, 2010 ·
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?

December 7, 2010 ·
- 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
  
  December 7, 2010 ·
tony Author Editor
Nice plugin. Is it possible to have this applied to just a container div? Thanks.

December 7, 2010 ·
- 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.
  
  December 19, 2010 ·
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.

December 7, 2010 ·
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!

December 7, 2010 ·
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 ?

December 8, 2010 ·
- 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.
  
  December 19, 2010 ·
  - 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!!
    
    December 20, 2010 ·
  - eric Author Editor
    +1 on bringing back minsize
    
    December 27, 2010 ·
- 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.
  
  January 25, 2011 ·
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)

December 8, 2010 ·
- 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
  
  December 19, 2010 ·
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

December 10, 2010 ·
guillaume Author Editor
wow thank you ! it work now on explorer !!!

December 10, 2010 ·
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!

December 11, 2010 ·
- 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.
  
  December 19, 2010 ·
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

December 14, 2010 ·
- 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
  
  January 6, 2011 ·
  - Cédric Author Editor
    Philipp,
    
    Your declaration using a wrong at end:
    “/jquery-shuffle.js-”-
    Maybe not affect the script but..
    :-)
    
    Regards
    
    January 9, 2011 ·
  - Cédric Author Editor
    A wrong quote, sorry.
    
    January 9, 2011 ·
  - 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]
    
    January 9, 2011 ·
  - philsn Author Editor
    @Cédric: Thank you for your effort
    
    Can anybody else be of further assistance? I’d appreciate it.
    
    January 12, 2011 ·
  - 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();
    });
    
    January 12, 2011 ·
  - philsn Author Editor
    Some code was removed after submitting my comment, but I guess you get it.
    
    January 12, 2011 ·
  - pipep Author Editor
    philsn, last solution worked for me, thank you very much, i’ve been for days working on this.
    
    January 12, 2011 ·
  - Micsa Author Editor
    Thank you very much, philsn, this last code works also for me.
    I finally got a random slideshow running!
    
    January 22, 2011 ·
- Rodiolex Author Editor
  Many thanks Philipp!
  
  January 15, 2011 ·
  - 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
    
    January 15, 2011 ·
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?

December 14, 2010 ·
- 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?
  
  December 19, 2010 ·
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/

December 14, 2010 ·
- 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.
  
  December 19, 2010 ·
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…………………

December 15, 2010 ·
- Sam Dunn Author Editor
  I will be sending you an email shortly.
  
  December 19, 2010 ·
  - 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?
    
    January 13, 2011 ·
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?

December 16, 2010 ·
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?

December 16, 2010 ·
- 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.
  
  December 19, 2010 ·
  - 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…?
    
    December 28, 2010 ·
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!

December 17, 2010 ·
- Sam Dunn Author Editor
  I would try to change the background from absolute to fixed.
  
  eg.
  #supersized a{
  CHANGE position:absolute; to position:fixed;
  }
  
  December 19, 2010 ·
toscal Author Editor
Very very Nice, I was looking for something like this

December 19, 2010 ·
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?

December 19, 2010 ·
- 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.
  
  December 19, 2010 ·
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

December 19, 2010 ·
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???

December 21, 2010 ·
- Sam Dunn Author Editor
  This is a jQuery plugin, not a WordPress plugin, you will need to integrate it into the HTML/CSS directly.
  
  December 22, 2010 ·
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

December 22, 2010 ·
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?

December 22, 2010 ·
- 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.
  
  December 22, 2010 ·
Alex Author Editor
is there a way of playing the images in the slideshow in a random order?

December 22, 2010 ·
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.

December 23, 2010 ·
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.

December 27, 2010 ·
Lance Author Editor
I would really love a tutorial on making this work in WordPress. Its killing me!!

December 29, 2010 ·
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?

December 29, 2010 ·
- 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
  
  January 14, 2011 ·
  - 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.
    
    January 26, 2011 ·
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….

December 30, 2010 ·
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

December 31, 2010 ·
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

December 31, 2010 ·
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!

January 1, 2011 ·
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)?

January 4, 2011 ·
- 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!
  
  January 6, 2011 ·
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.

January 4, 2011 ·
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!

January 6, 2011 ·
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.

January 6, 2011 ·
- Arnaud Author Editor
  OMG, it was an issue with the “,” at the end of the line… Grrr
  
  Thank’s to Andrew ;)
  
  January 6, 2011 ·
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.

January 6, 2011 ·
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.

January 6, 2011 ·
- 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!
  
  January 6, 2011 ·
  - 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
    
    January 13, 2011 ·
Fernando Morales Author Editor
Just to say thanks! you totally made my day with this kicking ass plugin

January 6, 2011 ·
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?

January 7, 2011 ·
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?

January 7, 2011 ·
- Luca Author Editor
  resolved?
  I’m interested too
  
  January 14, 2011 ·
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,

January 8, 2011 ·
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.

January 9, 2011 ·
John Brits Author Editor
Oh it all disappeared! How do I post HTML code here?

January 9, 2011 ·
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();
});

January 11, 2011 ·
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(); });

January 12, 2011 ·
- Cédric Author Editor
  This script not working for me too.
  Mac OS 10.5.8 / Safari 5
  
  January 16, 2011 ·
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

January 12, 2011 ·
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?

January 13, 2011 ·
- 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
  
  January 14, 2011 ·
- 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.
  
  January 15, 2011 ·
  - 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
    
    January 23, 2011 ·
Matthew Author Editor
Hey guys, Can Supersized be used with Blogger? If so, how exactly??

Cheers!

January 13, 2011 ·
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

January 13, 2011 ·
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.

January 13, 2011 ·
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.

January 14, 2011 ·
- Amy Author Editor
  *Sorry for the typo. It should read: “It seems as if there are perhaps two competing interval timers…”
  
  January 14, 2011 ·
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.

January 15, 2011 ·
Michael Author Editor
Hi Sam, is it possible to engage you guys customising the ‘Supersized’ for a hired project?

January 15, 2011 ·
- Sam Dunn Author Editor
  Absolutely, shoot me an email at hello@onemightyroar.com.
  
  January 15, 2011 ·
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)?

January 16, 2011 ·
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

January 17, 2011 ·
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

January 18, 2011 ·
- 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
  
  January 23, 2011 ·
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.

January 19, 2011 ·
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!!

January 19, 2011 ·
- 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?
  
  January 21, 2011 ·
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

January 20, 2011 ·
Heder Neves Author Editor
Hello,

Great plugin, thanx !

But, we can fix the image at the top ?

Best regards

Heder

January 20, 2011 ·
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!

January 20, 2011 ·
Heder Neves Author Editor
Me again,
forget my question, I found the solution.
Thanx

January 20, 2011 ·
Wajid Author Editor
Gr8888888 Works.

Thanks for this lovely solution…………..

Wajid Ali

January 20, 2011 ·
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.

January 23, 2011 ·
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

January 23, 2011 ·
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)

January 23, 2011 ·
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

January 25, 2011 ·
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.

January 25, 2011 ·
max Author Editor
oh, and a visible preloader would be nice if images are big or slow to load.

January 25, 2011 ·
- max Author Editor
  I see that there is a preloader, a very tiny one.
  
  January 27, 2011 ·
  - t Author Editor
    You can change that to a bigger gif of course, it’s in the CSS called preloader.gif
    
    February 1, 2011 ·
Bledar Ramo Author Editor
Great plugin, and effects
thanx !

January 25, 2011 ·
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.

January 25, 2011 ·
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

January 26, 2011 ·
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..

January 27, 2011 ·
- VirtualFlavius Author Editor
  Go into supersized.css, locate #supersized img, #supersized a and change position to fixed ;)
  
  February 19, 2011 ·
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.

January 27, 2011 ·
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

January 27, 2011 ·
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.

January 27, 2011 ·
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.

January 29, 2011 ·
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!

January 31, 2011 ·
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 ;)

January 31, 2011 ·
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.

February 2, 2011 ·
- 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.
  
  February 7, 2011 ·
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

February 2, 2011 ·
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

February 2, 2011 ·
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

February 3, 2011 ·
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

February 3, 2011 ·
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 $? )

February 3, 2011 ·
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

February 4, 2011 ·
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.

February 5, 2011 ·
- Sam Dunn Author Editor
  Tim,
  
  Thanks for point this out, I’m aiming to take a look at this for a future release.
  
  February 11, 2011 ·
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!!

February 7, 2011 ·
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

February 8, 2011 ·
- Depi Author Editor
  I resolved by my self. bye
  
  February 8, 2011 ·
  - CMentality Author Editor
    @Depi, I would like to do that too. How did you accomplished that?
    
    CMentality
    
    February 9, 2011 ·
CMentality Author Editor
Does anybody know a way to target specific images in the slideshow?

February 9, 2011 ·
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?

February 11, 2011 ·
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!!

February 11, 2011 ·
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.

February 11, 2011 ·
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?

February 12, 2011 ·
- m Author Editor
  nevermind. I should of read this thread more thoroughly.
  
  February 12, 2011 ·
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

February 13, 2011 ·
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………..

February 14, 2011 ·
orange73 Author Editor
Great JS but transition is not fluid !

February 14, 2011 ·
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?

February 14, 2011 ·
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!

February 15, 2011 ·
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.

February 15, 2011 ·
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!

February 17, 2011 ·
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

February 17, 2011 ·
- 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
  
  February 17, 2011 ·
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

February 18, 2011 ·
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 ;)

February 18, 2011 ·
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

February 21, 2011 ·
- 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
  
  February 21, 2011 ·
  - 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
    
    February 22, 2011 ·
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

February 21, 2011 ·
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

February 21, 2011 ·
- 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
  
  February 21, 2011 ·
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.

February 22, 2011 ·
- 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?)
  
  February 22, 2011 ·
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.

February 22, 2011 ·
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.

February 22, 2011 ·
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

February 22, 2011 ·
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,

February 22, 2011 ·
PD Author Editor
Hi, Sam,

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

Cheers

February 22, 2011 ·
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

February 23, 2011 ·
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

February 24, 2011 ·
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!

February 25, 2011 ·
- 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…
  
  February 25, 2011 ·
  - 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.
    
    February 27, 2011 ·
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?

February 26, 2011 ·
- Tim Author Editor
  uh…what stephan up above said…
  
  February 26, 2011 ·
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?

February 27, 2011 ·
- 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.
  
  February 27, 2011 ·
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.

February 27, 2011 ·
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!

February 27, 2011 ·