Lightbox Plus
Lightbox Plus permits users to view larger versions of images from the current page and display simple slide shows, all in an overlay.
Download from 23Systems
Lightbox Plus 1.5.3.1 (1345) - 106.87 KB
Download from WordPress.Org
Lightbox Plus for WordPress
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 uses WordPress’s built in jQuery library.
Read the FAQ first if you are having problems.
Lightbox Plus DOES NOT work with WordPress’ built in gallery feature.
IMPORTANT 1.5 UPGRADE INFORMATION
See the change log for information regarding this upgrading to version 1.5 of Lightbox Plus. There are significant differences from previous versions.
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" rel="lightbox[uniqueID|filename]" href="images/image-1.jpg">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 rel="lightbox[roadtrip]" href="images/image-1.jpg">image #1</a> <a rel="lightbox[roadtrip]" href="images/image-2.jpg">image #2</a> <a rel="lightbox[roadtrip]" href="images/image-3.jpg">image #3</a>
Installation
Screenshots
Lightbox Plus Demo and Example
Frequently Asked Questions
Change Log
Road Map
- Attempt to add enhanced features for use with and WordPress’ built in gallery.
- Class based option – can be set to work with all images or just selected images.
- Add languages for which I have completed translations.
- Solicit and implement additional language translations.
Special Thanks
Dirk Schmitz (for pointing out an obvious bug that I kept overlooking), Ken Williams (for testing version 1.5), 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.
;-)
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
<param />and<embed></embed>tags:<object><param name="wmode" value="opaque" /><embed wmode="opaque" [all other embed settings, file src etc.]></embed></object>
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:
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
The actual URL for the content: http://www.hightechdad.com/2007/05/09/how-to-fix-master-browser-mrxsmb-event-id-8003-errors/
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:
To this:
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
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.)Try deactivating plugins to see if any of them affect LBP.Actually it looks like the problems is that it cannot find this:
http://antoirair.com/wp-content/plugins/lightbox-plus/css/shadow/colorbox.cssAnd 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
<img>element nested inside the<a>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:
to this:
Or even easier, in the colorbox.css for the style you are using (elegant) change:
to
#cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;display=none;}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
rel="lightbox[id]"the plugin goes through and modifies any linked images to includerel="lightbox[postID]".The linked image format is like so:
<a href="*.jpg|.gif|.jpeg|.png" title="optional"><img src="*inlineimage.jpg|.gif|.jpeg|.png" /></a>This is how WordPress created linked images by default and Lightbox Plus will add the rel attribute.
<a href="*.jpg|.gif|.jpeg|.png" title="optional" rel="lightbox[postID]"><img src="*inlineimage.jpg|.gif|.jpeg|.png" /></a>Yes, I have updated the documentation to note that for individual images you must have something like
rel="lightbox[uniqueID]"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