Supersized 2.0 Released – Now with Transitions & Controls
Features of Supersized 2.0 – The Exciting Sequel
Since the release of the original Supersized back in February, I have had a fair amount of time to gather feedback, read comments, and plan out what version two would hold. At long last Supersized 2.0 has arrived, here’s what is new:
- Transitions : Fade, Sliding (Up, Down, Right, Left), and None. Options galore!
- Navigation : Forwards, backwards, pause, play.
- Preloading : Loading screen while images load to keep things smooth.
- Captions : An image can have a caption, defined by it’s title attribute.
- Slide Counter : Let’s you know which slide you are on and how many total.
- Pause on Hover : This option pauses the slideshow when the image is being hovered over.
- Vertical Center : Exactly what it sounds like – vertically centers image.
Those are a couple of the main features to get excited about, but I would encourage you to check it out for yourself, click the demo button to head over to our new Supersized project page.
As always please leave and thoughts, suggestions, questions, comments, or dreams below. Thank you so much.
Discussion
May 7th, 2009 at 8:38 PM
Looks really good. You have done an awesome job. Thanks.
May 8th, 2009 at 3:36 AM
i dig this. thanks sam!
May 8th, 2009 at 3:43 AM
Nice stuff, I’ve reviewed and stumbled this! Excellent job!
May 8th, 2009 at 9:54 AM
Love it!
vrob’s last blog post..Envato Sites Style Guide
May 8th, 2009 at 10:10 AM
I’m curious if this plugin is intended only for those situations when you want the user’s entire screen filled with your images? Or could it be in part of a web page with other content? Thanks! Great work!
May 8th, 2009 at 10:45 AM
@Chris Raymond
I intended for this plugin to only be for full screen as there are a healthy amount of other plugins that can be slipped into your site.
Worth checking out for non-fullscreen plugins: http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/
May 8th, 2009 at 11:02 PM
nice upgrade, sam.. good stuff
i suppose the next version will feature support for scrolling content? currently this assumes that the page doesn’t have scrollbar, or, does it?
May 8th, 2009 at 11:23 PM
Nice update. was looking forward to it. You say that images must be in an anchor tag – is there anyway to have it work with linked images? I simply want a slideshow but not with linked images. Thanks Rob
May 9th, 2009 at 12:23 AM
@glove
Scrolling content is something I have yet to figure out a workaround for, since overflow:hidden is a key part of making this functional. I have one thought I’m currently investigating.
@Rob
You can still do slideshows with non-linked images, just use a simple anchor tag without the href attribute
May 9th, 2009 at 2:47 AM
Thanks for the hard work!
Looks beautiful, resizes well and works with scrolling content (Safari, Firefox, didn’t check IE yet).
Would adding a random option be possible?
That would add more diversity.
To speed up loading times, images could be added gradually via ajax.
May 9th, 2009 at 5:50 AM
Hello Sam,
first of all, nice job and thanks to share it !
I have a question : transitions (fade in, out, slide) don’t work (only for me ?) on Firefox (3.0.10) – windows XP.
Indeed , the transition is very very “fast” (it’s like if there’s just one step of fade).
Is someone else have the same result ?
Is it possible to fix it ?
thanks in advance for your reply
Mike
May 9th, 2009 at 8:43 AM
@wuss
Random is something I can pencil in for a revision, thank you very much.
@Mike
I have not had the problem when I tested in Windows XP, but if others are as well, I will certainly look into it.
The fade effect runs on 750ms transitions – if you would like adjust this you only have to edit 2 places in supersized.2.0.js – under functions prevslide() and nextslide() you will find a list of transitions and times, adjust them accordingly.
May 9th, 2009 at 7:38 PM
I havent checked this yet, so forgive me if its blatantly obvious, but I’d love to
1. be able to have interactive, perhaps ajax driven content on top of the slowly changing background, and.
2. Have the background change be triggered by something (i.e. the ajax routine, while polling, sees you’ve gotten an email and the background changes to an email jpg?
May 10th, 2009 at 1:20 PM
Hey thanks for mentioning me. Glad my small contribution helped. Now I’m trying to replace the current set of images with new ones via ajax. Here’s what I think I need to do to make it work.
1. Complete any current transitions.
2. Pause slideshow.
3. Load new set of images via Ajax, hidden at first and positioned above current set.
4. Wait for new images to load.
5. Fade in new set of images.
6. Remove previous set.
7. Apply slideshow function on new set.
On top of prevslide and nextslide, it would be great to have a function like loadSet(array(“image1.jpg”, “image2.jpg”, “image3.jpg”).
Scrolling content will work if the background is position:fixed but that will need some hacking on IE.
Aen’s last blog post..COMA Launched
May 10th, 2009 at 5:38 PM
does it work for different sized images? IE: will it work with verticle images and horizontal? Different aspects? Or does it crop them?
Montana Flynn’s last blog post..Twitter Weekly Updates for 2009-05-08
May 10th, 2009 at 6:02 PM
@steve
I’m not entirely sure what you mean by your #1 thought, perhaps a little clarification and I can come up with a proper response. Your #2 is possible, although you will have to explore the code to engineer that, the functions are in place, you would just have to figure out your conditions.
@Aen
Not a problem sir, thank you, sounds like you’ve got a good sense of a possible upgrade. I may explore that at a later date.
@Montana Flynn
You have to pick one ratio size, so vertical and horizontal currently cannot coexist without distortion.
May 11th, 2009 at 6:39 AM
Hi
Really useful script thanks so much.
One issue I have found is if JS is turned off, images disappear and is left with spinning disc. Any way of having at least one image showing if JS is off?
Thanks again
D
May 12th, 2009 at 10:12 AM
Hi Sam,
I am not sure if you are still interested to see what people make with this beautiful an easy to use script. Nevertheless here is what I made of „supersized-2.0“.
http://www.triografie.de
Thank you very much. The script fits just perfect for my needs to share my portfolio with the word.
Daniel
May 13th, 2009 at 5:51 AM
You could have the scroll setting html and body width and height equals to 100%.
Then you need to set the container element height and width = 100% and position:absolute, with top,left equal to 0…
html, body, #content {height:100%; width:100%}
#content {position:absolute; top:0; left:0; overflow:auto;}
May 13th, 2009 at 7:49 PM
Hi,
this is simply great!
I would just love to see the possibility to present images with different w/h ratios.
Janko’s last blog post..Lila
May 14th, 2009 at 4:21 AM
Hi, thanks, it looks very good, so I will try to subsitute a similar Flash Backgroundslideshow with this.
May 14th, 2009 at 3:14 PM
Hi, you have done a nice work there.
But under Opera and IE8, you can scroll to see the whole background image. While under FF3, Chrome and Safari that doesn’t happen. Do you know how I can manage to make IE8 and Opera to behave like the others?
May 14th, 2009 at 3:25 PM
Nevermind, just fixed adding ‘overflow: hidden’ on the body.
May 19th, 2009 at 11:42 PM
Great script! I’ve been checking back frequently to see if 2.0 had ben released and it has! Thank you.
I noticed when I turned the slideshow off the navigation is disabled. Is there a way to turn the slideshow off while keeping the navigation active?
May 20th, 2009 at 8:46 PM
Can this plugin be used to simply as a transition background for a bigger site? i.e. the background with a blog on top?
Mitch’s last blog post..SHTBOX, #SHTBOX and @SHTBOX
May 21st, 2009 at 2:06 PM
thank you, I’ve been waiting for this !
May 21st, 2009 at 2:37 PM
@Austin
I simply added an if statement in the JS file to only allow navigation with slideshow activated. By removing this if statement, you should be able to accomplish your goal.
@Mitch
Due to the lack of scrolling capability it would be difficult to engineer a full blog on top of this plugin, I have seen some people succeed in doing this with iframes and fluid layouts, so you might want to look into that.
May 22nd, 2009 at 11:03 AM
Supersized works great with Safari and Chrome, but can make Firefox (Mac and Windows) and IE7 become slow, almost unresponsive.
Has anyone else experienced this?
I tried:
- reducing the size of images (from 1600px to 1024px wide)
- slowing down the frequency of the slideshow (from 10s to 30s)
- removing the transition (used to be fade, now none)
… it keeps using a lots of resources, especially Firefox Mac.
In the Activity Monitor, Firefox Mac is often stuck at 97% (for one core, so that’s 50% of total resources), while Safari oscillates between 4 and 6% (for 1 core) with a peak at 47% (for 1 core) for a few seconds during the fade. Removing the fade halves the processor usage for Safari, but doesn’t seem to have any effect with Firefox.
Hardware: MacBook Pro 2.53GHz Intel Core 2 Duo, 4GB RAM, 1440×900 resolution
May 22nd, 2009 at 11:48 AM
@wuss
I would look into exactly how many images you are including in the slideshow, as that may impact speed. I have not experienced drastic slow down, I too limit my image size to 1024px
May 26th, 2009 at 5:32 AM
Hi Sam,
Great plugin!
I’ve been playing arround with it and would like to use it in a Joomla site.
Do you have any pointers on using it in Joomla?
Cheers,
Steve
May 29th, 2009 at 6:05 PM
Great work Sam – Is there anyway of calling images into Supersized – Because I’d like to use this to present 50+ images and think the load time and performance would not be acceptable. Is there a work around? Any advise wound be really great.
Thank you for a great script.
Regards
Brian
June 2nd, 2009 at 6:59 AM
Extremely beautiful and useful script! I have only one burning question. Is there a way to navigate by thumbnails?
Cheers, Bviss
Bviss’s last blog post..The%20Wolf%20In%20The%20Winter
June 5th, 2009 at 2:27 PM
really like this and want to use it… but I must be doing something wrong:
http://www.geoffsphotos.com/index_new.html
myimages don’t seem to want to load. any help is appreciated.
June 5th, 2009 at 2:52 PM
@geoff
If you put all of your tags in tags then your problem with go away. Boom.
June 5th, 2009 at 5:12 PM
wow. thank you for the speedy response. but, crap… I’m still dorking it up. I have tags around the image sources:
June 9th, 2009 at 6:58 AM
FYI it works very smoothly with Firefox 3.5 Beta 4 (Mac), so the slowdowns experienced with FF 3.1 will soon be a thing of the past!
June 14th, 2009 at 8:45 AM
Thanks for the great script. I was only wondering. Is it possible to put html content beneath the full browser view screen? i want to make something like this: w3.80spurple.com but then without flash…
Thanksss
June 14th, 2009 at 7:52 PM
Hi, great script, but the “slide” effect is not rendered in IE7, works on mozzilla, safari, chrome…but no IE, is it possible?
June 15th, 2009 at 12:35 AM
Hey Sam,
This is a great script, cheers to everyone involved! I too second Bviss – is there a way to implement a thumbnail navigation? Then this would be king!
June 15th, 2009 at 8:46 AM
Hi
I’m using this for a requested website and the client wishes for smoother transitions (for the fade transition). Is there an option to generate smother transitions with this beautiful piece of code?
The other thing my client wants from me is that the first and last image should be displayed for a longer period than the others. A workaround would be to use those more than once but I think thats not the best solution.
Thanks for the gread script and the replies.
Gon
June 16th, 2009 at 5:38 AM
Thank you Sam for this great script!
We just launched SOUND Phuket website (http://www.soundphuket.com) which uses a slightly modded version of Supersized: pictures are loaded after page load and displayed in random order.
We had issues with long pages and scrolling at first, but fixed them with css.
Check http://www.soundphuket.com/calendar/ for instance.
If you want to grab the modded version (provided as-is): http://www.soundphuket.com/js/supersized.2.0-mod.js (requires slightly different html)
Cheers
Stephane
June 16th, 2009 at 9:35 PM
@miquil
You would have to put supersized in its own div and re-engineer the script to not scale the height on browser resize.
@Gon_NCO
Some of the choppiness of animation is jquery/browser limitations, sadly not something I can address. The rest of what you suggest could be done with some tinkering.
@stephane
Very nice, I’m impressed.
@All those with browser compatibility concerns
I have tried to make this as mutually browser friendly as possible, obviously there are some hiccups in certain browsers, at this time the best suggestion I have is upgrade to the newest browser version.
June 21st, 2009 at 12:13 PM
Is there any chance of getting a release in the future which handles both portrait and landscape images within the same slideshow? This would be really useful. Thanks for the great script.
June 21st, 2009 at 3:03 PM
stephane you’re a life saver! i was having problems like cpu load while switching images and was looking into ajax loading them. nice to see someone already did it. thanks!
and also thanks to sam for the code in the first place!
June 21st, 2009 at 3:15 PM
scratch that, back to the ajax loading drawing board.
June 21st, 2009 at 6:57 PM
Hi Sam,
great script indeed!
Anyway I can’t figure out how to disable the slideshow while keeping the navigation active…
I read your comment from May 21st but I just don’t get it right. Would be great if you could tell me what I have to change to make it work.
Thank you, Falk
June 22nd, 2009 at 9:14 AM
I have a bunch of websites that use the slideshowpro component (slideshowpro.net for details) and I am going to recode the more simpler ones with your plugin instead.
Would you consider coding the ability to view (and have populate with the source or an alternative smaller version of the source image) a row of thumbnail images, say in the floating content div, that can be used as an alternative navigation scheme other than the default left/right/pause mechanism in a future release?
The thumbnails would be really effective, especially when coupled with a previously suggested idea of random image loading.
The next obvious request is to ask you to code the plugin to accept an infinite number of images, much the same as SlideShowPro, so preloading every image prior to displaying them in the browser will be entirely unncessary as your plugin would only load images on demand, image-by-image.
Kudos for this wonderful plugin – I wish you every success with it. Thank you for posting it for the web community to use and abuse.
June 24th, 2009 at 5:19 AM
Im testing a site we made on ie6 and when I select transitions (left, right, top or bottom) and leave the mouse in the middle of the screen, there is a strange flickering ocurring, it flicks 3 o 4 times before changing the image, it doesn’t happen when fade is chosen. It occurs also on your live demo. Do you know what could be occurring? Thanks you and you have an excellent piece of software.
June 25th, 2009 at 4:35 AM
nice work! Butt ones you use is with a big number of pictures, your computer will completely flip! First do you have to wait until alle images are downloaden and if your computer survives this part he will certainly goes down when he try to the next image…
example of my problem: http://www.lifeisaparty.be/album_slideshow.php?boek=Ardennen_Waillet
June 28th, 2009 at 11:05 PM
Hey,
Lovely gallery. But it becomes sluggish at about 10+ pictures. Is there a workaround for this?
July 1st, 2009 at 2:15 AM
to all those experiencing sluggish performance or high processor usage, try again with the latest version of firefox (http://www.mozilla-europe.org/en/firefox/). the speed improvement is very impressive.
July 7th, 2009 at 8:54 AM
We just finished a site based on supersized, it will go live this week.
You can see it here http://s66633.gridserver.com/w/vaa/beta/vaa.php
Thanks!!
July 14th, 2009 at 12:04 AM
First off….. THANKS! I’m building locally so I don’t have a link for an example yet, but I’m wondering if anyone has luck running Supersized in WordPress. I’ve got a decent start, but when hovering the navigation disappears. To make matters worse, the gallery is actually not scrolling, so on second thought — maybe I don’t have a decent start! Help?
July 14th, 2009 at 9:41 PM
Update:
Got everything working with WordPress. It was user error and I just needed to reassign some links.
The only issue now is that the next button is “sticking.”
July 18th, 2009 at 2:45 PM
I’m trying to get a shadowbox to play nice with supersized. I get some flicker on quicktimes when the slideshow is playing.
Is there a way to pause the slideshow when I initialize a link to a shadowbox?
July 18th, 2009 at 3:02 PM
Yes, if you look in the script, just mimic what happens when you press pause when the link is initialized
July 20th, 2009 at 7:43 AM
great plugin…is there a way to incorporate html or swf’s into the slideshow instead of just images?…
also, how about seo friendly urls for each image?…maybe through history plugin?…just wondering
July 20th, 2009 at 8:09 AM
@calvin
It might be possible to include some of those things, it would take some tinkering around, but my intent for this plugin was first and foremost to deal with images.
July 22nd, 2009 at 10:15 AM
hey…
first of all, very nice plugin.
i made a gallery with 21 pictures and the page is very slow. the total size of all 21 pics is just approx. 1mb… i read in this post about a possible solution with ajax, to load the images. how does it work? has anybody a link for me or a short discribtion?
thanks a lot and cheers ALEX
July 24th, 2009 at 6:32 AM
Marc-Andre Gray, were you able to pause supersized once a shadowbox is opened? I’d like to do this too!
July 29th, 2009 at 3:25 AM
Wuss, you just need to make jquery click the button.
When I open or close videos I call $(“#pauseplay”).click();
I’m also working on going to a specific image but I doesn’t work all the time.
$(‘a.gotoslide’).click(function() {
if($.inAnimation) return false;
clearInterval(slideshow_interval);
var valor = $(this).find(‘img’).attr(“id”);
var last = $(‘a.gotoslide’).attr(“id”);
var th = $(this).find(‘img’).attr(“id”) – 1;
$(‘img.thumb’).removeClass(“blur”);
$(‘img.thumb:eq(‘+th+’)').addClass(“blur”);
gotoslide(valor, last);
return false;
});
function gotoslide(valor, last){
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $(‘#supersize a:eq(‘+valor+’)').addClass(‘activeslide’);
currentslide.removeClass(‘activeslide’);
if ( currentslide.length == 0 ){
unomenos = last – 1;
currentslide = $(‘#supersize a:last’);
}
if(valor == last){
var nextslide = $(‘#supersize a:eq(1)’);
unomenos = last – 1;
var prevslide = $(‘#supersize a:eq(‘+ unomenos +’)');
}else{
if(valor == 1){
var nextslide = $(‘#supersize a:eq(2)’);
var prevslide = $(‘#supersize a:eq(‘+ last +’)');
}else{
unomas = valor + 1;
unomenos = valor – 1;
var nextslide = $(‘#supersize a:eq(‘+ unomas +’)');
var prevslide = $(‘#supersize a:eq(‘+ unomenos +’)');
}
}
$(‘.prevslide’).removeClass(‘prevslide’);
prevslide.addClass(‘prevslide’);
nextslide.hide().addClass(‘activeslide’);
nextslide.show(); $.inAnimation = false;
$(‘#supersize’).resizenow();
}
July 31st, 2009 at 2:24 AM
I’m having an issue in version 6, 7, and 8 of IE. It’s is loading and playing the fade animation fine for the first two images (there are 10 in total) however after the second image, the screen goes entirely white and remains that way without changing.
Before I create a test version to link to as an example, has anyone had a similar problem and potentially seen a fix. Problem does not occur in Firefox.
July 31st, 2009 at 8:50 AM
I’ve found a solution for the folowing problem:
IE doesn’t Anti-Alias the resized images like in Gecko (FF) or Webkit (Safari, Chrome) by default.
I’ve added this to the css:
#supersize img {
-ms-interpolation-mode: bicubic;
}
And now the images also look smooth in IE7+. I don’t have a fix for IE6 and lower.
@Sam Dunn: Maybe you can add this piece of css in the next release. I’m looking forward to it.
August 3rd, 2009 at 8:20 AM
Is it possible to center the image based on the horizontal counterpoint rather than vertical or top left?
August 3rd, 2009 at 8:58 AM
*centerpoint
August 4th, 2009 at 8:17 AM
@Joshua
Within the the resizenow function in supersized.js there are the following lines –
if (options.vertical_center == 1){
$(this).children().css(‘left’, (browserwidth – $(this).width())/2);
$(this).children().css(‘top’, (browserheight – $(this).height())/2);
}
Which you could then apply the following principles to -
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
August 4th, 2009 at 9:24 AM
Hey – great bit of code.
It would be nice if there were an explicit license in it…. And it’d be best if this were BSD licensed.
.-= Jay´s last blog ..Acquia.com website refresh =-.
August 4th, 2009 at 9:48 AM
@Jay
Here’s the deal as I’ve outlined before -
I’m all for people taking this and expanding on it, if you do so I’d be interested in seeing what you’ve added. Feel free to drop my name accordingly or whatever else moves you. I would ask if you are sharing this plugin without any alterations, please link directly to this article. Feel free to use it in projects and whatnot.
Hope that makes things clear for you.
August 5th, 2009 at 9:14 PM
Hi,
That’s a great plugin. Thank you so much.Is it possible to the fade effect to be more fluid? I find it a bit laggy.
Thank you
Martin
August 5th, 2009 at 9:33 PM
@Martin F
Much of the fading smoothness depends on the browser size/image size. There are certain limitations with jQuery and large images as far as choppiness goes.
August 8th, 2009 at 3:15 AM
Sam, This is Very great script. I’ve been waiting for this. I like how the images resize as the browser also resize. I wonder if it can handle thumbnails? so its more like a gallery.
Thank you!
August 8th, 2009 at 10:53 AM
@Pennfolio
Thanks so much for the positive feedback. It can indeed handle thumbnails although it would take a fair bit of tinkering to make it happen as it’s not something I’ve included in this version.
August 8th, 2009 at 1:09 PM
Don’t have a lot of experience with JQuery. Is there a way to allow the next and previous buttons to work while the slide show is disabled/ paused?
August 8th, 2009 at 9:27 PM
Thank you for your help but I am thick and new to javascript:
I see:
$(this).children().css(‘left’, (browserwidth – $(this).width())/2);
$(this).children().css(‘top’, (browserheight – $(this).height())/2);
Which I assume I need to work like:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Is this something obvious that I am missing?
August 8th, 2009 at 9:46 PM
I’ve changed the vertical center code to look like:
if (options.vertical_center == 1){
$(this).children().css(‘margin-left’, -($(this).width())/2);
$(this).children().css(‘margin-top’, -($(this).height())/2);
And then the #supersize css to look like:
position:fixed;
top: 50%;
left: 50%;
Unfortunately while things look relatively centered, the true horizontal “middle” of each image is not lining up with the “middle” of the browser window. Do you or can anybody else see what I’m doing wrong?
August 8th, 2009 at 9:50 PM
Wow I’m stupid. Ok guys that’s the solution if you want horizontal centering!
August 9th, 2009 at 10:41 AM
Is there a way to implement this for a Flash .swf?
August 9th, 2009 at 11:11 AM
@Marcus Olley
While I am not a Flash guy, I based this plugin off the functionality that Flash has when it comes to fullscreen resizing. I think it would be worth looking into and you probably won’t need Supersized to do so.
August 11th, 2009 at 1:48 AM
Hi I’ve been trying to get supersized 2.0 to work nicely with shadowbox (http://www.shadowbox-js.com/).
My trying to set supersized to pause when ever the shadowbox is called up. This seems like something that should be simple but I can’t seem to get it too work.
I’m trying to high-jack the “pause hover” feature to assign it to the shadowbox. But no luck so far.
If anyone has any ideas please shoot them my way.
August 11th, 2009 at 4:33 AM
How about compressing (minifying) this brilliant script with Yahoo YUI compressor?
If anyone has experience with that…
August 12th, 2009 at 2:19 PM
Hi great thing this! but how do you get round the problem with the whole security issue with internet explorer? It seems a pain if people have to go into there settings to view the website?
August 14th, 2009 at 3:07 PM
Hi, I just implemented this on a test a page to see how it works. It works wonderfully, however for some reason the only transition effect that I can get to work is the fade. If I try to another transition, it stalls at the first image and never transitions. It’s great for now as I only need to use the fade transition but the other transitions would be great to try out. Any ideas on what I am doing wrong? I’m only changing the number corresponding to the effect.
August 14th, 2009 at 3:32 PM
Hi,
Nevermind, I figured it out. Script(s) placement. Thanks this makes my life so much easier.
August 20th, 2009 at 2:32 AM
i’m trying to get this to slide the current image off to the left before sliding the new image on from the right by tweaking the code for transition 3. It works fine in IE7/8 but in FF it just loads the new image with no transition:
if (options.transition == 3){
prevslide.hide(“slide”, { direction: “left” }, 1200, function(){
nextslide.show(“slide”, { direction: “right” }, 1200, function(){
$.inAnimation = false;
});
});
}
i also added a style=”display:none;” to all images in the HTML except the first or there was some odd display happening
Any ideas why this doesn’t work in Firefox?
.-= Dan´s last blog ..Montenegro – one of the world’s fastest growing tourism markets =-.
August 31st, 2009 at 4:29 PM
Hi,
Beautiful work! Thanks so much for making it available; that’s awesome. I was wondering if it’s possible to have the images change upon visiting different pages throughout a site… Say you click to a new page the background image changes instead of continually rotating?
Thanks again,
Anton
September 1st, 2009 at 2:45 PM
I’m working up a mock design for a photographer who saw a Flash site he liked and now wants one similar. I don’t want to build it in Flash, so I’m working on mimicking Flash with jquery.
This plug-in helps a lot with the idea!! But, I’m finding a little problem. Any image I place over the supersized via z-index or otherwise get distorted. I’ve solved this by placing the image in a div as a background but this isn’t always advantageous. Is there a work around for this issue?
Also in my case I don’t want to wrap my images in a href tag, but without the href tag images don’t display. Is there a work around for this.
TIA
September 3rd, 2009 at 9:18 AM
Hey Sam,
inspired by your great script i created a new plugin: http://dev.andreaseberhard.de/jquery/superbgimage/
Sorry the page is in german
Here is the direct link to the Online-Demo: http://demo.andreaseberhard.de/superbgimage/demo.html
keep on building internet!
Andreas
.-= Andreas´s last blog ..jQuery-Plugin SuperBGImage – Skalierte Fullscreen-Hintergrundbilder und Slideshows mit jQuery =-.
September 18th, 2009 at 5:55 PM
I’m sorry if I missed something but I’m still not clear how to put the site content on top of this background. I want the back ground to change with the navigation, when a new page is clicked on. How do you do that? What is the code?
I really liked how Stephane (June 16th, 2009 at 5:38 AM–We just launched SOUND Phuket website (http://www.soundphuket.com) which uses a slightly modded version of Supersized: pictures are loaded after page load and displayed in random order.) did her site. I want to do that for a client but have no idea how to make that happen!
Any help is appreciated! Thanks so much!
September 30th, 2009 at 3:28 AM
Hi there,
I’ve spent many hours trawling the net for such a solution and supersized2 seems to fit 99% of the prerequisites, notably handling the aspect ratio correctly in Chrome and Safari. I have just one niggling point left : I would like to have my background images aligned to the right of the screen (so with any overlap on the left). Is this possible ?
October 1st, 2009 at 3:17 PM
This script is what i was looking for since a long time, unfortunately i have to report serious issues under Safari (mac). When loading the “default.php” example in Safari 2.0.4 on OSX 10.4, the picture is shifted 50% to the top and the loading gif never disappears. Fwd and pause buttons are not working. In Safari 3.0.4 the only thing visible is the loading gif, while the entire background remains black.
.-= manuel´s last blog ..This saturday! =-.
October 3rd, 2009 at 1:48 PM
HI,
I would like to use supersized with joomla, and was wondering if I could have different imgs for different articles.
Because now, by putting the supersized div in my index.php, its not exactly what I want.
And I dont know if I would be able to place it in my article content.I’m pretty much of a newbee.
Thanks
October 3rd, 2009 at 2:24 PM
All is well, I had a few things wrong, that I fixed, now its working fine!
Thanks for your work!
October 5th, 2009 at 1:23 PM
Awesome slide show. Thank you for sharing!
I would also like the navigation to work when the slide show is paused. I’m not sure which if statement to remove. I tried removing “if($paused) return false;” from the //*Slide Navigation section, however that made the slide show run very quickly when pause was clicked.
Thanks in advance for the assistance.
October 5th, 2009 at 1:42 PM
Why in version 2 did you require the images to be links as well as remove ‘minsize’?
October 5th, 2009 at 3:28 PM
Hello,
Can’t I creat links to a specific slide? I want to make a navigation with thumbnails, so the visitor could choose wich image to see.
Thanks!
.-= Rics´s last blog ..Cursos online do Bruno Ávila =-.
October 5th, 2009 at 6:30 PM
Thank you for your work on this project!
My question: Is it possible to have the caption (title) link to the same location as the image?
October 7th, 2009 at 10:41 AM
Yeeeeessssss! I DID IT!!!
I did the “thumbs” navigation work. Now I can have various links and you can change the image choosing one of it.
I will prepare a little howto to post here.
CAN’T BELIEVE I DID IT!!!!!! YYEEEESS!!!!
.-= Rics´s last blog ..Peitinho nas estrelas =-.
October 7th, 2009 at 2:05 PM
In my images folder I have three files:
snake.jpg
bird.jpg
paradise.jpg
The slide section will be just this:
As you can se, only an image tag, nothing more.
Then, the content section:
Cobra
Pássaro
Paraíso
I put the links in a div for positioning.
It will be used later in js too.
And then, the script section. Here is where the trick is done.
Pay attention to settings. It’s all different from the default.
$(function(){
// Supersized settings
$.fn.supersized.options = {
startwidth: 1024,
startheight: 768,
vertical_center: 1,
slideshow: 0,
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
};
// Apply Supersized Plugin
$(‘#supersize’).supersized();
// My thumbs navigation system
$(“#thumbs > a”).click(function(){
var img = $(this).attr(“class”);
$(“#supersize”).fadeOut(’slow’, function(){
$(this).html(”).resizenow().fadeIn(’slow’);
});
});
});
It’s working incredibly well, and I don’t have any limitation regards number of images. They are loaded as thumbs are clicked, so you can use as much as you wish.
.-= Rics´s last blog ..Peitinho nas estrelas =-.
October 8th, 2009 at 5:01 AM
Hi, Can I ask a question or two? I could be showing my ignorance but…
1. Is this full browser slideshow possible for a blog background? I mean, can I have the slideshow changing the photos/images but the blog still be readable?
2. Is there someone that can help me do this? I know it is a lot to ask…
3. Thank you for any help! It is a brilliant slideshow!
October 9th, 2009 at 3:02 PM
You can do that easly Kari. Just put all the “blog code” inside the “content frame” tag and make the necessary adjustments in css.
.-= Rics´s last blog ..Bubble Design =-.
October 14th, 2009 at 10:20 AM
Great plugin! Is it possible to have an image set to 100% and leave the width as auto (so you would get background on each side of the image)?
I tried doing this to both the image and the a element, but the image refused to show up.
Thanks!
October 14th, 2009 at 11:09 AM
this is great and is almost exactly what i need. i wish to turn it to a manual slideshow.
any ideas?
October 14th, 2009 at 11:52 AM
sorry i had another js file opening which was minified, the actual correct js is very readable and i am sure i will be able to alter it to run manually. cheers!
October 16th, 2009 at 4:18 AM
Hi,
Great plugin – I have a question, Is there a way for the plugin to just display the first image at full size in the absence of javascript?
I also second the request for random ordered images.
I also think it would be great to be able to make the captions into links relative to the images – if that makes sense.
Thanks!!
October 19th, 2009 at 1:10 PM
Hi. Thanks for that plugin – I’ve already thought about making something similar myself but you saved me a lot of time. I appreciate that. Thanks – thanks – thanks.
I embedded the plugin in a wordpress-site and it looks really great.
There’s just one little problem: When I load a new page, sometimes the background is black for a second – I think it’s a loading issue.
The problem occurs only sometimes, I don’t know why. I’ve only one image in my #supersize – div, so it should be in the cache. The thing is, that i’ve seen that it can work, changing a page and the background stays static, but sometimes it’s reloading.
October 19th, 2009 at 2:07 PM
OK – I just figured something out that works for me – it is not tested in detail, if I find a bug, I will tell you.
I’ve not overviewed the whole code, I guess that it could be that this will break the slideshow.
Around line 19:
jQuery(window).bind("load", function(){jQuery('#loading').hide();
//jQuery('#supersize').fadeIn('slow');
(I commented out the third line shown above.)
Around line 133:
//jQuery(‘#supersize’).hide();
I commented out the line shown above.
As I mentioned, this works for me and may be pretty dirty. When I’ve got the time I’ll read the code and try to understand it in detail so please, dear developers, excuse this dirty modification – I hope this will help others having the same problem, though.
October 20th, 2009 at 1:51 AM
Very nice…
i like, but i have a problem, Can disable the image links for the slides?
to use only
October 26th, 2009 at 9:16 AM
I have integrated with Wordpress and an issue appears in nextSlide on line 188. I get the JS error ‘$ is undefined’ happening on the slide_interval.
erow80, you had some wordpress integration issues. Would you mind sharing? Maybe I’m down the same path.
October 30th, 2009 at 1:16 PM
I went and made an extra div on the left side about 300px wide. It therefore pushed the slideshow over by 300px just how I want it to be. However, is there a way I can make the slidecontent fit perfectly on the screen without having to scroll horizontally?
October 30th, 2009 at 5:05 PM
Nevermind…I actually got it to work. =)
November 3rd, 2009 at 6:13 AM
Is there anyone who have had succes with this in Wordpress and like to share the technique??
November 5th, 2009 at 10:28 AM
Hi,
Thanks for the a great plugin. Its quite easy to understand.
I was trying to modify it a bit, ran into a problem:
I wanted to put some description to this image. Have those in a div inside the of the image.
e.g
a href=”” class=’alink’>
img src=”images/one.jpg” title=”One”/>
div id=”txt”>
OneOneOneOneOne
/div>
/a>
in the javascript the slidecaption(title of image) is set as this:
if (options.slide_captions == 1) $(’#slidecaption’).html($(’#supersize .activeslide’).find(’img’).attr(’title’));
This is to set my description in a div:
if (options.slide_captions == 1) $(’#slidedetail’).html($(’#supersize .activeslide’).find(’div:txt’));
It Works !!!!!
The only thing is when i come to the end of the slide and it starts again from one. it schows the title but not my description?????
Hava an idea???
(I repeated the code for prevslide/nextslide functions).
Thanks,
Mahmood
November 5th, 2009 at 5:28 PM
This is a fantastic script. I’ll be using it on this site, but I’m having a weird problem that I don’t see happening on other sites…
The buttons for the navigation don’t show till you roll over them.
- I tried using small images thinking it might be a loading size issue.
- I tried using custom nav images.
Anybody else have that problem?
November 7th, 2009 at 5:27 AM
this is exactly what i was lookin for!
can anybody provide a tutorial how to use it in wordpress?
thanks in advance!!!
November 10th, 2009 at 9:34 AM
Hey,
Was anyone able to make the navigation – next and prev buttons still work when the slide show is paused? If so, care to share?
Ive tried but cant seem to make it work properly.
Thanks
R
November 15th, 2009 at 8:47 AM
I would love to use this on my blog. I’ve created a template that uses Supersize but the jQuery seems to “collide” with my lightbox-plugin (also jQuery). Is there a sollution for this?
.-= Annica´s last post ..Nytt tema =-.
November 17th, 2009 at 4:39 AM
Hi mememe,
I got the effect to work as a wordpress background (its not finished yet, but you can see it at here
I used this technique to ensure the content scrolls on large pages.
cheers.
November 17th, 2009 at 4:41 AM
While I’m here, does anyone know a way to add a noscript alternative to jquery to kick in in the absence of no javascript.
thanks
November 17th, 2009 at 4:45 AM
Hello,
I have a very urgent problem. I’m building a website for a client (see url: http://www.restaurant-visscherie- brugge.be) and it works fine, but in IE7 (and only in IE7) it only shows the first 2 images of 3, on the homepage that is. Also, the content in #topmenucontainer is only being showed the moment there is no picture (so after the second picture or when the fade happens for a millisecond).
Can you please help me?
November 17th, 2009 at 5:33 AM
Hi Mathjis
I see all three images when I follow your link. I don’t really understand the second problem, but it sounds like a z-index issue, try cranking up the z-index.
On another not, I noticed you’ve changed the animation effect so the image disappears before the new image fades in… how?!
November 17th, 2009 at 6:23 AM
Are you sure you used IE7? Because in IE7 it really ONLY shows the first two.. Hm.. About the z-index; that’s the strange part. I use z-index: 100; with position: absolute. It should be working..
About the fade, i have no clue actually. I just use transition: 1.
November 17th, 2009 at 6:52 AM
I think its something to do with the image size – for supersized to work properly all source images need to be exactly the same size, that image is different dimensions to the other 2.
November 17th, 2009 at 7:47 AM
Nope, i made sure all the images were the same size, but that doesn’t help..
November 19th, 2009 at 4:04 AM
Anyone else have a clue? I really need this fixed..
November 20th, 2009 at 12:17 PM
So what should the minimum image size? What happens if the image is much smaller than a viewers screen? Will the image distort? Sorry if someone else has commented about this, I haven’t read all the comments. Thank you.
November 26th, 2009 at 11:57 AM
Hi.
Nice script.
I’m using it mainly with only one image, just to make the page background adjust properly.
Saddly, you removed the minsize property in this new version, is there a way we can have it back?
Also, a method so we could target the slideshow to a specific image would be welcome.
Thanks.
November 30th, 2009 at 12:03 AM
Hi zander, you can help me to work with this plugin on wp?
sorry for my english.
I have included in the header.php file links to. js needed to supersized, also included the CSS … but does not work. I checked the pictures … if you have any idea how to resolve this problem, I would greatly appreciate
November 30th, 2009 at 9:21 AM
Hi,
i would like to set a fullscreen background to a website i’m designing. i don’t need slides, transitions, etc., just a fullscreen image. so is it possible to add some content on top and also add a dotted pattern like this: http://www.basjanader.com/ (i need an image, not a movie)
December 1st, 2009 at 5:23 AM
Hello,
I case anyone would like to know how i fixed the IE7 problem. I set transition to ‘0′.. Seems to have fixed it
December 1st, 2009 at 5:23 AM
Hi, great stuff, just what I was looking for. However, it takes forever to load more than 40-50 pictures. I also don’t understand the need to reprocess vertical oriented pics so that they match horizontals, otherwise they get stretched. I know pshop had this covered (although they have since ruined their slide show functions in CS4 for some mindboggling reason), maybe there’s someway to merge that code in there.
Also it would be nice if the nav bar was transparent, so it didnt block so much of the lower part of the pic. Maybe I’m missing the resolution of these issues, but they are rather serious ones.
December 1st, 2009 at 2:20 PM
This script has really made me happy, so thanks very much.
I would like to know if it is possible to make the transition smoother? And also, as the images scale what would be the recommended image size? Currently I am using images that are 1350×900px but even at this size they can look a bit pixelated on larger screens. Any thoughts?
Take a look:
http://www.oneplusonecreative.co.uk/sunrise
Thanks,
Mike Dunn.
December 10th, 2009 at 8:21 AM
Love the script. It was the best looking one on the Smashing Mag article. Great job.
I have a small issue with Firefox (Win/Mac 3.5.x)… The background pic is shifted about 350px to the right. IE (7/8) and Safari display the background correctly. Any ideas?
December 13th, 2009 at 7:41 PM
really nice work guys. maith tú
December 16th, 2009 at 11:33 PM
I am loving this. Thanks for the work that went into it!
I have a question and see that no one else has asked yet. So I’m thinking that I just missed something?
I am using 1280 by 960 images and when I leave the css the same as yours for the div: SUPERSIZE IMG:
#supersize img, #supersize a{
height:100%;
width:100%;
position:fixed;
z-index: 0;
}
My images stay stuck way over to the right of the page and doesn’t fill up the screen.
I changed the position to relative and then the first picture loads up perfect and fills the screen. When it comes time to cycle to the next photo though, the first picture stays on screen and doesn’t change to the next photo. The next photo’s title does change though. Does anyone have any ideas why this is happening?
December 17th, 2009 at 6:20 PM
@ Anthony-
I had the same problem as you as well. I’m working on trying to figure it out myself.
So far i got them to cycle through, however, the images are not corresponding to the image titles. GrrrR.
http://www.amyling.com (just click on any of the nav)
December 17th, 2009 at 10:32 PM
Thanks amy,
I will respond back here if I can figure out what the problem is.
The gallery that I am trying to get working is here:
http://www.preeminentproductions.com/hires.php
December 18th, 2009 at 11:56 AM
@ Anthony-
I realized after messing with it again that my issue that your having was based on the CSS. At first I thought it was because I had placed all the css and js files into different folders not on root but that wasn’t the case. So I had to step back through it one step at a time till I figured out it was my CSS. I didn’t pinpoint which part I had messed up on though. So if you customized the CSS on yours, might want to see if its that.
December 20th, 2009 at 6:49 PM
Thanks! Yeah, I did change it some, so I will go through it again.
December 21st, 2009 at 8:20 PM
Figured it out! I forgot to add (Top:0; Left:0;) for the position! Thanks again for the work that went into this. What a beautiful plugin!
December 24th, 2009 at 4:27 PM
I am using this on a website I am building, slightly modified. I just want it to have 1 image for the background, not a slideshow.
I have it working, I set the z-index’s for the background styles to -5, -4, -3 and then have the rest of my containers on my page set to a z-index of 3. I have messed around with this a bit, but the problem is: The background works fine, my content all appears on top of it, but I can’t click any links or select any text.
So, my site appears visually correct, but I can’t click any of my links or interact with the page at all. I know there’s something wrong with my code, but I can’t figure out what.
My site is at: http://www.hobsonchiro.com
December 24th, 2009 at 4:41 PM
I’m responding to my own post:
Discovered that all the divs that I want on top not only need a high Z-index, but also to be set to position:relative.
Once I did that, everything inside these divs works fine, only the main outer container divs needed the z-inxed and relative setting for all the stuff inside to work.
January 10th, 2010 at 8:30 AM
hi! i wanted to thank you for this great slideshow…
i was wondering if there is a way to refresh the page after the last slide… so that if i add images it automatically updates….
something like
“javascript:location.reload(true)”
but i haven’t figured out where to put the code without messing the whole thing…
thanks in advance.
tommaso
January 12th, 2010 at 12:09 AM
I was also experiencing sluggish performance problems in IE7 when using more than a dozen images–the whole thing slows as you get further through the loop. It seems to be a quirk where IE7’s rendering engine tries to redraw ALL the images for each transition.
Anyway, it’s a pretty quick fix. In functions prevslide() and nextslide(), replace
$(‘.prevslide’).removeClass(‘prevslide’);
with
$(‘.prevslide’).css({‘display’:'none’}).removeClass(‘prevslide’);
This should work for the fade transition (haven’t tested the others).
January 13th, 2010 at 12:43 AM
unfortunately it looks like supersized.2.0.js is not working in Safari 3.0.4 on Mac.
At least the demo http://buildinternet.com/project/supersized/default.php hangs with the loading bar spinning.
January 13th, 2010 at 5:13 AM
Hi, Great Plugin,
Is it possible to include a maximum size attribute.
Regards
Tony
January 19th, 2010 at 10:34 AM
This plugin is great. Does anyone know how I would go about modifiying it with thumbnails to navigate the background a little further than just previous/next? I would love to add about 5 thumbnails to swap the background onClick.
January 19th, 2010 at 11:53 AM
Looks like the SuperBGImage tweeks adds what I need, although it is not very well explained, thanks
January 25th, 2010 at 12:34 PM
Hello. LOVE the plugin; but was wondering if anyone ever resolved Michael’s issue…
“I’m having an issue in version 6, 7, and 8 of IE. It’s is loading and playing the fade animation fine for the first two images (there are 10 in total) however after the second image, the screen goes entirely white and remains that way without changing.”
I am having the very same problem, only I am cycling 5 images.
Any thoughts? Any help is appreciated.
Thanks.
January 26th, 2010 at 2:39 PM
I had sent two comments to this forum a few days ago and they are now gone. What happened to them? It was under the name macmizer?
January 26th, 2010 at 3:38 PM
@James
I’m sorry I have not experienced this issue in my tests, so I don’t have any fix suggestions.
@Mike
Your original comments were on the version 1 post of Supersized. In order to shift the image down from the top of the browser, I suggest you play around with the CSS “top” attribute.
January 31st, 2010 at 12:10 PM
Fade effect is smooth only in Chrome, on other browsers it flickers. Also, slide effects are very fast and I cannot seem to slow them down. Can this be fixed?
January 31st, 2010 at 2:12 PM
You can see here:
http://test.manicsite.com/
Sometime it does not show images, just loading animation.
I load images using ajax load:
$(“#supersize”).load(“Ajax/HomeImages.ashx”, null, function() { $(“#supersize”).supersized(); });
February 1st, 2010 at 5:50 PM
@Sam Dunn
Supersized 2.0 is pretty awesome man. Thank you very much for this functionality. It was pretty straightforward, although fiddling around with the code to add it to a page with a bunch of elements took some time, but that’s normal. Great stuff here.
I have a general most likely stupid question. I have a project in which when the background image changes I would like another div with some text to change as well. Is there some way I could connect that div with the background image transition and add code for text similar to adding for multiple background images? I was maybe going to try and just add a basic element fading jquery script with the same exact interval, but I am worried that it will not match even with the same intervals since it would be different elements / scripts.
Also, I thought about adding said text to the title attribute and changing positioning with CSS, but I think the text I will be using is way too long, plus it’s laid out like header>text for every snippet.
Any insight on the above issue is greatly appreciated.
Thanks again for the awesome code.
February 1st, 2010 at 7:11 PM
Replying to myself,
So… I went ahead and added the text to the title attribute, pulled out div#slidecaption from div#content, and put it into my footer div. I then added some CSS for positioning and whalla it works fine.
The only thing is I feel like this is such a sloppy way of doing it and hate to use the title attrib for this purpose. So… still, if anyone else knows how to attach a separate div to this timeline then feel free to share.
February 2nd, 2010 at 7:45 PM
Is there a way to get this to run smooth in firefox 3.5? It seems to run horrible windowed and if you maximize your window get ready for some lag.
Is performance dependant on your computer specs or the size of your source images or does it just not run well in firefox?
I’ve tried with various image sizes and ratios and it seems to yield the same results.
February 3rd, 2010 at 4:47 PM
Hi Sam,
Great plugin!
Is there an easy way to replace the arrows with numbers referring to the image.
So have 1 | 2 | 3 and have these links to the first, second and 3rd images?
Thank you.
February 3rd, 2010 at 5:10 PM
Also. Quick 2nd question
How do i stop the slideshow but allow the navigation?
February 5th, 2010 at 3:53 PM
from Rics replied above [about the thumbnails navigation]
how to target the thumbnails to call the images ?
I try to create the Unordered list to show the Thumbnails
[code]
[/code]
please show me how to target with this nav ?
February 5th, 2010 at 3:54 PM
from Rics replied above [about the thumbnails navigation]
how to target the thumbnails to call the images ?
I try to create the Unordered list to show the Thumbnails
please show me how to target with this nav ?
February 8th, 2010 at 9:56 AM
hello sam! before anything, thank you very much to share your work! amazing and very usefull! thanks again
I write you beacause I want to add a menu with the toogle from jquery and when I insert this to make the toogle work:
the supersized doesnt work anymore…any help please???
thankssss flor
February 8th, 2010 at 12:08 PM
sam, i see it perfect in local, buit nothing online!! could you please help me…? this is the link: http://www.conceptovisualweb.com/delcerro/dp/home2.html
February 8th, 2010 at 10:44 PM
Hi! Great script! I was wondering if it is possible to adapt it to slide images left to right ç8like the coda slider but fullscreen) Is it possible at all in jquery? where should i start looking?
thanks and keep up the good work!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.