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

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

[...] загружать на блог несколько картинок сразу. 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. [...]

24 May 09 , 8:33 am

Minh Trung:

Good plugin, thank you.

[...] เำพียงแค่นี้ก็เรียบร้อยแล้วคับ ถ้าจะศึกษาเพิ่มเติม ศึกษาได้ที่นี่ [...]

26 May 09 , 5:40 am

AnneMarie:

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?

3 Jun 09 , 7:10 pm

Arne:

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脚本的浏览方式,非常漂亮。 [...]

5 Jun 09 , 1:47 pm

Ben:

Thanks for the awesome plugin for WordPress! Just what I was looking for to help my blog mesh with my site.

6 Jun 09 , 9:28 am

Nico:

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

12 Jun 09 , 11:57 am Wordpress Eklentileri

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

12 Jun 09 , 7:12 pm Ahora sí, a trabajar

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

13 Jun 09 , 8:27 am

georgian:

But how to hide the fullpath to image in statusbar ?

10x

[...] Lightbox 2 2.0.2 图片特效 [...]

16 Jun 09 , 3:39 pm

Guido:

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:灰盒子插件,用幻灯效果显示图片,很酷。 [...]

24 Jun 09 , 5:58 am

K Holmes:

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.

24 Jun 09 , 4:39 pm

John Bintz:

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.

24 Jun 09 , 11:18 pm

Kim H:

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.

25 Jun 09 , 2:24 pm

John Binz:

Yeah, in lightbox.php, around lines 48-52.

25 Jun 09 , 5:08 pm

Kim H:

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 :) )

25 Jun 09 , 7:18 pm

John Bintz:

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 . ‘”;’.”\$

25 Jun 09 , 7:41 pm

Kim H:

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?

25 Jun 09 , 7:45 pm

John Bintz:

…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”;

25 Jun 09 , 7:54 pm

Kim H:

Added that in; it’s still printing text into the header.

[...] Lightbox 2 – Плагин показывает изображение в реальном размере по клику и выводит его в форме лайтбокса. [...]

26 Jun 09 , 8:47 pm Lightbox : the grumpy old man

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

27 Jun 09 , 3:04 pm

John Bintz:

@Kim, download this: http://www.coswellproductions.com/stuff/lightbox.php.txt and rename it lightbox.php and try that out.

27 Jun 09 , 3:12 pm

Peppe:

i’m back, now i’ll try to see your problem

27 Jun 09 , 3:15 pm

Peppe:

@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

« 121 22 23 24 25 26 27 28 29 30 3133 » 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