Lightbox 2 WordPress Plugin

29 Mar 06

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 title attribute 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

Scritto da Peppe

2 Jun 06 , 8:59 am

eduo:

Rusty: You just assign a name. The instructions are there in the original lightbox page, in this page and coupled with my comment should be enough. All photos with setname “eduo” will be grouped as a set. All photos with setname “rusty” will be grouped in the same set. Here is an example:
http://www.eduo.info/2006/05/29/de-gps-por-la-peninsula/
If you click on the “Madrid, Toledo or Avila” links you’ll see the three are part of a set called ‘tere’. I made up the set name. You can see it viewing by source and searching for “toledo”. That is one set.You use whatever name you want and all the photos in the same set (with the same set name) will be grouped with next and prev buttons.
In the same page there are other links to lightbox’d images that are not part of the set. For example the links called “utilizar” and “capturar”.

2 Jun 06 , 9:05 am

Junwei:

I\’ve changed the relative image links in the lightbox.js to absolute links (http://quake9.com/images/loading.gif) and also for the closelabel.gif but they still jsut won\’t show up!

The blog installation resides at http://quake9.com/gryffik/online/

the lightbox.js resides at http://quake9.com/gryffik/online/wp%2Dcontent/plugins/lightbox/lightbox.js

Please help me!

2 Jun 06 , 9:14 am

Peppe:

Plz put a test image on your site.

2 Jun 06 , 9:34 am

Junwei:

There is one at this post

2 Jun 06 , 10:26 am

Peppe:

I test the link, it works fine!

2 Jun 06 , 1:50 pm

Rusty:

Doh – how dumb am I. That makes perfect sense! I did not put two and two together to figure out that “roadtrip” was a set name!

Thanks, eduo. An unrelated question re: your site: why do you append “html” to the end of your images (like this: ../gallery/i/MyLife/Misc-200605/DSCF0765.JPG.html)? What does the “html” do?

2 Jun 06 , 3:42 pm

eduo:

Rusty:

I use a gallery software for which I made a hack. The hack needs to call the gallery page where the image is to be able to find the image. If you replace /i/ in the URL with /v/ you can see how the page would normally look. (‘i’ for ‘image’, ‘v’ for ‘view page’)

2 Jun 06 , 6:40 pm

Rusty:

Ahh, gotcha, eduo – that makes sense. Thanks again for the help.

4 Jun 06 , 11:09 am

Milan'che:

After install the lightbox worked, only I didn’t see Close button.

Fixed that with fixing paths in lightbox.js line 62 and 63 for:
var FileLoadingimage
var FileBottomNavCloseImage

Kind regards,
Milan’che

7 Jun 06 , 6:00 pm It’s legal in New Jersey » Blog Archive » Testing Lightbox JS 2.0

[...] I am testing lightbox JS 2.0 and I just got it working. Lightbox is awesome and looks oh so pretty! Also, thanks to Peppe for the easy WordPress integration, the plugin is here. The CSS and JS code insertion is just automated and everything is condensed into one package, which is very convienent. [...]

9 Jun 06 , 1:39 am

Shadal:

I’ve installed v1.4 and it works great but no close bar at the bottom of the image.
Can’t find a download for v1.5

10 Jun 06 , 5:57 pm

Georg:

hi! just installed the plugin – works aswesome but with one problem –
in IE on Windows XP the image is not shown. the lightbox appears and all but NO image at all. also the title and the control buttons appear. interesting, what?

on Firefox, Safari and also IE on Mac it works fine.
but just not on IE.

Does anyone have got a hint for me?
thanks in advance,

you may take a look at my site (there are the lightboxes used) http://www.georghanisch.at

thanks, guys!

Georg

26 Jun 06 , 11:03 am weboholic » Blog Archive » wp_build();

[...] DLAA Lighbox 2, read usage instruction and enjoy!, [...]

1 Jul 06 , 11:13 pm

Alvin:

Hi,

First, thankx for the plugin. I am trying to get a border around the images that I am posting and I notice that in this example, you managed to get the borders for your images.

I have edited my style.css to include the borders but my images do not seem to have it when there is a link on that image. See http://alvinfoo.blogdns.org/?m=20060602.

I would like to know how you did your.

cheers
Alvin

4 Jul 06 , 4:44 pm Connected Minds » Blog Archive » Exibindo imagens com estilo… WP-Lightbox2

[...] Um dos achados interessantes foi o plugin chamado “Lightbox2” que permite a ampliação de imagens com um efeito legal. Confiram na imagem abaixo: [...]

13 Jul 06 , 11:46 am

Oo Bubu:

Hi There,

First of all, thank you for your plugin ! It seems very good !

Whenever, I have a problem with the effect ! It was working perfectly but now if all over ! In fact, the close X is not appearing !

I have downloaded the lastest version and also include the correct code

13 Jul 06 , 1:47 pm

Milan'che:

@Oo Bubu
I believe that is a problem with GIF type. I faced the same problem when I redesigned closelabel.gif in Adobe Photoshop. It didn’t show up. But when I later redesigned it again in Corel Photo-paint, it worked.

Kind regards,
Milan’che

13 Jul 06 , 3:35 pm

Oo Bubu:

Hi Milan’che,

It seems that even with the given gif in the package, it is not working !

I really do not know what to do !

I have uninstall all th plugin and directories and reinstall ! Nothing happens !

Please advice

Best regards

Oo Bubu

13 Jul 06 , 4:07 pm

Milan\'che:

Ok, I checked your blog theme and it seems to me that your lihtbox is working.. I can see the close button!?!

13 Jul 06 , 4:09 pm

Milan'che:

Checked the site with Firefox and IE and both working. Could it be browser cache problem? Try cleaning up your browser cache files.

13 Jul 06 , 4:13 pm

Oo Bubu:

Hi Milan’che,

Since you have visited the link, it is working !

I do not think that was a cahce problem because I have clean it several times ! I had also checked with IE, FFox and Opera !

Very strange ! But it is now working !

Thanks for your help

23 Jul 06 , 5:06 pm TecnoBlog » Plugin - Zap_ImgPop

[...] Outros plugins possuem recurso semelhante, por

27 Jul 06 , 2:40 pm

Stefano:

Ciao Peppe, complimenti per il plugin, vorrei utilizzarlo per la galleria del mio sito, solo che ho un problema.
L’header

27 Jul 06 , 3:19 pm

Peppe:

Ciao, complimenti per il sito, ho visto che ti sei ispirato al mio menu (global-nav).
Mi manderesti una pagina dove fare dei test.

27 Jul 06 , 3:59 pm

Stefano:

Si, mi

5 Aug 06 , 5:43 pm

Nightfalcon:

Hi Milan’che, since i’ve updated WordPress from 2.0.3 to 2.0.4, your plugin doesn’t work any longer.

Will there be a fix/update to work with 2.0.4?
Would be great, as i like your plugin a lot!

Greetings from Germany,
Nightfalcon

5 Aug 06 , 5:46 pm

Nightfalcon:

Sorry, i meant Peppe, was confused because Milan’che answered on some questions here!

7 Aug 06 , 8:30 am

Mike:

I use:

- 1.5 Version of your Lightbox-Plug In
- ImageMaster (places the rel=”lightbox” statement for sure)
- WP 2.0.4

but Lightbox came up with his nice effect !-((

7 Aug 06 , 8:32 am

Mike:

i doesn’t work !

7 Aug 06 , 12:48 pm

Peppe:

Why are your js in media/js/?
I think ImageMaster go in conflict with my plugin. Try to deactivate it.

7 Aug 06 , 4:13 pm

Nightfalcon:

Hi Peppe, i found out, that i deleted in header.php of my theme, which caused the non-working of your and one other plugin.
It was unneccessary in my eyes, because i use a personalheader.

Now i found a page where it says, the line is neccessary to make the ohter plugin work, which was in effect that your plugin works fine again!

9 Aug 06 , 12:21 pm

Tobi:

Hi Peppe,
im using a modified version of the blix-theme. if i try to include the plugin in wordpress the close-picture and all the other pictures are not shown. what can i do to correct this mistake.

9 Aug 06 , 2:01 pm

Peppe:

Hi, tobi, see in my forum for your problem.

14 Aug 06 , 9:08 am Revival » Blog Archive » Picture and Plugin Test

[...] Sun Young and Kyoung Tae met with Yong Eun, Sang Mi and Mi Young at sillim on 5th of August. We had a pastime long after we’ve seen, specially Mi Young and the others met at a chance. If you click this photo, you can see the process which lightbox js 2.0 works. [...]

20 Aug 06 , 11:54 pm

Bernard:

Does it also work with PDF files?

23 Aug 06 , 4:23 pm tuner.dk » A’ roder lidt med æ rytmeboks…

[...] Ja, eftersom at er helt ny med WordPress så skal der leges og prøves forskellige ting af. Jeg har lige lagt en plugin ind. LightBox 2 er navnet og den håndterer visning af billeder på en supersmart måde. Istedet for de gammeldags popup vinduer så viser LightBox 2 billeder i en layover, som ligger sig henover siden. Det ser cool ud, og fungerer nemt og hurtigt. [...]

31 Aug 06 , 3:57 am

Ken:

nice plugin,voted.and thank you!
&楼上的 image browser生成的代码和lightbox有点不兼容呢哈哈
a little conflict between image browser and lightbox:tag “title”

5 Sep 06 , 8:54 am Revival - » Picture and Plugin Test

8 Sep 06 , 4:16 pm

Gacchan:

Ciao Peppe!
Grazie per il bel plugin!!!
Purtroppo per somma ignoranza non riesco a farlo funzionare ;__;
Lo uppo, lo attivo…ma niente!!!
Le immagini non vanno sob
Mi daresti un aiuto?! tnx

8 Sep 06 , 6:00 pm

Peppe:

Ciao,
ho visto il codice della tua pagina, i link sono sbagliati
http://www.majeutica.it/index.php/wp-content/plugins/lightbox/prototype.js
C’

9 Sep 06 , 1:09 am

Gacchan:

Grazie delle info Peppe!
Ho modificato il rigo del plug per farlo andare a posto ed ora il codice sia ok ma continua a non fungere O__O
MA devo fare qualcosa di particolare per attivare il plug sulle immagini?!

PS: a cosa pensi sia dovuta la lentezza? io non ci capisco molto ;__;

9 Sep 06 , 6:38 am

william:

Hi peppe,

i have unpack eveyrthing into my wp’s plugins folder. Do i have to do anything after that? By the way, my blog is http://www.caiweilian.name, u can go under the link Images to have a look and see if i done it correctly.

9 Sep 06 , 7:31 pm

Peppe:

Gac devi aggiungere rel=”lightbox[roadtrip]” ai link delle immagini.

10 Sep 06 , 1:15 pm

Gacchan:

Peppe inserendo un codice come segue non mi apre la finestra del plug ma uns aseconda finestra normale.Dove sbaglio?

———————————-
Aggiornata la Gallery.
Ora in archivio le foto della festa di Capodanno.

————————

10 Sep 06 , 1:16 pm

Gacchan:

ops qu

10 Sep 06 , 11:59 pm

Olaf:

I realy like this way to present photos. The plugin works well and was easy to install, but there was one Problem. Clicking on a thumbnail on the startpage – there was a close button, however there was no close button when clicking on the title of the entry and start the image show on the following following page. Changing the relative path in the lightbox.js in an absolute one, as above-mentioned, sloved this problem. Maybe there is a problem with the rules for the permalink structure (Just an idea).
Just want to give this hint and say thanx for your plugin.

11 Sep 06 , 11:50 am

Peppe:

It works fine on your page.

17 Sep 06 , 7:38 pm Lightbox op Yakusoku

[...] Uiteindelijk heb ik het toch voor elkaar gekregen om de “Lightbox 2 WordPress Plugin” op Yakusoku te draaien — dat zou vrij eenvoudig moeten zijn, maar om onbekende redenen wilde mijn blog in eerste instantie niet met de plugin samenwerken. Nu alles toch draait, moet het uiteraard getest worden; daarom vind je onderaan dit bericht verschillende oogstrelende afbeeldingen uit de trailer van Shinkai Makoto’s nieuwe animatiefilm, een aantal schermafbeeldingen van de PV van het nummer “taiyou no uta”, en enkele plaatjes uit verschillende doramaseries. [...]

4 Oct 06 , 6:20 am