Lightbox Plus permits users to view larger versions of images from the current page and display simple slide shows, all in an overlay.
Description
Lightbox Plus implements ColorBox as a lightbox image overlay tool for WordPress. ColorBox was created by Jack Moore of Color Powered and is licensed under the MIT License. Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slide shows. The use of the dark or light background, which dims the page over which the image has been overlaid, also serves to highlight the image being viewed. Lightbox Plus captures the image title for display in the overlay. Lightbox Plus is able to lightbox images displayed using WordPress build in gallery.
Lightbox Plus uses WordPress’s built in jQuery library.
Read the FAQ first if you are having problems.
Requirements
Server
- WordPress 2.8+
- PHP 5+ (Recommended)
Support for PHP 4 has been completely removed – DO NOT UPDATE if you want Lightbox Plus to work with PHP 4.
Client
- IE 7+, FireFox 2+, Chrome, Safari 3+, Opera 8+
Usage
Note that getting the caption to appear in the overlay image by using the caption options built into WordPress Lightbox Plus uses the image title which is generated by “Edit Image Title” field and not the “Edit Caption Field.” You can also manually add lightbox tags to your images using the following instructions.
- Add a rel=”lightbox[uniqueID|filename]” attribute to any link tag to activate the lightbox, include a name between square brackets in the rel attibute. For example:
<a title="my caption" href="images/image-1.jpg" rel="lightbox[uniqueID|filename]">image #1</a>
Optional: Use the title attribute if you want to show a caption.
- If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Installation
Lightbox Plus for WordPress Demos
Frequently Asked Questions
Change Log
Special Thanks
- Dirk Schmitz (for pointing out an obvious bug that I kept overlooking)
- Michael Sheehan and Helena Hultén for constinued support and testing.
- Ken Williams (for testing version 1.5)
- Bart Lauwers of GenThree
- navjotsingh (for bug fix in gellery shortcode with version 1.6.x)
- Milan Petrovic for some quick debugging of version 2.0 admin panel and for pointing out an issue with the PHP Simple HTML DOM Parser.
- Melanie Sallis for needing a lightbox for her site which prompted me to create this plugin
- Jack Moore for creating the awesome jQuery plugin, ColorBox, and everyone who has contributed to the support in developing this plugin.
Support
The comments are now closed for Lightbox Plus.
For support please submit a support request though the support form. For questions or comments please post a message in the Lightbox Plus forum on my site.
Suggestions
Submit suggestions via Fundry.
Pingback: Meine must-have Wordpress-Plugins | mindgears.de
Pingback: 6 trendów w szablonach WordPress, czyli jak być na czasie | Sekrety WordPress
Pingback: Top 1000 WordPress Plugin Authors « Metode de promovare
Pingback: 24 Wordpress Image-Based Plugins | DesignBeep
Pingback: Creating a Lightbox Gallery in WordPress | Introducing the Lightbox Plus Plugin | Blake McCreary Design
Pingback: Voices - Tips for including audio, video, and images in posts
Pingback: Síðugerðin | The Site Design « Dalla – Salbjörg Rita Jónsdóttir
Pingback: WordPress Plugin Releases for 09/28 « Weblog Tools Collection
Pingback: 真‧嚎洨 » 我每天都要做一件以前沒做過的事（ DNA = Daily New Achievements ）
Pingback: 我的WP外掛清單 ~ My WP Plugin List ~ - 豬力喵的後花園
Pingback: some useful wordpress plugins- devloperworld.com
Pingback: Lightbox Plus
getting this error every time I click on a new page or anything in
the page Lightbox was not able to find it’s javascript script tag
necessary for auto-inclusion what’s this all about? I don’t have
WP-Gallery installed either
Great plugin. I’m using WordPress 2.8 and version 1.5.3.1 of
Lightbox Plus. The lightbox function works fine on my blog, but
when I subscribe to the RSS feed, the first character of each entry
is missing when I read it in My Yahoo! (which I use to subscribe to
the feeds). I have Article Preview turned on so that I can read the
first few sentences of the feed when I hover over the title. This
happens to every post that is using Lightbox Plus. For the entry
“Jinxed!” there’s no photo and no usage of Lightbox Plus and it
works. A bit annoying. Any workarounds or solutions to this?
Thanks.
Managed to work around it by inserting the text first instead of
the photo (left aligned). Not as nice visually, but it works. Also,
is there a way to insert photos side by side rather than one on top
of the other?
Hey! Having some trouble with your plugin. Tried different themes,
even the default and classic, and in firefox the image is not
showing and the borders are all collapsed somehow. CSS couldn’t be,
and the only plugin I have is the watermark, but already
deactivated and tried, and still no fix. What could it be?
I noticed a minor cosmetic issue with the “Shadowed” theme: the
rounded border, its margins and the alpha shadowing in the Colorbox
does not appear in Internet Explorer 8 or IE7. You can see it on
this page with the Demo Example image. It may have to do with
ColorBox’s user agent detection for IE6. What do you think?
WordPress 2.8, Lightbox Plus 1.5.3.1.
Pingback: 30 çok kullanışlı wordpress eklentisi | pervinin turqa
Also the last version of the plugin created a big white square in
the iphone-version of the website
Hi! Thank you for this great plugin!! I have a problem after lasts
upgrade: The popup image is not centered (as you can see here:
"http://www.androidworld.it/2009/07/04/bloo-lapplicazione-per-facebook-android-market/)">
http://www.androidworld.it/2009/07/04/bloo-lappli… Any idea?
Already tried to Reset the Lightbox Plus settings.
Hi Dan, Maybe you can give me a tip on this bug: on my blog (click
on link), the displayed pictures through Lightbox show the scroll
bars on all browsers I’ve tried (latest FF, Opera and IExplore 7)
which looks awful. At first, it only happened on Opera and IE, not
on FF. After trying to narrow the error down I managed to screw it
up :p because now it happens with browser. I’m not sure why. With
the default theme it works OK but not with my custom theme. I’m
using the Dark Lightbox theme, resize settings are disabled. The
gallery on that test post is using NextGen gallery but the bug also
happens when I add them manually to a post. Thanks & regards,
Lux.
Same issue with the scroll bars here. Any solution known?
Try setting the Max Width and max Height to 95% and make certain
that Resize is checked.
No go unfortunately. Was using 80%, changed to 90% and the scroll
bars are still there. Using the LightWord theme the scroll bars are
present. Using the default theme and they are gone…
On a side note, have you used this in conjunction with xml google
maps? It seems that if there is an embedded map behind the images,
it comes to the front during a transition. Not the end of the
world, but it loses a bit of smoothness… This happens with fade
or elastic transitions…
Hello, please check my page (click on link)… is it possible to
change it, so that lightbox will be in the first layer? As you can
see the youtube video is up on the lightbox image… Please let me
know
Flash (i.e. YouTube videos, etc.) will sit atop the Lightbox Plus
display no matter what the z-index is. This is an issue with Flash.
See Flash
content displays on top of all DHTML layers at Adobe for
details. To work around this issue you will need to add something
like the following to your <code><param /></code>
and <code><embed></embed></code> tags:
<code> <object><param name=”wmode” value=”opaque”
/><embed wmode=”opaque” [all other embed settings, file src
etc.]></embed></object> </code>
I believe, but strange, because with Lighbox 2 I didn’t have this
issue… The youtube was under the image seen with lightbox2.
Anyway my apologies… please tell me with some more details how to
resolve this, what file I have to edit. I understand that it’s not
a matter of your plugin, but I would really appreciate for some
words more about how to make the flash go down… If I understand
well, where I put the youtube video, before the stuffs, I have to
type ” “? Thank you a lot
Hello, I use LightBox Plus in combination with the Lazyest Gallery
Plugin, but for single images I prefer the Highslide Plugin.
Unfortunately Lightbox Plus is too greedy so that all Thumbnail
Images Link display Highslide AND LightBox. To avoid this, I’ve
patches the function “lightboxPlusReplace()”. Code: <pre
lang=”php”> $pattern[0] = “#<a>#i”; $replacement[0] =
‘<a>’; </pre> I put on the first pattern the following
replacement, so highslide Images leave unchanged. All other
patterns/replacements indexes goes one up. It works, and it would
be nice, that this goes in your original code, so I don’t need to
patch any updates. The optimal way would be, that on the admin page
user can configure self defined patterns to leave links unchanged.
(The string “highslide” would be a variable) regards
I’ll add Highslide as an option – that pattern is still required
for those who want to use LBP for everything automatically. I’ll
roll it into the next release. Thanks.
Images won’t open in the overlay window, or… Images opening above
the whole page content, or… Images showing no container box: The
comment up here explains it The
name of the folder for the css styles is different from the one
called from the plug-in (i.e. Shadow / Shadowed) If you use wp
super cache plugin, reload the page many times or de-activate and
re-activate it after renaming the folder to “shadow”
The latest version, 1.5.3.1, corrects this problem. Install it or
upgrade to it then reset the settings, or save the settings with a
style other shadow(ed) and it should be fine. All the result of a
typo on my part. Afterwards you can use the shadowed style with no
issue.
I have been noticing some 404 errors on my blog that are some how
tied to this plugin. For some reason, I see
“http://www.mysite.com/the_full_path_to_my_post/images/borderBottomRight.png”
which if you click on it results in a 404. For some reason
“images/borderBottomRight.png” is being appended to the path of my
post. I’m not sure if the users are getting a 404 or if that is the
result of viewing an image (but sometimes I see 404s for articles
that don’t even have an image). I checked the CSS and it seems like
it is pointing to the proper images and I checked the images
directory and that image is indeed there. Any thoughts? Thanks, HTD
Here is a full link that is showing 404: "http://www.hightechdad.com/2007/05/09/how-to-fix-master-browser-mrxsmb-event-id-8003-errors/images/borderBottomRight.png">
http://www.hightechdad.com/2007/05/09/how-to-fix-… The actual
URL for the content: "http://www.hightechdad.com/2007/05/09/how-to-fix-master-browser-mrxsmb-event-id-8003-errors/">
http://www.hightechdad.com/2007/05/09/how-to-fix-… That link
has no images. Any ideas?
Which style are you using? To be honest I’m not seeing the error.
Is this in IE or another browser?
I’m using “Elegant”. I have culled through the code. I’m thinking
it might be IE related (note that there is a display issue for
Elegant that I have seen, not matching what FF or Safari displays).
I will look at the debugger on IE.
I’ve modified the conditional style statements for IE that should
solve the render problem. IE 7 to some degree and IE 6 and lower
much more so have issue with alpha transparency in PNGs. I set the
conditional to only work for IE 6 or less so if you change this:
<pre lang=”php” line=”182″> $lightboxPlusStyleSheet .=
‘<!–[if IE]>’.$this->endLine();</pre> To this:
<pre lang=”php” line=”182″> $lightboxPlusStyleSheet .=
‘<!–[if lte IE 6]>’.$this->endLine();</pre> The
render problem should go away and it might fix the other problem if
it’s IE related.
Anything?
It seems like it is better, but the looks still differ between a
Firefox and IE rendering. I haven’t seen the 404 in a while
though…
Spoke too soon. Seeing a 404 right now. But things look better in
IE8. Will have to check IE7.
Can you give me a link where the 404 is occurring most often? What
browsers are you seeing it in? All of them?
Love the plugin idea but it refuses to show anywhere but in the
header for me (using iNove theme, yes, wp_head() is there). Anyone
have ideas why it insists on using the header for display? Kind
regards
<del datetime=”2009-06-25T14:38:30+00:00″>Well, it’s not the
theme, I just tested that. I would say that there is most likely a
plugin conflict of some sort (involving JavaScript or Stylesheets.)
</del> <del datetime=”2009-06-25T14:41:08+00:00″>Try
deactivating plugins to see if any of them affect LBP. </del>
Actually it looks like the problems is that it cannot find this:
<code> "http:">;http://antoirair.com/wp-content/plugins/lightbox-plus/css/shadow/colorbox.css</code>
And since the stylesheet isn’t there it’s not loading correctly.
Try the theme elegant to see if that works. You may need to
reinstall lightbox.
The latest version, 1.5.3.1, corrects this problem. Install it or
upgrade to it then reset the settings, or save the settings with a
style other shadow(ed) and it should be fine. All the result of a
typo on my part. Afterwards you can use the shadowed style with no
issue.
Thank you! I found the problem from your reply. I used the intaller
from 2.8 and seems it installed the folder /shadow as /shadowed.
Removing the ed fixed the problem. Thank you!
Just installed 1.5.3 version. Thanks for adding that “do not
display titles” toggle! You rock!
How do I add an image instead of a text link to activate the
lightbox? Like you did in your example. I hope I made myself clear.
You cannot. I requires a full URL to the full size image to
function. So basically you have an image link the
<code><img></code> element nested inside the
<code><a></code> element.
Great plugin. I would love for there to be a toggle that allows for
titles (image names that translate into titles) be a configurable
option. Currently, if I have an ugly image name like
“image_xyz_123.jpg” it shows that ugly name of “image_xyz_123″. It
would be great if I could turn that on or off. Until then, where in
the code can I turn off the image name display? Thanks, HTD
That’s definitely in the plans – in the meantime you should be able
to change this: <pre lang=”php” line=”83″>$replacement[0] =
‘<a$1href=$2$3$4$5$6 title=”$9″
rel=”lightbox['.$postGroupID.']“><img$7title=$8$9$10$11/>’;</pre>
to this: <pre lang=”php” line=”83″>$replacement[0] =
‘<a$1href=$2$3$4$5$6
rel=”lightbox['.$postGroupID.']“><img$7$9$10$11/>’;</pre>
Or even easier, in the colorbox.css for the style you are using
(elegant) change: <pre lang=”css”
line=”33″>#cboxTitle{position:absolute; bottom:3px; left:0;
text-align:center; width:100%; color:#949494;}</pre> to
<del
datetime=”2009-06-24T19:32:52+00:00″><code>#cboxTitle{position:absolute;
bottom:3px; left:0; text-align:center; width:100%;
color:#949494;display=none;}</code></del> <pre
lang=”css” line=”33″>#cboxTitle{position:absolute; bottom:3px;
left:0; text-align:center; width:100%;
color:#949494;display=none;}</pre>
Thanks for the reply. Yes, I’m using Elegant. I tried changing the
colorbox.css as you described “display=none;” but I think the
proper format (not that I’m any type of CSS guru) is
“display:none;”. However, when I tried that, it didn’t seem to
work. I’m going to try the code change you suggested next. On a
side note, I noticed that while the “Elegant” theme looks great on
non-IE browsers, the IE rendering doesn’t look as nice. Not sure
why. Great plugin. Looking forward to updates!
The code change worked great! Much better for me. So I guess now
you add an IF THEN statement and a toggle on the admin page (grin).
Something like that. I think I’ll need an extra regular expression.
Yes, of course, that’s correct. Too much time in too many different
languages.
Hi, just a few notes on my experiences in implementing Lightbox
under WordPress 2.8 – rel=”lightbox” makes a set of pictures to
behave as in the gallery, e.g. once edited into html code with each
separate picture, all the pictures on the page behave like in the
group. – I had to remove all diacritical marks used in some
languages on the title of each picture though (Edit Title in Media
Library when inserting pictures), as any diacritical mark left
(e.g. “á”) causes the subsequent picture (not the one with wrong
title) to freeze and not to show.
Hm, from certain point I don’t have to add nothinglike
rel=”ilghtbox” anymore and every new image still opens up with
lightbox effect. I changed nothing, just updating some posts with
new images …. Interesting, I still insert “rel etc.” just in case
it eventually stop working “spontaneously”
Just so, if you don’t add
<code>rel=”lightbox[id]“</code> the plugin goes through
and modifies any linked images to include
<code>rel=”lightbox[postID]“</code>. The linked image
format is like so: <code><a href=”*.jpg| "*.jpg%7C">|| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”><img src=”*inlineimage.jpg| "*.jpg%7C">|| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”></code> This is how WordPress created
linked images by default and Lightbox Plus will add the rel
attribute. <code><a href=”*.jpg| "*.jpg%7C">|| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”><img src=”*inlineimage.jpg| "*.jpg%7C">|| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”>|| "*.jpg%7C.gif%7C.jpeg%7C.png">| "*.jpg%7C.gif%7C.jpeg%7C.png"><img src=”
target=”_blank”></code>
Yes, I have updated the documentation to note that for individual
images you must have something like
<code>rel=”lightbox[uniqueID]“</code> or it will treat
all the images like a gallery. I’ll have to see if I can figure out
what is causing the problem with diacriticals and possible other
accent characters, though it should work.
Thanks for coming over all of my remarks, good to see someone cares
so much about users.
Dan LBP is working very well. Nice work! I have 2 questions: 1) How
do I disable LBP for individual images or posts? New image inserted
into a post will now automatically enlarge via LB. The only
solution I have found is to set “link url” to “none” in WP
Gallery/image upload dialog box. However by doing so, I can no
longer use Highslide Integration plug in. 2) How/where do I change
code so enlarged images in LBP will close by clicking on the same
enlarged image? What code do I use? If I could get this second part
figured out, I could toss out Highslide Integration (which works
nicely and has a checkbox in the WP Gallery/image dialog box to
activate or disable Highslide. Thanks for any additional help! Jay
1. You can’t really aside from not having a Link URL, at least not
at this point. 2. I’m going to look at extending the JavaScript to
enable this option. Right now you have to click on the overlay or
the close button.
The answer to question number one is that currently there is not a
method to do so other than what you have mentioned. I plan on
adding the option to have LPB work as a class based implementation
at which point you would have a check box that basically says use
this class an then you will need to add the class for the item you
want LBP to tag. As for question two, I can’t easily answer that,
it’s in the JavaScript but it’s currently designed to work the
opposite way in that you click anywhere but on the image and it
closes it. Part of the reason for this is that you should be able
to load inline content and external pages using LBP and they need
to be interacted with usually.
Dan, Thanks for getting back to me on this info so fast. Long reply
back on my part due to traveling. I like your plan to add a check
box that would enable or disable LBP. Great idea. Too bad no
current options for the other feature. Again, excellent plug-in.
Jay