Lightbox Plus
Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. 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.
Download from 23Systems
Lightbox Plus 1.3.0 (408) - 52.86 KB
Download from WordPress.Org
Lightbox Plus for WordPress
Description
Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar. Lightbox Plus is used to create overlay display images on the webpage and to automatically add the correct overlay links to images. Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. 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 prototype and scriptacolous (builder and effect) libraries.
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 whicih is generated by “Edit Image Title” field and not the “Edit Caption Field.” You can also manually add lightbox tags to your images sineg the following instructions from the Lightbox JS instructions.
1. Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:
<a title="my caption" rel="lightbox" href="images/image-1.jpg">image #1</a>
Optional: Use the title attribute if you want to show a caption.
2. 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>
Planned in next release:
- Optional image title capture.
- Class based implementation (I should have done it the first time around)
- Suggestions welcome
Installation
- Extract lightbox-plus.zip to your
wp-content/pluginsdirectory. - In the admin panel under plugins activate Lightbox Plus.
- In the admin panel under setting click on Lightbox Plus, select a color style and choose save settings - you must do this for lightbox to function correctly.
- It should now be completely set up and function.
Screenshots
Lightbox Plus Demo and Example
Frequently Asked Questions
Can I use this plugin and Lightview Plus, Lightbox 2 (either one), WP lightbox JS Plugin at the same time?
No they would interfere with the image enhancement in your posts and pages.
Can I add my own styles and images for the overlay?
Yes, you can add a new stylesheet to the css directory in the plugin directory. Lightbox plus will show the stylesheet in the dropdown on the admin panel. You can add your own images to the image directory but you will need to modify both the styles sheets and lightbox.js file to reflect the new images.
How does Lightbox Plus differ from other Lightbox plugins for WordPress?
Performance wise there probably are no advantages. The regular expressions that handle the text are more robust handling a wider variety of characters and additionally besides just adding the image to a ‘lightbox’ it will also grab the image title from the image to use for the ‘lightbox’ caption.
Changelog
1.1.1
- Moved admin panel under Design
- Minor code formating for better readability
1.1.0
- Fixed absolute pathing - should now work in blog residing in sub directories
- Rolled code into class structure
1.0.1
Modifications to regex usage for image linking
1.0
Initial release
I’m having trouble with lightbox. I have more than one WordPress blog, each installed in its own subdirectory on my site, and I am using Lightbox for one of them. Lightbox installed fine and seemed to be working but now when I click a thumbnail, it sends me to my static front page.
Here you can see what is happening:
http://euphoric-designs.net/art/2008/11/true-meaning-of-fan-art-titans-in-silly-clothes/
sends you back to
http://euphoric-designs.net/art/
when you click the thumbnail.
But if I hit back to go back to the page with the image posted in it, THEN the full image pops up, albeit without a close button.
I get a 404 error going to the page you mentioned. What sort of gallery plugin are you using?
[...] Lightbox Plus [...]
thx, This plug-in is exactly what I want.
[...] 5,Lightbox Plus 这个插件就不多介绍了，估计这种图片效果是N个人想要的！ [...]
Indded it was no JS of an extension but one called “mootools.js” belonging to my wordpress theme “xplosive reloaded”. After I commented out “camelCase” in the list of functions Lightbox plus worked again (I don’t know yet which effect this has on the theme.)
Thank you very much for your kind support!
[...] 5.Lightbox Plus 这个插件就不多介绍了，估计这种图片效果是N个人想要的！ [...]
@Thomas
I took a look at your site and used Firebug to watch what was happening when it loads and it would appear that the JavaScript from some other extension is interfering with the Lightbox Plus JavaScript.
I couldn’t say which extension exactly is not working exactly but there is an error thrown
property.camelCase is not a function. I’m guessing it’s an extension that modifies the titles of posts? If you try selectively turning other extensions off you may be able to see Lightbox Plus work.Hi, I have Lightbox Plus installed as a plugin but it doesn’t work on my blog (WP 2.6.3). Why? Has it to do wth the theme I’m using?
[...] Lightbox Plus [...]
[...] Lightbox Plus [...]
[...] Lightbox Plus [...]
thanks for stuff
i would like to use this plugin
@nelson
Thanks for the info. I’ll see what I can do, if anything.
hi,
just to drop here the information that this great plugin is not compatible with Gengo 2.5.3
cheers,
nelson
[...] Lightbox Plus [...]
The site is thisiscory.com. In the most recent post, in the second paragraph, there’s a link to an image. Thanks!
@Cory
Can you point me to the site you are using it on so I can take a look? I can probably help you if you I can take a look at it.
Also, you shouldn’t need to adjust the CSS at all.
Feel free to use the contact page if you don’t want it public.
I’m having the same issue as Bob.
I adjusted the CSS and now it appears that the spacing is correct, but still no image.
Like Bob, I can paste the path and see the image, but it doesn’t appear for the real deal.
[...] Lightbox Plus [...]
@bob
What is your blog’s URL? If I can take a look at it maybe I can help.
what i mean is that i can copy and paste the url in the settings panel into a browser window and see the images, but on the blog images they do not appear
the paths are correct but the images do not appear
[...] Lightbox Plus [...]
[...] Lightbox Plus [...]
@bob
Thanks, I’ll fix it later today.Actually you should not have to edit the CSS. What you might need to do is check the path in the Lightbox Plus admin panel and make certain the path to the loading and close images are correct. This may be the case if you have WordPress installed in a subdirectory though I tested it that was several times.update:
I had to edit the css file for the close image to show up
#imageData #bottomNavClose{ background: url(../images/closelabel.gif) no-repeat; width: 66px; height: 22px; float: right; padding-bottom: 0.7em; outline: none;}
the loading image doesnt work either
the close label doesnt appear
@Nomadic Matt
Well I can’t really help you since you have a different plugin loading for your images. I would suggest that part of the problem is that you have extra spaces in your
<a href=elements and you have tworel=[]in some of them. I notice that on your blog the other plugin isn’t working there either.I also notices that the background opacity is only covering part of the page as well suggesting that you have some style or JavaScript issues with your pages as well.
[...] 5,Lightbox Plus 这个插件就不多介绍了，估计这种图片效果是N个人想要的！ [...]
Hi,
Lightbox has stopped working again. I did what you said last time on this page (http://www.nomadicmatt.com/travel-photos) and it worked for but not it has gone back to the old way of only registering every other picture. What’s wrong here?
Moreover, the plugin doesn’t work on my blog anymore. Despite adding the photos via the wordpress image adder, photos do not work all the time. Is there a bug in the system?