Lightbox 2 WordPress Plugin
29 Mar 06WordPress 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
The link of your styles are wrong, don’t edit them.
[...] Le second truc que je voulais mettre c’est ce plugin pour wordpress que je viens d’installer. Il permet de faire un tres bel effet sur l’affichage des photos sur le blog. Pour le tester il suffit de cliquer sur l’image en haut de ce post. … heu et si rien ne se passe pour vous ne pas hesiter à laisser un commentaire. Moi j’ai reussi mes tests sur ie et firefox. [...]
Ravin:
Any thoughts on why I can’t get this to work: http://www.parushni.com/blog/2005/10/14/112929348840251586/
Ravin:
Thanks for getting back to me.
yeah, I know, that’s why I had commented out the part in your .php file that loaded prototype.js, so it wouldn’t be loaded twice… and only the style would load it… but anyway.
But I’ve changed it now to the default style, which has no .js or anything, but now the images will load, but if I’m in Firefox, the little arrow and X graphics dont show up. In IE, the image placeholders show and work as the images should, but in FF 1.5.0.1… nothing… to get out of the screen I have to hit refresh.
Any help is most appreciated.
Ravin:
ah… I understand now… since my blog is not in the base directory… it’s in http://www.parushni.com/blog not, http://www.parushni.com I’m having problems.
I’m not too sure how to fix this since I’m a pretty much new to all this stuff… but I look forward to your new plugin.
Peppe:
Go to general options and check WordPress address and Blog address are http://www.parushni.com/blog
Danny Foo:
Need a lil help wit the plugin. I seem to be having the same problem as ravin but I\’ve checked my options and both URLs are pointing to the correct path.
Solution please?
http://www.dannyfoo.com/blog/2006/04/wedding-website-of-susan-and-jason/
Cheers.
Danny Foo:
Weird. I\’m also unsure why the problem is occuring but changing the path did the job. Thanks.
Now I\’m going to see if I can tweak the caption to be on top.
Cheers.
It seems don’t work properly in my blog. But I don’t know what I’ve done wrong. Is there something wrong with my theme?
If possible continue to write on forum, i open a wordpress plugin category. Sorry for my english ![]()
Bye
To Doggie: you have already prototype.js and scriptaculous.js styles in your code.
I opened the duplicate files to see the code, and they’re absolute the same. Then I reduced the duplicate files, but it also doesn’t work.:(
I update the plugin to version 1.4.
Koka:
ah great now it works! thanks a lot!
uhh, shame above me. i deleted the very important function wp_head from the header.php – although the other plugins still worked, lightbox couldn’t – thank you very much for help, Peppe!
there is a problem i found.
For the same img (or a img link),
this pulgin works perfect on my index page. but when i open into a single entry page, and chick the same img link, yes, the pulgin works, but the loading img would disappear.
want the solution plz..
You have already some js styles. Look your code: prototype.js.php for k2.
i found out, it is the problem that i have another element within the page has the id name “loading” which is the same as the loading img’s id.
Rebecca:
I love this.
I can get most of it to work but the close/next and loading images are not working. Any assistance would be appreciated!
I tested your blog and all works fine, but you have twice prototype.js, scriptaculous.js and lightbox.js in your header!
Les KH:
Installed your lighbox plugin on a WordPress 2.0.1 install, and it mostly works.
The one problem I have is that the overlay doesn’t line up with the image, and thus I can’t see the bottom info or the close button. Is this because the blog stylesheet is interfering with the lightbox one? You can see an example of my problem at http://bitlink.ca/blog/2006/03/13/testing-lightbox/
Can anyone help me solve this?
Hint to others: I found the paths wrong. I had to create the lightbox directory beneath the plugins directory, unpack the archive there, then make an images directory beneath that and move all the gifs there.
Thanks! Les…
Les KH:
Responding to my own post:
I solved the alignment problems by changing the blogs css for img which had 10px margins and padding. And I have Prev and Next buttons, but still no Close button. Permissions and paths all look right. Any thoughts?
Pike:
First: I love the plugin!
The strange thing is though that every time I write something new or edit something else on my weblog, the HTML of the lightbox pictures changes. It totally screwed up. It changes everything around in the HTML like this:
You’ve got any idea what that is?
What changes?
Rusty:
You can see here: Lightbox Test Post that I almost have the lightbox plugin working – everything works fine, except the “close” button does not show up. any idea why?
Ok, i fix your problem, please download the new version and say me if it works fine.
No image in http://www.inkling.nl/images/kat.jpg, i don’t understand, http://www.inkling.nl/?p=49 works.
Pike:
No, its the fact that the HTML-changes and then it doesn’t work. The picture is there now, but when I change something in another posting, then the html-on the posting with the lightbox used changes.
hi peppe,
first, thanks a lot for the plugin!
i had some problems with the lightbox.js because my wordpress installation was in a subdirectory, so the path-vars in line 63 / 64 were not correct and i had to adjust them manually for the images to be loaded. maybe there is a easy possibility to fix this, but i have no clue of js
greetings from vienna!
Rusty:
Thanks for the speedy follow-up, Peppe! The fix did not work for me, but i did get it working. In lines 62 and 63 of lightbox.js I changed the relative links to absolute links to the image files and all works correctly now. FYI: My blog does not sit in my main directory so that is why the fix is needed. I also edited line 13 of lightbox2.php to use the correct path for my installation. This sounds like a similar fix as Janocjapun used above.
Like everybody else says, thanks a million for the great plugin!
Thank for the plugin !! It works great after changing the path in lighbox2.php
Adam:
The plugin doen’t seem to be working on any of the sites I’m finding it used on, including this page. I’ve checked in IE, FireFox and Opera. On all three the browser goes to the image itself on the server. JavaScript is enabled on all three of my browsers.
darren:
beautifully done… thank you for your work.
PAX:
nice work. but it does not work in wordpress with a wysiwyg editor on. the rel=”lightbox” gets deleted with a wysiwyg editor which makes it a bit unhandy.
First of all: thanks a lot for this nice work!
I modified the lightbox2.php a little bit. Now you don’t have to enter the rel=”lightbox[roadtrip]” by your own, instead the plugin adds this tag:
function lightbox_create($content){
global $post;
$pictureset = $post->ID;
return preg_replace(‘//i’, ‘‘, $content);
}
add_filter(‘the_content’, ‘lightbox_create’, 2);
Have fun and stay well
Oops, the code in the preg_replace() function messed up a little bit! Here is just the piece of code you have to change in there:
Instead of rel=”lightbox[roadtrip]” type rel=”lightbox['.$pictureset.']“
Great work, but the css file couldnt pass the W3C CSS Validation.
Jan:
Hi,
This plugin looks amazing when workng, however I am having the same problem that Christian h ad. I’ve installed the plugin and activated it and when I added the ref=”lightbox” attribute, then it doesn’t work. What happens is it just opens a new page with my image in it. Any suggestions. http://www.rat-tail.com
Yes,
file not found on your server, check where you put the files!
See your view-source and test the links
http://www.rat-tail.com/wp-content/plugins/lightbox/lightbox.js
Jan, i found your problem, you have created a folder lightox and another folder lightbox inside.
In fact the link http://www.rat-tail.com/wp-content/plugins/lightbox/lightbox/lightbox.css
works. Move the files up.
i’m not sure how to create an ‘image set’, do i just put a reference to a folder in the rel=”lightbox[foldername]” ?
eduo:
rat-tail: it’s REL, not REF:
rel=”lightbox”
Duncan: rel=”lightbox[setName]” for each photo. All the links with the same setName will be shown as a set.
eduo:
how exactly do I give links a “setName?”
1 2 3 4 5 6 7 8 9 10 11 … 33 » Mostra tutto









Niklas:
Works brilliantly on my WP 2.0.2-installation. Thanks a lot!