Lightbox 2 with Auto-Resize in Wordpress
[German version available: Lightbox 2 mit Auto-Resize in Wordpress]
I’ve integrated Lightbox 2 on my blogs but noted one problem: The wordpress plugins for Lightbox 2 do not support auto-resizing. I’ve put together some scripts which each solve parts of the problem. So I got Lightbox 2 in Wordpress with auto-resize.
There are different versions of Lightbox. Some under different names. Their main functionality is: When you click on a thumbnail of an image the screen is darkened and the image is displayed in a bigger size. Often with a broad white border. Usually you are able to navigate between the different images on a page.
The problem is that usually the big image is displayed with a fixed size. So the images should have sizes that fit also smaller monitors. Unless Lightbox would allow automatic resizing dependent on the screen size. Unfortunately there are not many scripts which support this feature. At least, I have not found any for wordpress.
Here you can see how it could work:
 |
 |
 |
Wordpress Lightbox 2 Plugin
Lightbox 2 is a script written by Lokesh Dhakar which can be added to existing web pages to provide the Lightbox functionality to the images on the page. The script works independently from wordpress.
In the Wordpress plugin directory I found two Lightbox 2 plugins. I first tried the plugin Lightbox 2 version 2.8.2 written by Ruppert Morris as it had the better rating.
When I was looking for auto-resizing functionality for Lightbox 2 I found the blog post “Latest Lightbox V2 with automatic resizing” written by Fabian Lange. He added auto-resizing to Lightbox V2.04 without changing much of the original code.
When I looked into the Lightbox 2 plugin of Ruppert Morris I saw that he had extensively changed the original Lightbox 2 code. So I tried the second Lightbox 2 plugin.
This is the Lightbox 2 Plugin, Version 2.0.2 provided by Giuseppe Argento. It is built on the original Lightbox 2.0.4 with just some minimal changes. I did a three way comparison of this plugin, the original Lightbox 2 code and the code with the auto-resize functionality from Fabian Lange. So I could integrate the auto resizing functionality in the wordpress plugin.
I integrated the following features added by Fabian Lange (see Blog):
- Auto-Resize
- Opera 9 Bugfix
- Bugfix: If the next image has no caption/description.
Further more I added these features:
- The Lightbox 2 script uses a fixed top margin. I’m now calculating the top margin such that it should be vertically centered. The size of the bottom border with the image description is included in the picture height (fixed value changeable in the head of the script) .
- As I had problems with the dark transparent background I changed it to “position:fixed;”. One problem exists: When the window size is increased the dark background only appears with some delay.
- In the resize code an event handler tracks the resize of the browser window. I had the problem that this handler was not removed when the lightbox was closed. So the image appeared again when the browser window has been resized. I changed the code that the event handler is removed when the lightbox is closed.
One minor cosmetic problem still exists: As the images are also adjusted vertically they do not move to their top position slowly animated but jerky.
Installation of Lightbox 2 with Auto-Resizing in Wordpress
- Download and install the Wordpress plugin written by Giuseppe Argento: Lightbox 2 v2.0.2.
- Download lightbox.css. Copy to (replace file) wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\css\ .
- Download lightbox.js. Copy to (replace file) wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\js\.
Credits
- Lokesh Dhakar for Lightbox 2.
- Giuseppe Argento for the Wordpress-Plugin.
- Fabian Lange for the auto-resizing functionality.
Some more Tips
- Enable “Auto-Lightbox” in the settings of the Lightbox 2 Plugin.
- When adding a new image to a post the field “Link URL” must be filled with the URL to the image. If this is not filled, use the buttons “File URL” (when adding a new image) or “Link to Image” (when editing) to add the URL.
- Vince has posted on the German version of this post that the Lightbox 2 plugin does not automatically work with old posts. You can find a fix here: http://wordpress.org/support/topic/227077
- The auto resizing Lightbox worked for me in the following Wordpress versions: 2.7.x, 2.8, 2.8.1.
July 12, 2009 um 4:03 pm
[...] [English version available: Lightbox 2 with Auto-Resize in Wordpress] [...]
July 12, 2009 um 3:44 am
[...] to display the full picture. After searching the “interwebs” I found a post over at nooxnet.com describing how to change the .js and .css files for Giuseppe Argento’s version of LightBox. [...]
July 12, 2009 um 1:52 am
Thanks for this! I’ve been looking for a replacement for Flexible Upload and this works perfectly. I now have a great way to post pictures easily without having to edit them before uploading to WP and it works with 2.8.x!
I did have to run a sql script to remove the hundreds of rel=”lightbox[pics-xxxx}” that flexible upload added to the posts.
July 12, 2009 um 1:17 pm
[...] 2 with Auto-Resize in WordPress I finally found a solution to my WordPress woes with large images and my attempts to use Lightbox 2 by Lokesh Dhakar. Many [...]
July 12, 2009 um 2:16 pm
Thanks for this post, it really helped me!
May I ask you how to place the thumbnail (only one) above “My title”? I’ve done it but it links to the first image in another window instead of opening the Box. And do you know how to make lightbox autostart?
Again thanks a lot!!!
July 12, 2009 um 2:31 pm
What do you mean with “My title”? If it schould be in the header of the blog I would just install the regular lightbox additionally. The one modified by Fabian Lange: http://blog.hma-info.de/2008/04/09/latest-lightbox-v2-with-automatic-resizing/
But if it should be per article I do not even know how to put a thumbnail above the title.
I assume autostart would need some extra programming. You could try to find a forum where somebody could help you.
July 12, 2009 um 8:00 pm
Thanks a lot for this script! I have one question though. I’d previously had the Ruppert Morris version installed and really liked the ability to have the theme background black for the lightbox pop-up. I may poke around and see if I can change it a bit myself, but thought I’d ask to see if you’ve got a way to change that.
Thanks again.
July 12, 2009 um 8:35 pm
You mean there should not be a transaparency? You should be able to adjust this in the admin area of wordpress under Settins -> Lightbox -> Overlay opacity.
July 12, 2009 um 1:52 pm
Sorry my english noox… I want lightbox to auto run the slideshow, without the next and prev buttons, and looped. Do you know how to do this?
By “My title” I meant the name we give to an image, in this case the image that cals the lightbox. I’m not even using the “page/post titles”. Do you know how to have a thumbnail as a button to call the lightbox, instead or in addicton to this “title” that is dispayed?
http://moutinho.freevar.com
Thanks!!
July 12, 2009 um 2:06 pm
If you add an image via the Worpress editor you can define how the image should be inserted into the post (thumbnail or various image sizes). I assume the image sizes can be defined in the Wordpress settings. So this is the default behaviour – like with the images in this post. Or do you mean something else?
Ok, slideshow. I assume a slideshow would mean some extra code. Maybe the NextGen gallery has this – but I don’t know at all. And I think there is no autoresize for the NextGen gallery.
July 12, 2009 um 9:51 am
What code did you change so that Lightbox2 calculates the top margin such that it should be vertically centered? I use Fabian Lange’s modifications outside of Wordpress but want to include your modification. The event handler modification details would also be appreciated. Any luck on the jerky vertical resizing issue?
Thanks,
Matthew
July 12, 2009 um 9:18 am
worked perfectly in 2.9, thanks!
July 12, 2009 um 11:39 am
hi noox,
awesome plugin, exactly what i have spent hours looking for.
i do have a problem though and i’ve been losing hours of time in the last two days. if you look on my main page in the website, http://www.atelierlofi.com/index.html , the plugin works perfectly because the head section of my html page links directly to your libriaries. when i try linking it to my own files hosted on my webspace ( http://www.atelierlofi.com/index2.html ), which are apparently the same, it opens the img links in a new window. any help would be great. alb