Supersized – Full Screen Background/Slideshow jQuery Plugin
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!
If you are interested in this specific legacy version, you can download it here for now.
Features
- Resizes images to fill browser while maintaining image dimension ratio
- No extra whitespace, no scrollbars – the entire browser window is always filled
- Compatible in Firefox, Safari, Opera, IE7, and IE6
- Ability to cycle through images/backgrounds via slideshow
Getting Started
The first thing we are going to want to do is set up the initial CSS/HTML, then get the jQuery in place.
The CSS -
/*Supersize Plugin Styles*/
body {
overflow:hidden;
}
#supersize img, #supersize a{
height:100%;
width:100%;
display:none;
}
#supersize .activeslide, #supersize .activeslide img{
display:inline;
}A couple of key points from above -
- In order to prevent scrollbars from appearing when the image stretches past the edges of the browser, be sure to include body{overflow:hidden}.
- The plugin uses the id #supersize to identify what image(s)/elements need to be run. It is the umbrella class for all other elements of the plugin.
- The .activeslide class tells the plugin which img/div/a is active and therefore needs to be displayed. By default the contents of #supersize should hidden, which means you will need to specify in this section any additional elements you wish to hide/show with each slide (ie Links, Div, Img).
The HTML -
<div id="supersize">
<img class="activeslide" src="picture.jpg"/>
<a href="#"><img src="picture2.jpg"/></a>
</div>Worth noting – As you might have seen from the CSS, the .activeslide class makes whatever element it is attached to visible. For the cases when you wish to make an image a link as well, it will need the above #supersize .activeslide img to make sure the link and the image both appear. If you don’t want to use the slideshow feature you only have to include one image with the .activeclass here. You also will want to shut slideshow off in the options, more on that below.
The jQuery -
First we’ll want to include links to both jQuery and Supersized in the header.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="supersized.1.0.js"></script>
Below, plug this piece in, it is the jQuery that defines any user options you may want to change and then actually calls the plugin to action.
$(function(){
$.fn.supersized.options = {
startwidth: 1024,
startheight: 768,
minsize: .5,
slideshow: 1,
slideinterval: 5000
};
$('#supersize').supersized();
});Options
Now for all of those Nancy Drew super sleuths out there, you might have already noticed that you have options to play around with. For the rest of you, it’s okay, below outlines them in more detail.
startwidth & startheight - It is important that you specify the image size(s) in this area. These used to develop a ratio and minimum size. If you are planning on using the slideshow and images of various sizes, it will still work as long as they have the same ratios (ie 4:3 / 16:9). For these cases I would suggest using the dimensions of one of the smaller ones in the batch, as it won’t mess up minimum sizes on smaller images. For now all images must be the same ratio to display them in the proportions they were intended to be, although in a future release I will look to add auto-detection. The default dimensions are 1024 x 768.
minsize - This is the decimal form of the minimum percent for the starting width / height that you want the image to be. The default is 50% of the starting size of the image.
slideshow - This turns the slideshow feature on and off. If it is 1 then it is on, anything else… it’s not.
slideinterval - This is the amount of time spent on each image in the slideshow in milliseconds. Play with it accordingly.
Inspiration
This is my first jQuery plugin, I was inspired by the apparent lack of jQuery support for a feature that Flash can do so nicely. In my hunt for an existing plugin I came across two helpful/interesting discussions on the topic.
Chris Coyier explored this problem over at his site, coming up with a preliminary jQuery fix but ultimately landing on a rather efficient/close method in CSS.
Over at Sitepoint forums a similiar thread came up, providing a neat mooTools example and alternate CSS fix, however both faced issues with browser compatibility.
The trend seemed to be that one could either fill the browser and disregard the image ratio or keep the ratio but be faced with white space upon resizing. The only working instance I found was over at Adult Swim, which accomplished a autosizing slideshow, but does so without jQuery.
Future Plans
The clear next step is to add effects to the slide transitions, as well as forward/back buttons to control the slides.
I am a fan of Adult Swim’s example, which will be a source of inspiration for the next round.
I also hope to add auto detection of image sizes, which would allow for images of all shapes and sizes to play nice together.
While body{overflow:hidden} means that content would get cut off in a full blown website, I am interested in working out a fix other than a fluid layout/allowing for scroll bars.
If you use Supersized in one of your projects, please let me know, I’d love to see what you’ve done and include you as an example.
I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.
Discussion
February 4th, 2009 at 10:54 PM
Pretty sweet Sam! I could see each slide having a small text overlay from the images title attribute being a cool feature in the future.
February 5th, 2009 at 3:39 AM
Nice! Could you add some smooth fade-in transitions while you’re at it?
February 5th, 2009 at 10:03 AM
Any reason why you didn’t just use the Cycle plugin to accomplish the same result? Not dissing your work because it’s nice, but there’s already a kicking “slideshow” plugin that does everything this one does (except for the overlay).
February 5th, 2009 at 10:05 AM
This is great! I second the request for transitions, esp. fading.
February 5th, 2009 at 12:12 PM
wow, beautiful
thanks
February 5th, 2009 at 12:13 PM
@andy matthews
I did play around with the Cycle plugin a little bit, it uses visible:hidden instead of display:none to cycle images, which would mean that anytime the window is resized when working with my plugin, it is affecting even the hidden images, which caused some severe slowdown. Ideally Cycles will be integrated, I’m not looking to reinvent the wheel, just make sure we don’t have any knicks in it. Expect an effects update in the near future
February 5th, 2009 at 2:01 PM
This looks really awesome. I look into it and just amazing stuff mate.
February 5th, 2009 at 3:30 PM
nice plugin thank you for share..
February 5th, 2009 at 9:30 PM
Nice work. Ive been looking for something like this for a few weeks now.
Is there anyway to attach id=”supersize” to the tag? I see that the images must be written on the page – wrapped in a div.
With a smooth jquery fadein this would be great.
Rob
February 5th, 2009 at 10:48 PM
@Rob
If you don’t want to use the slideshow feature you can attach #supersize directly the image of your choice. I am also currently working on the transitions as it seems to be a popular request.
February 6th, 2009 at 5:22 AM
Hi Sam,
I forgot to write the word “BODY” tag
I mean can you have it work on the body tag. For example I have a site with many unique body id’s, each with its own BG image. Id like to use your script on the homepage . So currently the BG images are specified in the CSS file, not written on the page. Is this possible?
Yeah, a nice fade in transitions would be perfect!
Thanks
Rob
February 6th, 2009 at 8:39 AM
Can the images be shown in a random order? Would be neat if possible
Thanks for the excellent script.
February 7th, 2009 at 5:17 AM
I wired up the plugin to my flickr feed and when it encounters a portrait image, the photo distorts as it stretches it to the sides. Other than that, seems pretty good.
February 9th, 2009 at 7:23 PM
very, very cool. i wonder if this is more seo optimized than doing this same web design effect in FLASH?
Sandy
February 10th, 2009 at 1:50 PM
bookmarked. love it… will def use this one once it has a fading transition built into it =)
February 11th, 2009 at 8:23 AM
@social networking web designer
Given that flash is still in the process of being search engine “readable” by Google, I would say that this is your best bet. You can use title tags for each image, Although I really wouldn’t be that concerned as this plugin really isn’t going to affect much about SEO. Remember valuable content is the #1 thing you can do for SEO!
February 12th, 2009 at 2:28 AM
I could be nice if it had a smooth fade effect instead of the hard image transistion. But really nice work!
February 12th, 2009 at 11:05 AM
Nice! But I have to agree if a smooth transition effect was added then it would be perfect.
February 12th, 2009 at 5:08 PM
Sam,
Really nice work! I am going to work with this a little and try and make it a powerpoint replacement for a presentation LCD screen in the lobby of a non-profit I do work for. Will be much faster and more customizable. Thanks for sharing.
February 14th, 2009 at 5:20 AM
Very Nice and easy to customize. To perfect it could I suggest navigation like at ringvemedia? Pager and/or overlay would be great.
http://ringvemedia.com/beijing-photos
Transitions a distant second.
Thanks!
February 14th, 2009 at 11:57 AM
Thanks you too much, it is working all platform and browsers.
February 16th, 2009 at 6:03 AM
This plugin is perfect for what I’m doing right now…. except, that I have to put theimages in the html, and then they all have to load.
Is it possible to add extra images to the slideshow through ajax orsomething, so that I could have hundreds of imagfes (if the user stayed on the site, without having to waste soo much bandwidth loading them all at the begining?!
I think that would be a cool function!
February 17th, 2009 at 1:34 AM
Simple Thank you.
http://www.caioferreira.com
February 18th, 2009 at 5:24 PM
hi
this plug-in is really helpful, I’m waiting for effects…
one thing I found it could be a problem is that you can’t have any other div elements not being positioned ‘absolute’ in order to the plug-in to work properly.
I used a 100% width and height absolute element as a container to solve this…
hope I’m not doing anything wrong
cheers
thanks a lot
February 19th, 2009 at 7:50 AM
Thanks, it works lovelily. While you’re working away on these much sought-after transition effects, I’ve used a quick and dirty method to transition between images… although it does mean fading out to the background image before fading into the next image. It suits my needs and might sate some of the hungry users?
at the top, where the slidshow is called, also call the ’setupslides’ function:
if (options.slideshow == 1){
setupslides();
setInterval(“theslideshow()”, options.slideinterval);
}
that function goes something like this:
function setupslides() {
var currentslide = $(‘#supersize .activeslide’);
if ( currentslide.length == 0 ) currentslide = $(‘#supersize :last’);
while(currentslide.next().length != 0) {
currentslide = currentslide.next();
currentslide.css({opacity: ‘0′});
}
}
then in the slideshow function, just add some tweening:
function theslideshow() {
var currentslide = $(‘#supersize .activeslide’);
if ( currentslide.length == 0 ) currentslide = $(‘#supersize :last’);
var nextslide = currentslide.next().length ? currentslide.next() : $(‘#supersize :first’);
currentslide.animate({opacity: ‘0′}, 2000, function() {
nextslide.addClass(‘activeslide’);
currentslide.removeClass(‘activeslide’);
nextslide.animate({opacity: ‘1′}, 500);
});
}
(change the arbitrary duration values to suit your needs)
February 23rd, 2009 at 5:57 AM
Hi,
is it possible to get scrollbars like in the mootools example: http://ringvemedia.com/introduction
I tried to put some more content in the “contentframe – div” with firebug but it seems like the overflow:hidden of the body element is hidding it.
regards Volkan
February 25th, 2009 at 8:58 AM
@Volkan
I dabbled with that a little bit and from what I found, iFrames could technically get the job done with scrolling. If anyone else has thoughts on this, I would love to hear them.
@caio
Nice site
@Everyone
I’m still updating this project, I haven’t neglected effects, don’t you worry
February 27th, 2009 at 5:06 PM
Great work Sam. One question that may be counterintuitive to the whole idea: can long content be placed over the background image in any fashion or must it stay within the confines of the image dimensions?
February 27th, 2009 at 6:58 PM
@Steve
The browser width defines what content is shown because the overflow is hidden. Basically the best way to display long content would be putting it in a smaller iFrame so that the user could scroll. That has been the best I’ve been able to come up with so far, I hope it helps.
March 1st, 2009 at 12:06 PM
This is exactly what I was looking for!
March 1st, 2009 at 8:20 PM
What terms/licence is this being distributed under?
March 2nd, 2009 at 12:15 AM
@Joel
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. Hope that makes things clear for you.
March 2nd, 2009 at 9:28 PM
Does anyone have any comments on what Arturo said?
“one thing I found it could be a problem is that you can’t have any other div elements not being positioned ‘absolute’ in order to the plug-in to work properly.
I used a 100% width and height absolute element as a container to solve this…”
So is it cool to have everything positioned absolute? or is there a workaround? Thanks!
March 10th, 2009 at 7:46 AM
nice work! a transition like this would be nice too: http://group94.com/#/website/work/portfolios/
March 11th, 2009 at 1:44 AM
Sam, great work! I’d love to use this on the next iteration of my portfolio. Question is: has anyone managed to make this work as a controlled slideshow? That is, with next and previous buttons? If you have, or know how to, I’d be forever in your debt! Hit me up at bobby@dragulescu.com.
March 16th, 2009 at 10:46 AM
Hi, as mentioned earlier the job can be done using for instance the cycle plugin with navigation. Just change in the CSS img sizes and slide container to 100% height and width. and the navigation on top (abslotue positioned with a z-index). The only problem is that the pictures will be fitted to the screen proportions which causes deformation. Otherwise it works fine (firefox and IE 7) . All possible jQuery cycle options can be used without problems (vert. scrolling, fading etc. Cheers
March 16th, 2009 at 4:06 PM
Working with Doctype…. I tried to put
body {
overflow:hidden;
}
Good work… Would be nice with fading images… I try to add some stuff in it if you like
March 19th, 2009 at 2:02 PM
Fantastic, just what I was looking for. Thanks so much!
March 22nd, 2009 at 9:25 AM
I can’t wait for the effects. I built similar sites with Flash in the past—http://hazethefilm.com, and I really like this because it’s HTML rather than Flash.
When will be see an update? I’ll donate to make it faster!
March 22nd, 2009 at 9:30 AM
@Aen Tan
I dig the enthusiasm, insider information right now, you ready? A Supersized update is first on my list after updating our parent One Mighty Roar Site this next week. Aka soon!
March 22nd, 2009 at 1:08 PM
Hi Sam,
For the fun of it I modified your plugin to add fading and vertical centering. Have a look!
http://aenui.com/supersized/
I’ll probably use this for one of my projects until you release something more complete.
March 24th, 2009 at 7:29 PM
Hey Sam,
This plugin works really great, no problems setting it up. Looking forward to your update!
However, would it in any way be possible to make the background “fixed”? Anything to avoid using iframes really. Or is it really the only way with pages with longer content than the viewport?
Kind regards
March 24th, 2009 at 8:12 PM
@Oskar Rough
Off the cuff, it really is the only way that I’ve come up with, if we didnt use overflow:hidden, scroll bars would show up for the parts of the image that overflowed. I’m still pondering it though, hopefully I get struck with genius.
March 26th, 2009 at 5:13 PM
Hi there,
thanx for the beautiful script!
ther is a double closing script tag in your example files…
Kind regards,
mtness
March 30th, 2009 at 4:16 AM
This is wonderful, thank you for posting this code. How can we make the slideshow loop in an never ending loop? and is it possible, when showcasing more than 10 images, to not pre-cache – to display them on-demand much like the slideshowpro flash plug-in does (see slideshowpro.net)? whatever, this is a terrific aid. Looking forward to enjoying the future of versions of this code…
April 2nd, 2009 at 2:52 PM
I was wondering if there is a way so that when you page down. It does not go to the bottom of the image. But rather bottom of the page. It seems like it should work because Body Overflow is set to hidden. But it doesn’t.
April 5th, 2009 at 5:18 AM
A response – of any kind – to my questions would be helpful!
April 5th, 2009 at 8:50 AM
Hi, i noticed that on safari (on mac) the slideshow freez after the second picture, everyone else have the same problem?
That would be great if the pictures load one after another, instead of all at the beginning. Because, when you load the slideshow, you see the first picture,(all others pictures are loading too) and then a black screen and after that you go back to the first picture and the slide start.
Is it possible to avoid that ?
Thanks!
April 5th, 2009 at 12:19 PM
@DamBuster
I have not yet worked in a pre-caching method or really explored that at all, it is something I will consider in future versions. The slideshow continues indefinitely already, which means it is already a never ending loop, thanks for the compliments.
@Totoro
I have tested it in Safari and have not been able to duplicate the problem. I have tried to keep the image sizes relatively small in order to compensate for the fact that they all load at once. Have you altered the code at all, because I have never had that happen?
April 7th, 2009 at 3:43 PM
I have used your plugin on this website
http://www.lcgsa.com.ar
cheers
let me know when you add the fadein effect
lucas
April 8th, 2009 at 11:49 AM
This plugin is awesome, just a shame internet explorer is pants!! I tried supersized for a site i’m working on and it works beautifully in safari, firefox, opera etc. but when i test it in ie (6 & 7) the images seem to pixelate somewhat (not loads but enough for my client to notice the difference from the earlier flash version). Its particularly noticeable on straight lines or text within the image. Is this something anyone else has noticed?
April 10th, 2009 at 12:44 PM
This is a great start. Very cool idea. We’ve worked on some fullscreen image viewers, but they’ve always been in Flash. This is great. Here are my suggestions:
- Need some smooth transitions (I prefer a simple fade in/out). I know this has been mentioned in almost every post, so I am just reiterating.
- Need some way of loading the images. With large, beautiful images, they load choppy, from the top down, of course. It’d be a lot smoother if you did a nice loading image until it was ready to fade in. You should load the other images in the background after the first one loads, if possible.
- We need controls. Next, previous, stop/play would suffice. The user should have some control.
- The slideshow should be able to be set to repeat in the options.
Overall, this is a great idea and version 1 is a good start. If you can expand on it a bit, I think you’d have a real winner here!
April 14th, 2009 at 1:55 PM
@PhilTheForce
yes… what I have noticed in ie 6&7 is:
- the image does not scale with the browser window, but distorts and stretches the images itself.
Sorry – no issues with the images pixelating
also that:
trying to use the latest jquery, 1.3.2 the same thing happens in FF & safari, the image is stretched rather than scaled properly.
April 15th, 2009 at 11:05 AM
@Chuck
You have literally outlined what the next version will contain. I’m impressed, you nailed it.
@Sean69
I’m looking into that issue with 1.3.2, hopefully will have it ironed out in the next update. It’s coming I promise.
April 15th, 2009 at 4:41 PM
do the images load in a linear fashion?
or is there some way to have them load randomly so if the script is used across multiple pages, they won’t repeat in the same order? thx.
April 17th, 2009 at 7:40 AM
WOW, Sam Dunn, you have done some super simple slideshow that have “that punch”. Let me add some idea for futur version
1- a little place where you know image 1/20
2- a way to get to the next and back (arrows)
3- fade (as ask by everybody)
4-a preload (to get the fade smoooooth)
5-a way to slideshow from array (json)
And at last, what is the expected date of the v2 release of the enhanced plugin, any time frame ?
April 17th, 2009 at 8:01 AM
I really like this and use it a bit however today I came across a problem when using portrait photos and even speccing the min size and the ratio it would not show it correctly because the display is 99% horizontal so it filled the screen up but cut off the bottom of the image. The only way I could get around this is to paste the portrait photo onto a landscape background in photoshop and effectivly save it as a landscape photo. Anyone else experience issues with portrait photos?
April 17th, 2009 at 3:43 PM
@Marc-Andre Menard
Solid bunch of suggestions, thank you.
I’m working on v2 when free time permits, so I won’t toss out a time frame for the sake of it, but i am shooting for the near future.
@Gavin Will
Thanks for pointing that out, I’ll look into it
April 20th, 2009 at 11:53 PM
Great work Sam.
I’ll be using this for my homepage when I redesign my site. I’d love to be able to set the image to change only on browser refresh, or perhaps to just change daily. That’s different than most request, but as a photographer I’ll already have a bunch of slideshows on my site.
Best of luck,
David
April 21st, 2009 at 4:55 PM
Sam – GREAT WORK MAN!!!!
How about a variable for transition types ? (i.e. disolve, wipe, etc.)?
April 24th, 2009 at 1:24 AM
Great stuff – have only had the time to glance at this article but saw the demo and had immediate plans and ideas – which flowed almost right away
preloading of images using filament group (also going to be using testuser script to test for feautres of browsers)
http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v2.js
cross fade thanks to Daniel Snows comment – but crossfading into each other.
removed the the ties to #supersized
next I am adding thumbs – I will try to prepare it in a neater tidier package soon
April 24th, 2009 at 11:32 AM
hi sam, great stuff! pls fix the comment bug first of all tho ; ) (or is it just me with my stupid ie6 from behing my stupid works´firewall?)
thx
April 29th, 2009 at 3:15 PM
Hi folks, great job Sam! just a little question: in my page i would use supersized not for a background slideshow but to pick random images at every refresh…is it possible? it would be awesome. I’m trying to put over your supersized background this flash gallery:
http://www.flashnifties.com/media_gallery.php#customize
but it doesn’t appear…where i’m wrong?
thanks man
Riccardo
April 29th, 2009 at 4:02 PM
@LL
I would certainly love to blame IE6, but what comment bug are you referring to?
@Riccardo
It would be really difficult to implement a site of that complexity on top of Supersized, the only use I’ve seen so far mirrors that in the example. I am looking to toss random images into the next revisions. Thanks so much and good luck.
April 30th, 2009 at 11:59 AM
Not to sound redundant, but I also hoping to have my webpage load a random image every visit. Could that be something achieved via CSS? I have an old Java script that can randomly select a CSS file, and was thinking of combining that somehow.
As a side question, how hard is it to work with jQ? I am slowly starting to get my feet wet into JavaS and not sure what to expect with jQ. just by judging what Supersized can do thus far is brilliant, but you keep saying “next version” and i’m just wondering if its harder to develop for.
Thanks again for your fantastic work.
May 4th, 2009 at 10:43 AM
Hey man, I like it very very much!!! one question.
Is it possible to put this background on a worldpress theme??
May 8th, 2009 at 12:28 AM
Hey man, I like it very very much!!! one question.
Is it possible to put this background on a worldpress
May 11th, 2009 at 10:55 AM
I’m trying trying to use this alongside sifr3 but the flash replacement doesn’t seem to like supersized. Anyone else having this problemo?
May 12th, 2009 at 4:15 PM
Sam,
Incredible work, my friend. When are we going to see the fading/smooth transition version? I am dying to get my hands on it!
May 12th, 2009 at 10:45 PM
@Heinrich Krause
I actually released Supersized 2.0 which includes transitions. I would encourage you to direct yourself over to the new version linked to in the yellow box above.
May 13th, 2009 at 4:33 PM
amazing!!!!!!
May 23rd, 2009 at 2:29 PM
Hi Sam,
I’m trying to get the js work but i have this problem:
the content of the website (wordpress blog) needs to scroll but i want the bg-image to be fix. when I ad the tag in the superzied-div, the content scrolls, but the js doesn’t work..!? the picture is there, but the proportional scaling does not work.
would be great if you can help me with this
thanx, nadine
May 23rd, 2009 at 4:26 PM
Supersized does not work with scrolling currently, as I have outlined above.
May 27th, 2009 at 6:21 AM
Hi Sam,
I’ve posted a message yesterday and this was removed.
I want to integrate you fantastic script with Joomla 1.5.10 + artisteer template.
Do you or one of the other users have any experience with using you script in Joomla?
Cheers,
Steve
May 27th, 2009 at 9:04 AM
@Steve
Sadly I do not, but just keep in mind make the layout fluid or small enough to work with overflow:hidden
May 28th, 2009 at 12:21 PM
Hey Sam,
I am a bit new to jQuery so please excuse my ignorance.
In the new version, is there a way to turn off the slideshow (get rid off play/pause) and just allow the user to navigate left and right through the images. And also turn off the click through links on the images.
I’m looking to use this as a photographic portfolio.
Any help is appreciated.
Thanks!
b
May 30th, 2009 at 2:50 PM
Hi Sam,
Thanks for the great script.
I am very new to jQuery and having a problem.
I can see the div id #content is on top of the #supersize, However, I have #logo, #menu and #swf on index.php, they don’t appear on the top of background. They might be behind the background. I can’t see them at all.
How can I solve this problem?
It would be great if you can help me!
Thank you.
May 30th, 2009 at 3:08 PM
@Ben
I have mentioned a way to do this in the comments on the new post.
@May
First off all be sure you are using the newest version, Supersized 2.0. Secondly, put all those divs you are mentioning within one div (#content)
May 30th, 2009 at 4:27 PM
Hi Sam,
Worked perfect! Thank you so much!
June 6th, 2009 at 12:54 AM
waw,, amazIiing ^^
wiwing’s last blog post..BlackBerry Curve 8330 Phone, Pink (Verizon Wireless)
June 6th, 2009 at 9:54 PM
Hi Sam!
This is an amazing piece of work! It works great!! I have a question:
I want to load larges images to keep excellent quality if a visitor resize the browser up to (let’s say) 1920 x 1200. My problem is that 6-7 images at 200-300k each take a while to load initially. If I reduce the quality, I see it at 1920×1200…
I was wondering if I could load initially the first image, and the navigation images, then preload the rest of the images.
If you have any advice or pointer of where I should start, it would be really appreciated!
Thanks in advance!
(This is an example : http://www.richarddumoulin.com/v2/)
Richard’s last blog post..Bald eagle soaring
June 16th, 2009 at 9:06 PM
Great piece of art you´ve made here, excellent work.
I´m having the same problem like the other posts mention, It freezes with Safari, not working at all.
June 25th, 2009 at 2:33 PM
Thanks Sam – just wanted to share my site.
June 26th, 2009 at 1:23 PM
Hi Sam.
First of all thank you for this amazing plug-in!
I’m working on it for a website and I’ve encoured in a trouble in IE6: slider transition effect doesn’t work and I see no transition between images sliding.
Any ideas about this?
Thank you so much.
July 7th, 2009 at 2:48 AM
When I try and implement it i get the image constraining to the size of the browser rather then evenly resizing… :S
I’m trying to place it for the index page in my wordpress… so would the jQuery 2.6 be messing with some of the settings?
.-= Michael Marchment´s last blog ..New Blood =-.
July 7th, 2009 at 10:46 AM
@Micheal Marchment
Sounds like the JS isn’t kicking in I would make sure you have the newest version of jQuery and that its loading the supersized.js properly
July 20th, 2009 at 3:43 PM
Sam,
Thanks! Great script. Fading transition would be nice in this script.
July 20th, 2009 at 3:49 PM
@pennfolio
If you check out Supersized 2.0 I’ve included both transitions and controls!
July 26th, 2009 at 3:16 PM
Hej,
really great.
There’s one thing I could need when using Supersized: Is it possible to jump to a desired bacckground-image when clicking on a link (for a example a thumbnail)?
Thank you very much,
Peter.
August 3rd, 2009 at 9:39 AM
This is just brilliant!
September 7th, 2009 at 4:43 PM
Sam,
Curious if you worked out the aspect ratio yet. We’d love to use it in our project, but its user created content uploaded so, maintaining aspect ratio to the image is extremely important.
September 12th, 2009 at 3:20 AM
Jquery plug-in provides a better enhancement to us in design era.
September 17th, 2009 at 3:19 AM
Hi all and thanks for this stuff, in my case it seems that the content appears bigger, like a zoom… I have container for the header (800px) but it looks like 1000px (my logo looks “pixelled”… Any idea ?
September 17th, 2009 at 5:41 AM
i’m a big fan of the blog, thanks again.
September 21st, 2009 at 6:11 PM
hey. how do i adjust the time in between fade events and keep fade the same temporal length? id like the bg to switch every, say, minute or two (call me crazy) … thanks in adv
P
September 22nd, 2009 at 2:02 AM
also, how do you remove the href on the images (dont want link) without the slideshow collapsing? sorry im pretty novice…
September 27th, 2009 at 9:19 AM
I think you made some good points in your post.
October 6th, 2009 at 6:33 AM
Hi, I used your script in http://www.batofina.com... site isnt finished yet, but I just wanted to thank you…
October 28th, 2009 at 11:23 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
OneOneOneOneOne
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).
Thanks,
Mahmood
October 28th, 2009 at 11:29 AM
****got cut off above
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>
November 17th, 2009 at 9:17 AM
Hey, great plugin btw…if I can get it working
I am trying to do something that I am not sure this plugin allows for in its current state.
I have a site set up here which scrolls image to image like you made this thing to do…but I have this menu that my client wants to interact with more like this http://hellomynameisjonathanober.com/web/robsoliman/old/index.php where the content gets pushed down on click. I have been struggling to figure out what is going on since your plugin does what I need it to do (fullscreen/scalable) images…but it doesnt allow for me to have anything above or below. If there is a simple fix for this let me know.
Thanks, Jonathan
November 26th, 2009 at 8:16 PM
Nicely done! Thank you! Works fine for me on firefox … But there is a bug in safari 3.0.4. as earlier mentioned. you only see the logo and arrows for a second – than the screen flips to black and it loads, loads, loads
any fixes planed for that problem?
best from berlin,
frank
November 27th, 2009 at 12:38 PM
it’s realy great plugin but i’ve got one question:
what i should do with the code or with parameters
so that slideshow does not play on loading of the page
but right/left controls and play/pause button
could still work
in my situation if i put slideshow into 0 (zero)
- i don’t need slideshow by default
the controls doesn’t seem to be working
i am using v.2 if it matters
November 29th, 2009 at 4:35 PM
Hi,
thanks for this great work.
One question: how can I remove links from background images (I check in js file and links are required //Captions require img in ). But I don’t want that background images have link. I try old 1.0 version which work great, but then I don’t have fade effect…
Please help
Bojan
November 30th, 2009 at 8:44 AM
@Opensouce Rules
In 2.0 I made it based around having the images in link tags, but that does not mean that they have to go anywhere. You can simply forgo the href and it will work as though they aren’t images
December 1st, 2009 at 6:51 AM
what’s happening. I reduced the number of pics to 50 and it came in quick enough, but its making firefox seize up completely. I have to force quit out of firefox, and the app is running properly. This is macintel osx, can’t remember having this problem anywhere else.
SOmeone says jquery is not stable…
December 1st, 2009 at 7:51 AM
Thanks Sam, this solve my problem. Once again – this script is really useful and great work!
December 14th, 2009 at 5:44 AM
Nice full background rotator by Jquery. Waiting for your second version that can randomize the image sequence.
January 6th, 2010 at 1:23 PM
It’s nice that your project further …
January 22nd, 2010 at 5:26 AM
This seems to be very nice and it really cool J-Query Plug-in.
Thank you
Politics
January 23rd, 2010 at 12:54 AM
I just started using this script Supersized 2 just yesterday. It looks fine on my laptop and one other monitor. I have a desktop computer that has dual monitors. One monitor is a wide screen 19 inch and the 2nd monitor is a standard flat panel 22 inch. What I did was test any resolution above 1280 x 762 on both monitors and it looks like the background images are getting cut off on the edges. The higher I go on the resolution of the monitor the more that is cut off. Any idea how I may resolve this? After I fix this issue and if it is fixable I want to have some empty space at the top of my webpage to insert a top navigation. But I do not want the top nav resting on the background image. I want an all white background to display my top navigation and logo and then display the background images below that navigation. I looked for so long to find a gallery or way to have my images fill the screen but leave empty white space above and below the images so I may insert a top and bottom navigation. Furthermore, I want the images to fill respectfully for just about any monitor. Anyone can help with this issue?
January 23rd, 2010 at 4:44 PM
Another thing I just noticed. I decided to take the same laptop I used to setup the supersized code and reduce my resolution. I changed it from 1280 x 800 down to 1024 x 768 and the images are getting cutoff. Here is a url to the code I placed on my demo server http://demos.onlineacc.com/sidebysidenyc/supersized2/default.php
January 26th, 2010 at 5:01 AM
“startwidth & startheight – It is important that you specify the image size(s) in this area. These used to develop a ratio and minimum size. If you are planning on using the slideshow and images of various sizes, it will still work as long as they have the same ratios (ie 4:3 / 16:9). For these cases I would suggest using the dimensions of one of the smaller ones in the batch, as it won’t mess up minimum sizes on smaller images. For now all images must be the same ratio to display them in the proportions they were intended to be, although in a future release I will look to add auto-detection. The default dimensions are 1024 x 768.”
I liked this very much.
January 27th, 2010 at 12:47 AM
I am familiar with the startwidth & startheight embedded in the default.php page. My images are about 2304 wide by 866 high. I have the startwidth & startheight set to 1024 x 500. What can I expect with these settings? I want to make sure that none of the picture is cut off. If I set the startwidth to 2300 and the startheight to 866 the picture gets cutoff. I am concerned about high resolution monitors displaying the picture properly and filling the screen.
student aid.
were you replying to my posting? Please see my original posts again to see what I am trying to explain. You can see a demo at http://demos.onlineacc.com/sidebysidenyc/supersized2/default.php
January 28th, 2010 at 11:12 AM
Macmizer: I have the same problem as you. Please let me know if and how you fixed it.
January 28th, 2010 at 2:23 PM
@Macmizer and Jonas
After looking at Macmizer’s demo I’m a little confused as to what the exact issue is. If you are looking to stop the top of the image from being cut off, try turning off vertical centering.
Aside from that, after looking at your demo it appears to be functioning as intended. Simply by the fact that browser windows can be any size means that the image could potentially be cut off slightly if the window is not the perfect ratio.
If this doesn’t doesn’t answer your question, please clarify and I’ll respond accordingly.
January 28th, 2010 at 2:55 PM
@Sam Dunn
The problem for me is that the bottom of the picture is cut of and not the top. I would like the top of the picture to be cut of insted of the bottom.
asighclothing.com/webb <– this is the page im working on.
February 4th, 2010 at 7:07 AM
When I tested this w/ HTML4 and CSS2, I had no problems.
Then I tried to build a page with Supersized in HTML5 and CSS3 and my content layer (on z-indexes 3 and higher) would show up for a second (while the page was loading) then as soon as the slide show finished loading; my content layer was nowhere to be seen.
Are there any known issues w/ HTML4 & CSS3?
February 4th, 2010 at 7:08 AM
woops- I meant to say.
“Are there any known issues w/ *HTML5* and CSS3?”
sorry, sleepy.
February 10th, 2010 at 7:51 AM
Thanks for a great plugin. I seem to be having some problems with scrolling background in Internet explorer 7. I have set Body {overflow:hidden} but the problem remains. The only thing that temporarily solves the problem is to set * {overflow:hidden}, but as you can imagine this causes a lot of other problems. Does anyone have a solution?
February 12th, 2010 at 4:52 PM
I am person who could use your plugin.
However recently I really jealous to the website done by Flash for full screen as follows. I cannot use action script, but I really want to use this kind of website!
http://www.satoshinichi.com/
February 19th, 2010 at 1:16 AM
Awesome jquery plugin Sam! I can think of so many projects I could’ve used this on.
Does anybody know an easy way to load a different set of images without refreshing the page?
So when the user clicks a button/link, the set of images that is being looped changes to another set of images that is different.
I’m trying to create a gallery with different categories of images and when a user clicks on one category one type of image loads and when they click on another category, another type of iamge loads.
Thanks in advance.
February 24th, 2010 at 7:33 AM
Very useful plugin, I was using CSS and jquery, now i will have only to use this plugin and supersize.js.
great
March 3rd, 2010 at 1:32 PM
I saw a few posts on loading with ajax to give the ability to have a lot of images and not wait at the beginning, has anyone figured this out? Thanks
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.