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
Ricevi gli aggiornamenti di 4mj.it via Feed
1,530 commentiLascia un commento
[...] загружать на блог несколько картинок сразу. 74. LightBox 2 – это плагин добавляет эффект затемнения заднего [...]
[...] Author: Giuseppe Argento Website: Lightbox V2 Wordpress Plugin [...]
[...] Lightbox JS Plugin – thường dùng để tạo một popup cho các ảnh trong bài viết giúp ảnh hiển thị chi tiết và rõ hơn. [...]
[...] Lightbox 2 – Generates thumbnails that when clicked load in a lightbox. [...]
[...] Lightbox 2 – za lepši pregled slik [...]
[...] Lightbox JS Plugin – thường dùng để tạo một popup cho các ảnh trong bài viết giúp ảnh hiển thị chi tiết và rõ hơn. [...]
[...] Lightbox JS Plugin – thường dùng để tạo một popup cho các ảnh trong bài viết giúp ảnh hiển thị chi tiết và rõ hơn. [...]
[...] 24 Lightbox2 Sitenizdeki resimlerin Lightbox efekti ile gösterimini sağlar. Link [...]
[...] musste meine Zweite Wahl herhalten und da war ich auch schon etwas skeptisch. Mit Lightbox 2 klappte es aber ebenfalls auf Anhieb und es gab auch keine Limitierung der Anzeigengröße von [...]
[...] Lightbox JS Plugin – thường dùng để tạo một popup cho các ảnh trong bài viết giúp ảnh hiển thị chi tiết và rõ hơn. [...]
Good plugin, thank you.
[...] เำพียงแค่นี้ก็เรียบร้อยแล้วคับ ถ้าจะศึกษาเพิ่มเติม ศึกษาได้ที่นี่ [...]
I still come up with validation errors for my site and I know its because of the lightbox coding that is put into my header code. How can I fix this?
Hi,
I use your lightbox plugin with wordpress version 2.7.1 DE-Edition. Looks great!
But a little hint for you, your download button has a mistake .. you´ve written “downoad” instead of “down>l<oad”
greetings from germany!
Arne
[...] Lightbox JS Plugin- 为当页图片使用全新JS脚本的浏览方式,非常漂亮。 [...]
Thanks for the awesome plugin for WordPress! Just what I was looking for to help my blog mesh with my site.
Hello,
How Can I set the overlay opacity on th Lightbox plugin?
Thanks you.
[...] das Ausgans-Theme ist Grid Focus von Derek Punsalan, unter anderen laufen die Plugins Add Lightbox, Lightbox2 for Wordpress, Vipers Video Quicktags und das automatic Timezone [...]
[...] Lightbox JS v2.04 Plugin 1.8 (Blogdaki resimlerin Lightbox efekti ile gösterilmesini sağlar) [...]
[...] Lightbox 2 – Genera miniaturas que al ser clickeadas muestren la imagen a tamaño real con el conocido efecto del script Lightbox.Multi-Topic Icon – Te permite colocar un icono para cada categoría de tu blog. [...]
[...] de instalarle 2 plugins al blog: Lightbox 2 y The Excerpt Reloaded, el primero para imágenes insertadas y el segundo para el conocido “leer [...]
But how to hide the fullpath to image in statusbar ?
10x
[...] Lightbox 2 2.0.2 图片特效 [...]
thanks for the great plugin!!!
[...] загружать на блог несколько картинок сразу. 74. LightBox 2 – это плагин добавляет эффект затемнения заднего [...]
[...] * Random Redirect – 建立一個隨機文章連結。 * Lightbox JS Plugin – 為當頁圖片使用全新JS程式的瀏覽方式,非常漂亮。 * Homepage Excerpts [...]
[...] загружать на блог несколько картинок сразу. 74. LightBox 2 – это плагин добавляет эффект затемнения заднего [...]
[...] Lightbox JS Plugin – thường dùng để tạo một popup cho các ảnh trong bài viết giúp ảnh hiển thị chi tiết và rõ hơn. [...]
[...] rangetraut und schwupss – alle Probleme die ich vorher hatte waren wie weggeblasen. Das Lightbox-Plugin und die Smilies Themer Toolbar funktionieren einwandfrei und ich habe endlich eine Software, die [...]
[...] Lightbox 2 Wordpress Plugin [...]
[...] 새로 적용한 것중에 하나가 ‘포토갤러리 플러그인’인 ‘LightBox 2 Wordpress Plugin‘ 인데, 이 LightBox 종류의 플러그인의 단점은 불러온 이미지의 태그 [...]
[...] Lightbox 2:灰盒子插件,用幻灯效果显示图片,很酷。 [...]
I’ve been trying to get it to work on this page:
http://www.belinkddesign.com/portfolio/
However, it does not seem to; I even cheated a little and copy/pasted some of your images in and it would not work. Perhaps it is clashing with something else? I cannot say.
There are two problems in the code that renders the header tags. One: if you have automatic Lightbox turned off, the headers aren’t being written. This will fix that issue:
$lightboxoffmeta = get_post_meta($post->ID,’lightboxoff’,true);
$conditionals = get_option(‘lightbox_conditionals’);
if (($conditionals['is_automatic'] == true && $lightboxoffmeta == “false”) || ($conditionals['is_automatic'] == false)) {
echo ‘ lb_path = “‘ . $lightboxpluginpath . ‘lightbox/”; lb_opacity= “‘ . $lightboxlb_opacity . ‘”; lb_resize= “‘ . $lightboxlb_resize . ‘”;’.”\n”;
Second, if WordPress is already loading Prototype, loading your own Prototype will cause problems with the overlay not appearing correctly. I commented out your Prototype loading line and that worked correctly.
I took out the prototype.js calls like you suggested, but I don’t see where to add in these lines of code exactly? (I’m assuming they go in lightbox.php but I’m not 100% sure, based upon your instructions).
I tried enabling automatic Lightbox, but not even that appeared to work, perhaps because I am trying to apply it to a page which does not have blog posts on it.
Yeah, in lightbox.php, around lines 48-52.
I pasted the code in and commented out lines 48-52; now the line
lb_path = “http://www.belinkddesign.com/wp-content/plugins/lightbox-2-wordpress-plugin/lightbox/”; lb_opacity= “0.8″; lb_resize= “7″;
appears above my blog, and it still does not work on http://belinkddesign.com/portfolio
(By the way, thanks for the help – it’s greatly appreciated. I’m definitely no PHP wizard
)
Oops, I was being too loose with my documentation. Sorry about that. Using the original lightbox.php file, find this:
$lightboxoff = false;
$lightboxoffmeta = get_post_meta($post->ID,’lightboxoff’,true);
if ($lightboxoffmeta == “false”) {
echo ‘ lb_path = “‘ . $lightboxpluginpath . ‘lightbox/”; lb_opacity= “‘ . $lightboxlb_opacity . ‘”; lb_resize= “‘ . $lightboxlb_resize . ‘”;’.”\n”;
and replace it with this:
$lightboxoff = false;
$lightboxoffmeta = get_post_meta($post->ID,’lightboxoff’,true);
if (($conditionals['is_automatic'] == true && $lightboxoffmeta == “false”) || ($conditionals['is_automatic'] == false)) {
echo ‘ lb_path = “‘ . $lightboxpluginpath . ‘lightbox/”; lb_opacity= “‘ . $lightboxlb_opacity . ‘”; lb_resize= “‘ . $lightboxlb_resize . ‘”;’.”\$
I copy and pasted that in; however, I received a syntax error with the following code:
Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /mnt/data/com.belinkddesign/htdocs/wp-content/plugins/lightbox-2-wordpress-plugin/lightbox.php on line 51
I noted from my editor that it was stringing the end of line 50, as it had mismatched quotation marks. Thus I edited the quoting slightly so that it was not stringing the statements following line 50, and received the following error:
Parse error: syntax error, unexpected ‘$’, expecting ‘,’ or ‘;’ in /mnt/data/com.belinkddesign/htdocs/wp-content/plugins/lightbox-2-wordpress-plugin/lightbox.php on line 50
I changed the line again, so that it now looks like the following:
echo ‘ lb_path = “‘ . $lightboxpluginpath . ‘lightbox/”; lb_opacity= “‘ . $lightboxlb_opacity . ‘”; lb_resize= “‘ . $lightboxlb_resize . ‘;’.”\$”;
It now appears to print in the header of the site as plain text?
…that’s what I get for copying and pasting from nano. That last line should be:
echo ‘ lb_path = “‘ . $lightboxpluginpath . ‘lightbox/”; lb_opacity= “‘ . $lightboxlb_opacity . ‘”; lb_resize= “‘ . $lightboxlb_resize . ‘”;’.”\n”;
Added that in; it’s still printing text into the header.
[...] Lightbox 2 – Плагин показывает изображение в реальном размере по клику и выводит его в форме лайтбокса. [...]
[...] that would play nicely, that I could understand, that would install… I used version 2, found here. Make sure after installing and activating you visit the settings page and click [...]
[...] Lightbox JS Plugin-Use the JS script to browse the image of one page.Really very beautiful. [...]
[...] Lightbox 2 をWordPress のプラグイン化されたもの。日本語版。 配布元 : Lightbox 2 WordPress Plugin 日本語版(Ver. 2.0.2) (本家はこちら : Lightbox 2 Wordpress Plugin) [...]
@Kim, download this: http://www.coswellproductions.com/stuff/lightbox.php.txt and rename it lightbox.php and try that out.
i’m back, now i’ll try to see your problem
@Homes: the problem is you don’t have the < ?php wp_head(); ?> in your header.php, i can’t see any .js in your header














[...] Lightbox JS Plugin – 为当页图片使用全新JS脚本的浏览方式,非常漂亮。 [...]