Klipp og Lim

Great work guys!

sick work!…is there a way to give the images a push left or horizontal scroll transition?

essentially i want to emulate the jquery cycle plugin’s ability to horizontally slide images using a thumbnail pager and previous/next controls

sorry for double post.

hi eirik, is there a way to make the picture not to stretch in landscape mode but beeing scrollable down on iphone and ipad?

in a way being cropped in landscape mode and able to be scrolled down till their natural end?

otherwise this will only work with panoramic pictures in landscape mode….

many thanks

Pretty amazing!
Great work!!!
Just to ask you. Do you have some examples or idea, how to use your script and provide some small thumbnails and also change the text labels for every image?

UPDATE: The script is now updated to support transitions (see jquery-example), but I would’nt recommend it due to performance – consider fanciness vs. functionality.
The script now only returns a object with info for doing custom swaps, so the “simple” exmaple.js is also changed somewhat. When it comes to thumbnails/pagination/custom text, I can make an example for that as well, if you guys want to drop that job ;)

@faffo: I’m not quite shure what you are aiming for. Are you thinking of letterboxing all images to prevent any croping?

hi Eirik, the point is that i’m trying to use this script for my site background …

it all works flawlessly on desktop computers…and iphone/ipad in vertical view..

but with the iphone oriented in andscape mode, the script blocks my website background dimensions tot the landscape resolution….cutting all the divs inside with no possibility to scroll them down…

make sense?

thanks for any help provided….

Hey,

This is really nice but doesnt appear to support pages with long content above the background. You have set overflow to hidden and hence we cant scroll!

Any fix?

Hi,

the current image holder tags are bit strange.

Maybe there is a workaround for this in js
Otherwise great stuff, thanks for sharing it.

exactly what James said…

Thank you very much for sharing this.

I don’t know if it’s just me, but the files in the example zip file are corrupted when I try to open them on my pc. Has anyone else experienced this?

