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
[...] Traq – 生成博客的统计信息，以图形显示。 Sociable – 添加漂亮的网摘按钮。 LightBox 2 – [...]
[...] Lightbox JS Plugin – thường d
I need some help.
First pic here: http://www.bishulog.co.il/blog/2008/05/02/%d7%a2%d7%95%d7%92%d7%99%d7%95%d7%aa-coffee-banana-chips/
i can find the js and th rel tag is ok. the plugin is activated.
thanks
why is it after i close the image with the ‘X’ that I am brought all the way to the top of the page automatically?
[...] Lightbox JS Plugin – thường d
[...] Tyckte bilderna i föregående inlägg blev så fula att jag var tvungen att göra något åt det. Därför använda nu Lightbox 2.0 för bilderna. Hittade dessutom någon som gjort det som en plugin till WordPress! [...]
[...] Lightbox 2：灰盒子插件，用幻灯效果显示图片，很酷。 [...]
thanks. But ligtbox no working
http://sinema.fan.web.tr/beni-orada-aramaim-not-there-resimleri-578.html
Sorry! 
[...] Leprakhauns Word Count – 在日志编辑页面添加字符计数功能。 Lightbox 2 – 灰盒子插件，用幻灯效果显示图片。 Limit the size of main page posts – [...]
[...] Lightbox JS Plugin – Usado para exibir imagens maiores na mesma página usando Javascript overlay popups. [...]
[...] Lightbox 2 (5/48) . 不知道你是否已经在一些网站上已经看到，当你点击一张图片，整个页面就变得模糊成背景，而当前页面则成了一张图片。如果你不明白我在说什么，那么请点击插件页面，然后点击那里的图片。如果你需要这样图片技巧，那就安装着个插件吧！ [...]
[...] Lightbox JS Plugin – thường d
[...] Lightbox JS v2.04 Plugin 1.8 [...]
staj:
Thenk great plugin 4mj.it thenk
[...] Lightbox JS Plugin – Usado para exibir imagens maiores na mesma página usando Javascript overlay popups. [...]
[...] Lightbox 2 WordPress Plugin » 4MJ – Internet News [...]
[...] wie zB. hier anzeigen lassen. Ich habe das Script selber in die Homepage programmiert und nicht dieses Plugin benutzt – kann sein, dass ich nun irgendein Plugin geupdatet habe und es nun mein dolles [...]
[...] ich hier doch sehr gerne die eine oder andere bildergalerie zeigen wollte, habe ich jetzt auch ein lightbox plugin dafür [...]
sağlık
thanks. But ligtbox no working
http://sinema.fan.web.tr/beni-orada-aramaim-not-there-resimleri-578.html
Sorry!
hi, i see it’s works now for you, can you tell me what you do to fix it ?
because i’m in the same case, i do every things like it’s explains, but no, it’s don’t want to work
[...] Leprakhauns Word Count – 在日志编辑页面添加字符计数功能。 Lightbox 2 – 灰盒子插件，用幻灯效果显示图片。 Limit the size of main page posts – [...]
I tried your latest version, but it didn’t fix the problem:
“Caption displays as “null” when viewing an uncaptioned image after viewing a captioned image.”
and it flickered when the page was loading the page, and opening the lightbox window. (That was using Firefox2.)
[...] D
[...] Um
[...] Lightbox JS Plugin – allerie fotografiche. [...]
[...] making the site more useful to visitors and one or two that I simply like. One of the latter is the Lightbox 2 plugin, which I’ll be using to showcase my design portfolio. The plugin made adding lightbox very [...]
[...] eklentisinin önemli özelliklerinden biri Liğhtbox eklentisi ile birlikte çalışmasıdır , eklentinin bu yeni sürümünde resim görüntüleme efketi [...]
[...] Download & Support [...]
je suis particulmi
[...] Lightbox 2 (5/48) . Have you seen a neat trick on some websites, where you press on the image, the whole page dims into the background and the active window or image pops-up to the front? If you don’t know what I’m talking about, just head to the plugin page and press on the images there. If you want such a trick on your blog, install the plugin. [...]
[...] 安装了 LightBox 图片显示插件，增强了图片显示时的用户体验，很不错的哦！ [...]
[...] Lightbox 2 – 灰盒子插件，用幻灯效果显示图片。 Limit the size of main page posts – 指定首页日志摘要的字数。 [...]
[...] för Lightbox, Slimbox, Smoothbox [...]
[...] Lightbox JS Plugin – used to overlay images on the current page into neat Javascript-powered overlay popups. [...]
[...] Lightbox 2 (5/48) . Have you seen a neat trick on some websites, where you press on the image, the whole page dims into the background and the active window or image pops-up to the front? If you don’t know what I’m talking about, just head to the plugin page and press on the images there. If you want such a trick on your blog, install the plugin. [...]
[...] загружать на блог несколько картинок сразу. 74. LightBox 2 – это плагин добавляет эффект затемнения заднего [...]
[...] Lightbox 2 WordPress Plugin [...]
[...] Lightbox 2 (5/48) . Have you seen a neat trick on some websites, where you press on the image, the whole page dims into the background and the active window or image pops-up to the front? If you don’t know what I’m talking about, just head to the plugin page and press on the images there. If you want such a trick on your blog, install the plugin. [...]
[...] Test&Link 19) Lightbox2 Sitenizdeki resimlerin Lightbox efekti ile gösterimini sağlar. Link 20) Fotobook (TR) Sitenizde facebook üzerinde barındırdığınız resimlerden galeri [...]
[...] Lightbox JS Plugin – thường d
Bell’articolo complimenti!!
[...] Lightbox JS Plugin – thường d
Miyabi:
Hello.
I have used your plugin “Lightbox JS 2 plugin.”
I want to change the source code of it.
Becouse Your plugin have the problem showing by Safari.
And This problem are heapend that used together “Google Maps for WordPress Plugin.”
Please change the file, lightbox.php.
Please refer:
(red:add / blue:erase)
function lightbox_styles() {
$lightboxscript.= "<link rel=\"stylesheet\"
......
href=\"".$lightbox_path."css/lightbox.css\" type=\"text/css\" media=\"screen\" />\n";
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/prototype.js\"></script>\n";
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/scriptaculous.js?load=effects,builder\"></script>\n";
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/lightbox.js\"></script>\n";
wp_enqueue_script('wpLightbox', "{$lightbox_path}js/lightbox.js", array('prototype', 'scriptaculous-effects', 'scriptaculous-builder'));
print($lightboxscript);
}
......
add_action('wp_head', 'lightbox_styles');
add_action('wp_print_scripts', 'lightbox_styles');
sorry……
Miyabi:
Maybe, My comment cannot understand.
so I modfy the coment.
$lightboxscript.= "<link rel=\"stylesheet\" href=\"".$lightbox_path."css/lightbox.css\" type=\"text/css\" media=\"screen\" />\n";
// erased from -->.
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/prototype.js\"></script>\n";
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/scriptaculous.js?load=effects,builder\"></script>\n";
$lightboxscript.= "<script type=\"text/javascript\" src=\"".$lightbox_path."js/lightbox.js\"></script>\n";
// <-- erase// add -->
wp_enqueue_script('wpLightbox', "{$lightbox_path}js/lightbox.js", array('prototype', 'scriptaculous-effects', 'scriptaculous-builder'));
// <-- addprint($lightboxscript);
......
// erased -->.
add_action('wp_head', 'lightbox_styles');
// <-- erased
// add -->
add_action('wp_print_scripts', 'lightbox_styles');
// <-- add
[...] Lightbox JS Plugin – used to overlay images on the current page into neat Javascript-powered overlay popups. [...]
[...] 後、これだけでは駄目なので、クリック前の部分の × Closeも小さくしなければいけないので、ｽｸﾛｰﾙバーはこれだけでは消えませんでしたから。(やっぱりただの×にしました。ｗ）したがって、imagesファイルから images/close.imgを削除して、その後images/closelabel.gifのサイズを45pxにしました。 (が、それでも駄目だったので画像編集ソフトを使って、自分でアイコン作って貼り付けてました。 すると違和感がなくクローズしてくれました。理屈はわかっているつもりなんですが、一応素人なので発言はここまでにしておきます。 まあ、何となくこれで直るかなと思ったら、一応自分のＰＣではうまい具合に直ったので、他のパソコンからは分かりませんが。多分、大丈夫でしょう。直ったのを確認したブラウザは、スレイプ二ール・Ｇrani・FireFox・IEです。応急処置。 ダウンロード先はこちらです。 Lightbox 2 WordPress Plugin [...]
[...] 1.Rupert Morris的：在wp官网插件pop的前面，下载次数好多的 2.Safirul Alredha的：现在72松在用。me2。 3.Giuseppe Argento的：现在yo2在用。 [...]
Hi, I just installed this plugin on my wordpress site. Unfortunately, I have found that since installing it, my page loads very slooowly. It takes more than one minute for the page to load completely. Strangely, it was the loading of my sidebars that was taking so long, not the loading of the content to which the lightbox is applied.
Any ideas? I’d like to keep using this plugin if possible.
Hi priscilla, there is a problem in your index.php, install firebug on firefox and inspect the net. If i click on a post all is ok.
The load time was getting complaints so I switched to a different type of lightbox, but I like yours better.
My site is a WP theme, Neoclassical. I didn’t make it and I don’t know enough css to tinker with whatever is causing the problem- I wouldn’t even be able to tell! But when I try to load an individual entry, it takes more than a minute; it’s not just the index on my end. Any more ideas?
[...] Lightbox 2 (5/48) . 不知道你是否已经在一些网站上已经看到，当你点击一张图片，整个页面就变得模糊成背景，而当前页面则成了一张图片。如果你不明白我在说什么，那么请点击插件页面，然后点击那里的图片。如果你需要这样图片技巧，那就安装着个插件吧！ [...]