Lightbox 2 WordPress Plugin
WordPress plugin used to overlay images on the current page into neat Javascript-powered overlay popups.
16-12-2008 – Version 2 is out! Now from settings you can choose background-color, overlay opacity, resize speed and automatically add the lightbox effect to your post’s images.
This plugin includes the new Lightbox JS v2.0.4 javascript written by Lokesh Dhakar and and was then transformed into a WordPress Plugin by me. Use a title attribute if you want to show a caption. Click on the images below for an example.
- 29-07-2007 – See also the new Slimbox WordPress Plugin, a 7kb clone of the popular Lightbox JS
- I added the digg it button, please DIGG ME!
Upgrade
- De-activate the plugin.
- Delete the old version `lightbox-2-wordpress-plugin` directory.
Installation
- Unzip the `lightbox-2-wordpress-plugin.zip` file.
- Upload lightbox-2-wordpress-plugin folder to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress, go to Setting->Lightbox.
- Add a rel=”lightbox” attribute to any link tag to activate the lightbox, or rel=”lightbox[roadtrip]“ for an image set.
- Optional: Use a
titleattribute if you want to show a caption.
Single example:
<a href=”img1.jpg” rel=”lightbox” title=”my caption”>thumbnail1</a>
Image set example:
<a href=”img1.jpg” rel=”lightbox[roadtrip]“>thumbnail1</a>
<a href=”img2.jpg” rel=”lightbox[roadtrip]“>thumbnail2</a>
<a href=”img3.jpg” rel=”lightbox[roadtrip]“>thumbnail3</a>
Tnx to my sister for the photos! Link me in your site!
Changelog
Version 2.0.2 (19-12-2008)
Some fixes
Version 2.0 (16-12-2008)
Background-color, overlay opacity, resize speed, auto-lightbox from settings.
Version 1.8.2 (09-06-2008)
Some fixes
Version 1.8 (14-03-2008)
Update Lightbox Js to version 2.04
- v2.04 – 03/09/08
- NEW – Upgraded Prototype from v1.4 to v1.6.0.2
- NEW – Moved label text into configuration for easier localization
- UPDATED – Code cleaned up. Respect for the global namespace and native javascript objects.
- FIXED – Caption displays as “null” when viewing an uncaptioned image after viewing a captioned image.
- FIXED – Clicking ‘close’ button shifts layout as link focus’ dotted line appears.
Version 1.7 (12-06-2007)
Update Lightbox Js to version 2.03.3
- v2.03.3 – 5/21/07 – Support for horizontally scrolling pages. Added updateImageList method for ajax’y pages.
Fixed xhtml validation
Version 1.6 (05-05-2007)
Update Lightbox Js to version 2.03.2
- v2.03.2 – 4/30/07 – Fixed animated gif support in IE/Opera.
- v2.03.1 – 4/18/07 – Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.
- v2.03 – 4/10/07 – Improved keyboard navigation. Animation off toggle. HidesFlash movies under overlay. Imagemap support. Valid CSS.
Fixed close and loading vars (Tnx to Anton Zhuchkov)
Changed “get_settings(‘home’)” in “get_option(‘siteurl’)”
(Tnx to Luca Dentella)
Version 1.5 (06-05-2006)
Fixed close and loading vars.(see here if u have problem with close button)
Version 1.4
Fixed path’s problem
Update Lightbox Js to version 2.0.2
Centering in IE6 (any DOCTYPE) fixed.
Smoothed out resize transition.
Fixed layout issues caused by multiline captions.
Added keyboard navigation: N for next, P for previous and X for close.
Version 0.3
Single Images and Image Set
My plugin on wordpress page suddenly stopped working. I wrote several email to them but nothing…
If you appreciate this plugin or my support, please donate to me so I can but a cup of coffee. Thank you!
Thanks to the donors:
- Per T Sovik
- Hoa Hua
- Spencer Harris
- Jan Herrmann
- Niels Emmer
- Sahar Alarayedh
Where you put the files?
The requested URL /wordpress/wp-content/plugins/lightbox/prototype.js was not found on this server.
Wow, that’s fast!
I’ve checked, they are in wordpress/wp-content/plugins/lightbox2/lightbox
I noticed an incorrect script-reference (wrong paths), how do I correct this? (I suppose those were left behind by a previous Lightbox install which I removed)
Thanks again!
Yours files are are here:
http://www.radiokazoo.net/wordpress/wp-content/plugins/lightbox2/lightbox/prototype.js
I understand your problem, please re-download the plugin, i changed the tree.
Unzip in the plugin folder only lightbox2.php and the folder lightbox, not the folder lightbox2.
I’m sorry, but it still does not work. I removed the previous 2.2 install, uploaded it again according your instructions (php in the root of /plugins + the rest in /plugins/lightbox), removed the WYSIWYG editor, made sure the rel=”lightbox” tag is present in the image link, but alas…
If you still have a clue, please… *sigh*
Just to make sure I did it right, here’s the code for the test-image I just posted:
But I’m probably just overlooking something stupid.
I’m sorry to bother you… scuzi… 
Yes lol,
add the rel=”lightbox” to the a href, not to the img src.
Bye
*gasp* It.. it WORKS! I’m stunned!
Thanks for your time, I’d gladly return the favor, this is great…
Good luck!
KazOo (Netherlands)
You welcome,
look the forum for the problem with your close button.
Bye
Ciao Peppe,
For me personally, inserting the rel=”lightbox” tag everytime is a minor hassle. But I now want to make a photo-weblog for my daughter (who is a beginning but very talentful photographer). Although your plugin would be excellent for presenting her work, I don’t think I can ever talk her into html-coding her wordpress-posts.
So, is there a way to automate this? I know of other Lightbox-plugins that insert a button on the editor, but those operate nowhere near as slick as your 2.2…
Thanks in advance for your reply…!
There is a way to auto insert the rel… to any image
Open the lightbox2.php and de-comment function lightbox_create and add_filter (remove /* and */ and // before add_filter…)
still doesn’t work on my site….In ff I get:
Errore: Il foglio di stile http://carpibec.it/blog/wp-content/plugins/lightbox2/lightbox.css non
Se non l\’avevi capito sono italiano, lol!
comunque hai sbagliato l\’albero delle cartelle, devi uplodare in plugin il file lightbox.php e la cartella lightbox, non tutto lightbox2, infatti i tuoi file adesso stanno in http://carpibec.it/blog/wp-content/plugins/lightbox2/lightbox/lightbox.css
Ciao Peppe, `e encora me… – soffro!
I’m puzzled, maybe you (or someone) can help me:
Why is it that when you click on a linked image the *first* time the browser shows you a new page with the original image on it, and only the *second* time you click the thumbnail Lightbox starts working??
Molto grazie per rispondere!
(I’m picking up quite some Italian here..
http://www.it85.nl/wp (the photoblog I’m making for my daughter)
Hi kazzo, it is normal, the plugin works when the page has been loaded completely.
I have a specific theme i would like to use this with, but for some reason, the theme is inhibiting me from doing so. Do you think you could please take a look at the theme and see what can be fixed? Thanks a bunch!
theme name: Sybmim 1.0.9
Hi Riley, plz send me a link-test.
[...] There’s also a WordPress plugin for it right here. Open Social Bookmarks Bookmark to: Site Search Tags: Uncategorized Technorati Tags: Uncategorized [...]
[...] We’ve already downloaded the lightbox WordPress plugin, unzipped it and moved the contents to the Plugin folder on our wordpress install http://www.domain.tld/wp-content/plugins/. We then activated the plugin from the Plugin page in the admin panel. We also added the following lines of code to the theme header.php file. before the < / head > tag. [...]
Hello guys,
The plugin is good,Lightbox works, but i cannot see the
open/close/next/prev images.
Have to change the images path in lightbox.js ?
Anyone experienced the same problem?
Ps. my blog strucure is like http://www.myblog/blog
Hello again Guys,
I resolved, I just corrected the path in lightbox.js, and put an absolute one. It’ works fine now.
I also removed in lightbox2.php the 2 lines for scriptacolous an prototype loading, because they already run for other plugins (like ajax_comments and ajax
_shoutbox)
Thanks.
[...] Neu dazugekommen ist das Lightbox-Plugin, eine nette und vor allem nützliche JavaScript-Spielerei zum anzeigen von Bildern. Da ich ja eher sporadisch mit Bildern hier im Blog hantiere, wird es nicht so oft zum Einsatz kommen, aber wenn, wie zb hier, dann macht es Spaß. Und sieht fein aus. [...]
Hi I just installed the latest version of the plugin in my site, but when you click to open an image, the “closeimage.gif” does not show up.
The reason is because my blog it not in the site root. Your plugin is looking for its images here:
http://www.stepbystepblog.com/wp-content/plugins/lightbox/images/
but on my site, which is in a folder called “howto” the images are located here:
http://www.stepbystepblog.com/howto/wp-content/plugins/lightbox/images/
I think you may be using the wrong variable from WordPress for the path.
Thanks.
Ryan:
Jon,
Thanks to your guidance I managed to track down this problem. Near the top of the lightbox.js file look for the image paths loading.gif and closelabel.gif and fix them. That takes care of the problem right away.
Thanks for the great plugin.
Ryan
[...] Ok, i found an easier to install version here: Lightbox 2 WordPress Plugin
Hi. I must thank you for devising such a wonderful plugin. It surely has taken the load off editing the files and stuff. I am facing an issue and thought I might ask the creator to pull me out of it
The URL in question is here – http://www.bhooshan.com/2006/12/24/down-memory-lane/
I have installed your plugin in the directory wp-content/plugin/lightbox. I have editied portions of the lightbox.css and lightbox.js to refelct the absolute path to the directory. However, my plugin doesn’t seem to work at all. I looked high and low for the answers and yet I have ended up completely perplexed. Since the page is on the LIVE website and I also need to share it with the other developers for possible answers, I need some answers rather quickly. Can you please help me out with this?
Clue: I have installed MINT webstats application which uses JS. I have a gut feeling that it is conflicting with Lightbox.
Issue is Resolved. Thanks once again, for making this wonderful plugin
[...] I’ve been burning midnight oil just to upload these pictures using Lightbox2 WordPress Plugin. It has been an agonizing period for a wordpress newbie like me to setup the plugins to work. Along the way, I realized the importance of conveying your message clearly. I’ll write more about it later. Now, I just want to sit back and appreciating my first photos in lightbox. [...]
[...] 1º Fazer o download do plugin aqui. [...]
The plugin worked well to display a screenshot. I had to alter lightbox.js because my WP directory is one step below the domain.
Right now I can’t use the plugin, however, because it was causing my left sidebar to disappear. It looks like it’s happening after the page load. Any ideas?
Mario:
For easier access I’d like to get the close button nav from buttom to the top of the displayed image. Is this possible and how?
Thx for answers!
Sailesh:
Where on your page is the link to the 15. download??
elena:
The pluging doesn’t work.
I have no clue on the reason why.
It is a simple link from a thumbnail to a news window with the large img.
Plz link me your page.
dorus:
Hi,
Love your plugin! It looks great and works very smooth!
I am trying to get it to work at same time as the vPIP plugin found here: http://utilities.cinegage.com/videos-playing-in-place/ .
But when I turn on the vPIP plugin the lightbox plugin stops working. Is there a way around this problem? Maybe a line I can write in a post to disable a certain plugin?
Thanx and keep up the good work!
dorus
chancho:
bellisimo, gracias hermano!!
Hei! I like the plugin but it doesn`t work with the new wp 2.1. Du you have time and can you make en update?
Thank`s a lot!
Markus
ozzy:
Ciao Peppe, complimenti per il plugin. Ho provato a installarlo sul mio blog, funziona solo che mi va in conflitto col men
mmm, non so come funziona il tuo menu, sinceramente ti posso consigliare di mettere un menu in css.
To markus: i updated wp to 2.1 and the plugin works fine!
Yes, now i´t works. I think, it was es problem with the ImageManger and not with your Plugin. Sorry! Markus
A revisit to the closelabel.gif issue… when on the main page of the blog, the close image appears. When on the permalinked page (in this case http://www.pgholyfield.com/maah/archives/59 ), the close image does not appear… when looking at the properties of the broken image, the image url has an additional level added to the name (the maah folder is repeated). Has this been seen before?
http://www.pgholyfield.com/maah/maah/wp-content/plugins/lightbox/images/closelabel.gif
Hey Peppe, tried the instructions in your forum, changed the code in the lightbox.js file to:
var fileLoadingImage = “/maah/wp-content/plugins/lightbox/images/loading.gif”;
var fileBottomNavCloseImage = “/maah/wp-content/plugins/lightbox/images/closelabel.gif”;
…maah being the directory for WP…
again, the close image shows up fine when opening an image from the main blog page. But from an internal post page the close image has an incorrect path.
Example of main page (where image appears correctly): http://pgholyfield.com/maah
Example of internal page (where image does not appear)
hi holy, i can see the close image also here, delete your cache http://www.pgholyfield.com/maah/archives/59
Yep, that did it. Thanks!
I’ve found a lil “bug” (well actually it’s not a real bug, more a problem, when you don’t have the same “WordPress Adress” and “Blog Adress”)
The plugin won’t work, when (as in my case) the blog itself is lotated in subdirectory, but you use rewrite rules, to make it look like the blog was located at the root of the domain.
Basically you use the `get_settings(‘home’);`-action to generate the links for the .js and .css files in the header. But it would be better/nicer to use the `get_settings(‘siteurl’);`-action to avoid that problem.
Just a suggestion 
You might also want to insert that information, on the plugin-page, so users can tweak that for themselves, and you don’t need to release a new version of this fine plugin
Kudos for making this plugin, it really is such a nice addition to prevent the layout of your blog being “broken” (or better uglyfied )
[...] was trying (for weeks now) to use the Lightbox Plugin for WordPress on our Blog, but for some reason it didn’t work at [...]
Hi mitos, no problem with .js and .css path, get_settings(’home’) works fine, the only problem is with closebutton if u use a subdirectory for wp(see the forum).
[...] So as you can see it s really nice! You can find more information about it on the LightBox 2 website, or you can get a WordPress Pluggin here [...]
KazOo:
Ciao Peppe,
You would make me very happy with a little help to get your beautiful plugin running. The thing is: other Lightbox installs work okay (but aren’t nearly as pretty as Lightbox 2.2), but upon activating Lightbox 2.2 (and deactivating others) *nothing* happens. Please, a few simple guidelines would be much appreciated, just tell me what you would do in my case, I’ll try to comprehend… I’ve been up all night and it’s driving me nuts…
http://www.radiokazoo.net
Thanks in advance!