I have a workaround for the jquery version of this script to get rid of the nested / b / i / i / tags
We need just to change the function to $(document).ready(function(){ and wrap the missing tags around our images


$(document).ready(function(){
// (function(){

// prepare
$("img.slide")
.wrap("" + "");


and my tags look like this now:

it is a lot cleaner.

what do you think?

sorry some troubles before…

cool! thanks for releasing the source files,
one thing: when I replace the ‘next’ and ‘previous’ texts in both the the js. files with images,
they behave real strange -> the image gets smaller each time it changes.
Until a point that it has it’s original size, but shrinks again.. any thoughts on this?

Is there a way to link directly to the second image of the slideshow, instead of always starting with the first one? Apart from that, great job, really dig the script

[...] galleries without flash, to be compliant with the picky iPhone/iPad, and thanks to this great guide plus a little bit of CSS tuning and PHP programming I ended up with my current release of [...]

Hey Jquery Experts,

Could anyone help me out with inserting content on top of the various images so that it moves along with the transition?

Any help would be hugely appreciated.

Cheers

Hi there!
I’m in a desperate need of exact this beautiful full screen functionality, combined with one unique caption per image, and a separate numbered navigation through the images. Any chance to get this programmed by you? I wonder what the costs would be to get this built. Thank you!
Stew

Awesome script, I’d like to thank you for it.

I have a quick question:
is there a way to bypass the title of the photo and not have it displayed in the slideshow, somehow?

I use the script in a photoblog (inside a WordPress loop) which displays the content (). The content are the photos. When I add the title of the photos () before displaying the photo, even with “display:none” for the title, it adds an extra element in the slideshow. So I have to click twice to get to next photo. Furthermore it also unloads the photo and displays an empty background (the place of the title I assume)…

Is there a way around this?

Regards,
Alex Cican

Wonderful script.
Can someone teach me (if it is not too hard) how to make automatic timed transitions ? say for eg automatically switch to the next image each 5 seconds and loop.
Thanks a lot.

Thanks for this , if i only want one image per page, how do i implement that, in other words i dont want the gallery function. just the full screen image.
Also what james said how do we get around the overflow hidden? for longer pages

Hi

Thanks for a great Script.
Is this script also usable for fullscreen page-backgrounds (no gallery feature)?
Like what Peter said?

Thx for the answer

I totally Love this style!

A question I have is on your first version of this site I noticed that when you hit a navigation buttons it took you to that page and the web address didnt show the end tag like /home.php or .html etc, etc

How is this possible???

Love your site!

E-

Many thanks for your script.
I am not very experienced with webprogramming but it was easy to add your script on my existing website (see all the pages with background image).
Now, I am looking for somthing like your design to remove the flash galleries (which are not readable by iPhone.iPad…) – something with no resizable images to keep the initial dimensions of my paintings.
Thank you again.

[...] post and be displayed full screen in the photo section. I used the JavaScript and CSS solution by Eirik Backer » to display images in full screen. The entire right half of the screen takes you to the next photo [...]

Can this wonderful full screen images bcome the wordpress plugin ??
Hoping for it >.<

Great job!!!!!

Fantastic – great work. I’ve spent a lot of time figuring out how to do this properly cross-browser. And I never heard about the IE anti-aliasing technique before. Thanks a lot.

hi erik – awesome work and exactly what i am looking for. at the moment i am still sticking at an older version of yours ( http://klippoglim.no/blog/2009/05/fullscreen-images-reloaded/ ) and have a question concerning excluding a via javascript in html. i am a javascript noob and was wondering how to solve this. i played around with “document.getElementById(‘txtpanel’) without any success. can you or sb help me solving this?

Thank you in advance!!!!

milla

oh sorry for my repost but in the post above my html tags have been interpreted as code – my question is about excluding a DIV via javascript in html.

cheers, milla

Can this version of your script to be combined with this one – http://klippoglim.no/wp-content/uploads/scaler-v3/index-jquery.htm so the image to slide on the background?
Also is it posible to add one div with description for every image like this one – http://klippoglim.no/wp-content/uploads/scaler-v3/index.htm and change it for every single image?

I have one more question, why your example here is with jquery and your site is with mootools. Can your site run with the current jquery script with full functionality navigation menu and so on?

I’m attempting to adapt this code to do a couple of things:

Change the percentage of screen the image adapts to fill. (done)
assign an imageflip to the image that now takes up a proportionate amount of screen space. (having trouble achieving this)

Here’s what my progress looks like so far:

http://freddydewemathews.com/

Any help or advice would be much appreciated.

This is a really awesome script, thank you so much!

Love your script. How do I add a new layer for a raster.png image that would flow upon the full screen images? (like this: http://nanotux.com/plugins/fullscreenr/index.html)

Hi everone,

thought I’d drop a note telling all commenters that Eirik sadly does not have time to follow up on all the requests appearing in this post. The response to his scripts have been overwhelming, and as much as we’d like to, we are simply not able to follow up all your questions.

Thanks for understanding, and thanks for all the great feedback so far.

I was wondering why portrait and square images don’t scale to full browser width. Would make sense to me since it is called “Full Screen” script.
Is there any way we can get those scaled too? Otherwise I end up with ugly empty space to left and the right of the image.

Cheers

I have achieved this by deleting line 17 in scaler.js (“//scale by css if possible”)… Seems to be working fine. Any downside to this?

ta

Great script!

But as someone earlier posted, since the overflow is set to hidden, you cant view pages whith long content. I would really like a scrollbar that is relative to the content on top of the images.

I cant seem to fix this problem myself. is there anyone else that may have a solution?

I really love this code! But I would love it even more if this code is combined with the Touchwipe code (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library). So a full screen gallery with touch-wipe transitions for Ipad and smart phone use. It’s a pity I can’t program…

Nice Tutorial!

I’ve written a similar tutorial on how to achieve the same effect without using any JavaScript at all. It’s pure css, nice and simple.

Check it out:
http://paulmason.name/blog/item/full-screen-background-image-pure-css-code

Anyone come up with a way to get rid of the multiple nested b/i/i tags?

awesome script… i’ve noticed that on iPad you need to tap twice in order to advance ‘next’ or ‘previous’… any workaround for this?

Hi there, this script is very, very usefull!

But I still have a question:
Is it possible to jump to a specific image?

best greetings