automaticaly resizing of images bigger than viewable window
April 6, 2008 - 2:44pm — ssaki
| Project: | jQuery Lightbox Plugin (balupton edition) |
| Version: | 1.1.1-final |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | balupton |
| Status: | closed |
Description
I came up with this problem in my forum where the users have a desktop-gallery. Most of the wallpapers are bigger that the browser's window. As a result, scrollbars appear and I find that a bit annoying because I want to get the whole picture in the viewable zone.
About a week ago I fixed the problem in version 1.0.1 but in the new one (1.1.0) the function that I need to get windowWidth and windowHeight has been removed.
I'm sending you the modified version of 1.1.0 in which I put getPageSize back (at its previous position) and my code that is in showImage, Step2 (lines 767-803)
Thank you for the great work
I hope this may work for you and your further work on the Plugin.
Best regards,
Alexander Marinov
| Attachment | Size |
|---|---|
| jquery.lightbox.js__0.txt | 32.17 KB |
Comments
#1
patch against 1.1.1-final
all code needed is isolated in showImage step 2
it works but it's still a bit junky and needs some refinement to match plugin's style.
#2
Hi Alexander, thanks a lot for this contribution and sorry for my late acknowledgement, this one slipped past me it seems.
I will see about adding this into a 1.3 release, although, I see that using lightbox for such images would be problematic as you can't simply right click the lightbox and go save image as (so downloading gets a bit more difficult). As well as really thumbnails should be used for lightboxes. I think perhaps I should add a download button within the lightbox, do you have any thoughts on this?
Could you provide me a link of where the lightbox is being used like this, so that I can get a better grasp on what the best solution is.
Again thanks a lot for bringing this up and the patch you have supplied.
#3
I added this bit of CSS to my site and it seems to do the trick:
#lightbox-imageBox, #lightbox-infoBox { max-width: 99%; }#lightbox-imageBox img { max-width: 100%; }
#lightbox-imageBox, #lightbox-nav-btnPrev, #lightbox-nav-btnNext { height: 100% !important; }
#4
Adding now, will be in the next release. Solution is javascript based, and will re-apply when the window is resized.