Klipp og Lim – Blog
Fullscreen Images Reloaded
18. May, 2009 Ι Tags: CSS, Tips and Tricks, Webdesign
Since our last post about fullscreen scaling background without flash, we have received lots of feedback and suggestions for improvement. There has also been some further developement with implementing the gallery functionality we use at the GOTOCHINA-site. Now there’s a new version in town.
To sum up some of the changes:
• Mootools is used as a base
• You can now choose to letterbox vertically oriented images
• The script now automatically turns on gallery-mode if a “navigation-element” is found (see code for explanation)
• There’s been added some conditional settings, for example for preventing the ugly opera scroll bug
So here you go, see the comments in the source code for further explanations:
Share on Facebook
Search
Categories
- 3D
- Advertising
- Audio
- Design
- Effects
- Flash
- Inspiration
- Motion graphics
- Movies
- Music
- News
- Showreels
- Technology
- Tips and Tricks
- Uncategorized
- Web Development
Delicious
Subscribe
The_V
Awesome job the effect looks really great
Only one notice: The demo gives a stack overflow at line 220 and line 38 error message in IE8
This mesage does not pop up on your real GOTOCHINA website
any idea what causing it?
Keep up the great work
@The_V: Hum, I have no clue at all, but thanks for the tip! I’ll look into it! :)
Chris
Yeah, im having the same issue with the stacking order, is there any way to solve this? Apart from this error the effect looks fresh!
Thanks
Samston
Great stuff! Since this is an offshoot of your other post (http://klippoglim.no/blog/2009/04/full-screen-images/) does this version sort out the IE 7 issues described in the other post? I’d really like to use this method because I hate the white space you end up with sometimes with the CSS method and I don’t want to have to use flash every time I want to use this, but browser compatibility is a big deal too.
Let me know, great post! (and great site, just stumbled upon it today)
Samston
(Sorry!) I missed a comment in the string and it seems you already fixed it, so ignore me. Thanks!
Samston
PS – Sorry for bombarding with comments… I was going to amend my previous one but didn’t’ see a way. Anyway, it looks like you use sIFR for some of your fonts on this site. Have you tried cufon? I’ve been playing a lot with flir/cufon/sIFR and I’m trying to gather everybody’s pros and cons. So far I’ve been happiest with cufon since flir is kind of slow and sIFR (appears) to have a few bugs that require workarounds and I’d rather leave flash out of the equation, but it’s a new area of exploration for me and I’d love any insight you could provide. Thank you!!
[...] Fullscreen Image Gallery [...]
Hi! Sorry for the insanely late response! For all you guys; the script has now been updated to correct the IE 8 bug and to tweak performance using CSS in every case the browser is able, to ensure smooth resizing. Please download the source code, and please send bug reports :)
@Samston: We haven’t been using cufon in any projects yet, just tested it. For now we’re using a homemade modified version of sIFR, but I recommend you take a look at the project called sIFR lite: http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
Brilliant Eirik, thanks very much for posting
The_V
Excellent! Thanx a lot!
Jason
Hi Erik, first off huge congrats on this, its a beautiful piece of work.
Just a quick question. It seems safari is capable of scaling the images correctly while keeping composition even at small sizes while firefox will just crop into the centre shortly after a downsize. Is this a javascript issue?
I ask because I would like to use large 1920 images to retain detail on large monitors but if a user used firefox on an average monitor (1200) the photos have such an extreme centre crop all composition is lost. Safari will take whatever monitor is thrown at it however.
Many thanks!
Suraj
the vertical image is squished :(
Marc
I have the same problem than Jason. It seems the the image size ist just one problem. With firebug told a
„this.el undefined“ in this line „$try(function(){this.el.style.minWidth=this.el.style.minHeight=’inherit’});“
the script warning was also with the orginal demo picture. safari 3 on mac os 10.5.
Nice! Very cool script.
I think the next steps are:
Using Mootools to create a fade transition (preloader perhaps for these large images?) vs the one frame jump that it uses now.
Create a timed slideshow (with pause etc.)
Iphone functionality.
At that point you’ve killed any need for Flash on a simple page like this, which as a longtime Flash developer is sad, but as a serious accesiblity obsessed web developer, is awesome!
Here’s the two most advanced and most popular JS slideshows I’ve found:
http://www.electricprism.com/aeron/slideshow/
http://smoothgallery.jondesign.net/showcase/gallery/
Jack
It seems that the image does not size down when the browser window is decreased. I am using Firefox 3.0.11 on a Mac.
I would like it to cycle through images. A fade would be a plus, but a slide show cycle without the use doing anything would be a great plus.
Thank you for posting the code.
I have the same Firefox problem.
Image does not size down and portrait format of the image is squished.
Any ideas?
Thanks in advance.
Yiannis
Sorry for being off-topic, but is it possible the java script code to be converted to jQuery?
Thanks in advance.
Hi you guys!
Back from vacation. The script is now updated, trying to fix the firefox error. But if anyone want to do any improvements or adjustments, feel free, this code is not copyrighted in any way :)
There is still a error in IE7 making the horizontal images not resize to the browser window, but somehow IE7 seems to ignore to render with the new height. If someone has an idea of how to fix this, then submit your thoughts here :)
PS: The photos do preload, but adding a fade is not something I am going to implement before the rendering of browsers seems to hande it without killing the client machines CPU :/
this is awesome. I have done the same in flash, but this is just faster, and more standards based. would it be possible to use thumbnails instead of numbers? thanks
@jouni: no problem using thumbnails! it’s the link that makes the functionality anyway
[...] i bruk en fiffig løsning for et skalerbart bakgrunnsbilde, som vi ble gjort oppmerksomme på av Erik fra Klipp og Lim. Dette gjør at man enkelt kan skifte ut themet’s bakgrunnsbilde med omtrent hva man skulle [...]
Hannu
How would you go with customizing the script to make the images resize by their height only? I’ve been tinkering with lines 39, 45 and 46, but haven’t been able to make it work across browsers.
What I mean in basic is that every image should be letterboxed, horizontally oriented aswell. I’m working on a photography site, and retaining the original aspect ratio of the photo is extremely important.
Any help is much appreciated, thank you!
Adam
Amazing script, IE7 still having issues with height resizing
Jason
Hi Eric, many thanks for fixing the firefox composition issue! Works beautifully.
Jone
Super – jeg fant nettstedet GOTOCHINA og la min elsk på designet – moderne med klassisk uttrykk! Nå fant jeg tilfeldigvis script slik at jeg kan bruke det som grunnlag for egen side. Takk!
This is rather wonderful, I’ve been wanting to rewrite my photography website for a while but just could not find a way to show images and content in a clean, simple to use way. Thank you so much for your awesome work.
Do I understand this correct, that in order for the javascript to find out if the file is vertically oriented or not, the file has to be listed and preloaded? Because I use this to view images I list in a folder using PHP and do not list them all as you do in the examples. And I do not get any letterbox function, even if the images are standing up they are stretched out.
Hi there. i was fascinated by your technique and was looking for a way to present my images in a fullscreen mode (i am a photographer from germany) – so i was playing around a bit with your environment – the result is a combination of
- wordpress blog
- Eirik’s Fullscreen Image technique
- my own dynamic gallery script
its quite interesting for me, that it worked….
have a look:
http://www.unscharf.de/test
its still not filled with the final content, but it gives you the idea what i wanted to acchieve. (see espeacially the galleries)
so its just on a “test” folder of my website, i wanted to show you the result first and wanted to ask what you think about it plus i want to ask for the permission to use Eirik’s script.
have a nice day
thorsten
PS: i am glad about any feedback.
[...] (which is great, give it a visit!). I decided to play around with his 2nd script which you can find here. Thank you very much for publishing the source, Eirik! Once i cleaned up my code i will make my [...]
Hi
Is there a way to force all images to letterbox? What I mean is that it doesn’t letterbox my square images and I would rather have them viewed with letter box than make them resize to full wideness and crop the top and bottom.
I know there is “scale:function(v)” but I’m not sure how to change it.
thanks in advance.
Hi Guys
Thanks for posting the source and well done with with GOTOCHINA site
My knowledge of scripting is still in its early days and I wondered if someone could point me in the right direction to tweak this script for timed and random image rotation as some have mentioned above.
I have been looking at this script as a base for my experiments http://javascript.internet.com/miscellaneous/random-image-rotator.html and I am missing some thing when trying to combine the two.
Any pointers will be greatly received
@Thorsten. Nice site. Your photo’s definitely suits the large format
Thanks
Ed
Hi Ed,
Would it be possible to implement some kind of images description possibility? So for example each image would have independent text to accommodate this?
Thanks,
Daniel
[...] photography in full screen glory, but without using Flash. A bit of inspired poking about led me to this page, where a very talented web designer called Eirik Backer had developed a css/javascript combo that [...]
Is it possible to disable the cursor button (next, previous) but still have the links at the bottom of the page? Do I just remove the CSS for the buttons? I would like to have the links on the bottom for the home page and only have the hover mouse buttons in the gallery.
Do you think auto-rotate the background image in gallery seems possible? How do I go about that :)
Thank you.
YEEA YEEAAAA i have searched for weeks!! YOU ARE GREAT EIRIK
greest from munich germany
how can i do souch a great page with wordpress?
Hey Eirik,
do you have a suggestion why your script works perfect with mootools 1.2.2 but not with the current 1.2.4?
Thanks!
Ignore my earlier post as it was a caching problem. Works with 1.2.4
Hey erik, could you please tell me how come the scaler.js doesn’t work if i also load the jquery-1.3.2.min.js?
what could cause the conflict?
thanks
forget my last post, i solved it somehow :P
admin
Hey everyone, Eirik back here!
Big news: The script have gone through a complete rewrite – so head over to the new version for full features list:
http://klippoglim.no/blog/2010/06/ultimate-full-screen-images-without-flash-iphone-and-ipad-friendly/
ps: I am really sorry for the lack of replies on this post, but now we’re in for new times concerning feedback on the new version!