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!

test1Roma 2

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…
caffe

If you appreciate this plugin or my support, please donate to me so I can but a cup of coffee. Thank you!
caffe
Thanks to the donors:

  • Per T Sovik
  • Hoa Hua
  • Spencer Harris
  • Jan Herrmann
  • Niels Emmer
  • Sahar Alarayedh
  • Upnews
  • Digg
  • del.icio.us
  • Google Bookmarks
  • PDF
Scritto da Peppe
30 Mar 06 , 3:15 pm

Niklas:

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

30 Mar 06 , 4:18 pm

Koka:

hey
i have some trouble with it:
it did some changes (deleted a few slahes), now the overlay image and the real image appears, but as you can see, there’s no clase image… and my blog stylesheet doesnet work anymore oO
have you got an idea?
servus
koka

30 Mar 06 , 5:50 pm

Peppe:

The link of your styles are wrong, don’t edit them.

30 Mar 06 , 8:16 pm

Koka:

hm, now i let everything original but now theres nothing :(

[...] 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. [...]

31 Mar 06 , 12:35 am

Ravin:

Any thoughts on why I can’t get this to work: http://www.parushni.com/blog/2005/10/14/112929348840251586/

31 Mar 06 , 4:13 am

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.

31 Mar 06 , 2:43 pm

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.

31 Mar 06 , 2:51 pm

Peppe:

Go to general options and check WordPress address and Blog address are http://www.parushni.com/blog

1 Apr 06 , 10:02 am

Mario:

Hi Peppe,

thank you, sounds great for me!

mario

3 Apr 06 , 5:29 am

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.

3 Apr 06 , 7:07 am

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.

3 Apr 06 , 2:12 pm

Doggie:

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?

http://doggie.madpage.com/WP/2006_04_03_55.html

3 Apr 06 , 7:26 pm

Peppe:

If possible continue to write on forum, i open a wordpress plugin category. Sorry for my english :)
Bye

4 Apr 06 , 2:45 am

Doggie:

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.:(

4 Apr 06 , 6:31 pm

Peppe:

I update the plugin to version 1.4.

6 Apr 06 , 7:13 am

RixR:

Hi, can you please give me a hint how to define a folder for this image set thing?
On my side i would like either have a folder or have the (roadtrip) feature show all pics tagged with saaya . Is that possible?

6 Apr 06 , 3:28 pm

Koka:

Hm, atm i‘ve put the files into the blog directory, it works, but it’s not very elegant, so – what’s new in v1.4?

6 Apr 06 , 4:08 pm

Koka:

ah great now it works! thanks a lot!

8 Apr 06 , 2:00 pm

Steffino:

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!

16 Apr 06 , 5:54 am

Xings:

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..

17 Apr 06 , 12:21 am

Peppe:

You have already some js styles. Look your code: prototype.js.php for k2.

17 Apr 06 , 12:54 am

Xings:

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.

30 Apr 06 , 8:20 pm

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!

Blog is http://www.paintingmycanvas.com/blog

30 Apr 06 , 8:37 pm

Peppe:

I tested your blog and all works fine, but you have twice prototype.js, scriptaculous.js and lightbox.js in your header!

2 May 06 , 6:11 pm

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…

2 May 06 , 6:27 pm

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?

5 May 06 , 4:56 pm

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?

6 May 06 , 3:42 am

Peppe:

What changes?

6 May 06 , 4:36 am

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?

6 May 06 , 5:19 am

Peppe:

Ok, i fix your problem, please download the new version and say me if it works fine.

6 May 06 , 7:54 am

Pike:

The code didn’t work. Next try:

Only minus the _ everywhere

6 May 06 , 7:56 am

Pike:

rel=”lightbox” title=”This is image caption” href=”/images/kat.jpg”
img width=”80″ height=”80″ alt=”This is image title” / href=”/images/kat.jpg”

Just think the and in there

6 May 06 , 8:53 am

Peppe:

No image in http://www.inkling.nl/images/kat.jpg, i don’t understand, http://www.inkling.nl/?p=49 works.

6 May 06 , 10:10 am

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.

6 May 06 , 1:21 pm

janocjapun:

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!

6 May 06 , 2:07 pm

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!

10 May 06 , 6:30 pm

stefhan:

Thank for the plugin !! It works great after changing the path in lighbox2.php :)

19 May 06 , 4:46 am

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.

19 May 06 , 5:12 am

darren:

beautifully done… thank you for your work.

20 May 06 , 10:01 pm

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.

24 May 06 , 12:25 am

norbert:

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

24 May 06 , 12:31 am

norbert:

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.']“

30 May 06 , 10:29 pm

LEMONed:

Great work, but the css file couldnt pass the W3C CSS Validation.

31 May 06 , 11:16 pm

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

1 Jun 06 , 12:53 am

Peppe:

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

1 Jun 06 , 12:57 am

Peppe:

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.

1 Jun 06 , 2:59 pm

duncan:

i’m not sure how to create an ‘image set’, do i just put a reference to a folder in the rel=”lightbox[foldername]” ?

1 Jun 06 , 6:29 pm

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.

1 Jun 06 , 11:34 pm

Rusty:

eduo:
how exactly do I give links a “setName?”

1 2 3 4 5 6 7 8 9 10 1133 » Mostra tutto

1,612 commentiLascia un commento

Articoli Correlati
4MJ – Internet News © 2002 - 2010 è basato su piattaforma WordPress
Progetto e Design sono esclusiva proprietà di Giuseppe Argento.
Mappa Sito, Articoli (RSS) e Commenti (RSS) | Contatti