Light - A Free Responsive Lightbox Plugin for Wordpress

I decided to put together a small little WordPress plugin today, using the incredible fancyBox jquery lightbox.

It’s called Light, and it’s just that: a Lightbox and a light-weight plugin. No settings or detailed instructions or anything like that. Just install it and it works.

Want to see a demo? Cool. Here you go.

It’s actually pretty flexible, so I wrote a whole lot of documentation for it over on Captain Theme. You can view the documentation for it there.

Regarding the License, I personally don’t care what you do with the plugin but fancyBox is under a Creative Commons License that basically allows you to use it in personal/non-commercial projects for free but you have to pay if it’s for a commercial site (and you should – it’s well worth the money and the developer deserves it!). Read more about the fancyBox License.

It’s also on GitHub! How exciting. Check out the GitHub repository.

Have a question or need help? Leave it below and I’ll try to answer it.

Download (Version 1.1) – 1092 Downloads

Documentation / Demo

Posted in Plugins, Wordpress

Johny

Cool and slick.

Quick question, I’ve seen the video in the lightbox and have read the documentation.

Are the users going to manually insert fancybox and fancybox.iframe class for each video? Currently I can see that the lightbox for video only support the link of the video (users have to click the link and the video will popup).

WP now supports the auto embed feature for video, so users only have to paste the link in the post editor and the video will be automatically embedded. So, any planning to automatically show video in lightbox? I’ve search from the WP repo, but non have that feature.

bryceadams

Thanks Johnny! Yeah the video was sort of a last minute thing and wasn’t my real intention with the plugin, but when I realised it was possible I thought I’d add it to the documentation.

Yeah you have to manually add the fancybox and fancybox.iframe classes to the link, but it doesn’t have to be a text link that links to the video. It could be an image or anything else that goes inside the tags really.

Regarding what you’d like to do with automatic embedding, I just came up with a better solution. The user still needs to give it a class but the link can be to just the video (the embed link isn’t required).

I’ll update it in 5 minutes
bryceadams

Johnny, the updated 1.1 version I just released has a little bit better video support. You now need to add a class of ‘video’ and ‘fancybox.iframe’ but it will embed and fit a lot nicer.

Sunny Ratilal

Lookin’ good Bryce!

bryceadams

Thanks Sunny!

Pingback: Light - Responsive Lightbox Plugin Released | Captain Theme Blog
David

I’m loving Light, Bryce, but I have a question. I want a completely borderless box. I tried css, and made the padding go away, but was left with a container peeking out on the side. I got it to work by going into light/js/jquery.fancybox.pack.js and changing defaults:{padding:15, to defaults:{padding:0, — I know enough to know this is not an optimal way to do it, but not enough to figure out a better way. Could someone recommend a more proper solution in either css or php?

David

Said php but of course meant javascript. Ugh.
http://twitter.com/bryceadams Bryce Adams

Hey David. Will this plugin it’s literally as light-weight as possible, so no options/settings/etc. However, I’d just recommend you dig into it yourself! You can configure the lightbox itself in light.js (do not touch jquery.fancybox.pack.js) – https://github.com/bryceadams/Light-Wordpress-Plugin/blob/master/js/light.js.

Read the docs on http://fancyapps.com/fancybox/ and it explains how to do everything you’d like, and make those changes in light.js

Javier

Great plugin!!! but I can’t show the caption, I put title=”aaaaa” in the img but don’t show nathing

Sören Nilsson

Same here. However I’m happy that I found this plugin.

Sören Nilsson

Found the solution: You must fill the title of the a-Tag instead of the img-Tag.

http://clubedatrilha.com.br/ Salsicha

Great plugin. I have a request. Can you make the plugin do as described in http://tridnguyen.com/2012/12/addin-responsive-lightbox-to-wordpress/ and make it identify automatically all images within a post to the same gallery?

Sören Nilsson

Found the solution: Fill the rel-attribute of the a-Tag for every image with the same text. You can do this in the advanced options of your image in the editor.

Sören Nilsson

I was looking for this for too much hours. Thank you so much!
Jorkke

u should make a free responsive lightbox plugin for wordpress i think fancybox is not free?
http://bahassi.com/ Diseñador Web Valencia

Hi, I have been struggling to get this work on a WordPress website that I am building but I couldn’t. All what I get is a dark overlay on the screen without anything else. This background is activated even if I click on a white space and not necessarily on an image. Anyone has experienced a similar issue with this lightbox? please help!!!

http://bahassi.com/ Diseñador Web Valencia

I have just found where the problem arises. It is caused by the video trigger script. When I comment it the lightbox seems to work but when I uncomment it it doese’t. I don’t know why but it works for me.

Ralph Mecham

If you change the selector from jQuery(“.video”) to some other class like, jQuery(“.light-video”), it might start working for you. I had a conflict with my theme on that class. Hope this helps somebody.

Jake

Helped me, thanks. If your only getting the overlay and no image, try this trick.

Vgpp

Very nice work Bryce! The only thing that doesn’t seem to work is the “next image – previous image” buttons (arrows) when browsing from a mobile device. Could you confirm that or is it a JQuery conflict that i should check ?
eric

do i need to do something to make the images responsive to the size of the screen? the images are staying the same size no matter what size the screen is.
Pingback: Light per Wp, plugin gratuito per gallerie con lightbox responsive | vizo.it
http://grawl.ru/ Grawl

amazing! want to make a theme for it based on Fresco default theme. what about theme settings? with theme chooser, for example.
Pam

Hi Bryce, This is exactly what I’m looking for. However, it seems the z-index isn’t working quite right. I’m using it here: http://nilzonweb.com/services and you can see the images slide up under the header. Any ideas on how to fix this? Thanks!
http://explainafide.com.au Robin Jennings

Great plugin. Just what I needed. Beautiful, simple, responsive.
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) | WPLITE.ORG
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) | themeReview
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) | Themes Tub
Pingback: Typegrid wordpress theme download.HotFile & Filesonic.
Pingback: Free Download » Typegrid – Responsive News & Magazine Theme (News / Editorial)
Pingback: Typegrid – Responsive | WordPress Planet
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) | Theme Samurai
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) http://files.wpbandit.com/themeforest/btn-wpbandit.png Typegrid – Responsive News & Magazine Theme (News / Editorial) http://themeforest.net/item/typegrid-responsive-news-m
Pingback: Typegrid - Responsive News & Magazine Theme (News / Editorial)Web Procyon
Pingback: Typegrid – Responsive News & Magazine Theme (News / Editorial) | Feeds
Pingback: Typegrid – Responsive News & Magazine Theme | WP Renew
Pingback: Typegrid – Responsive News & Magazine Theme | ThemeToucan
Manindra Singh

seems like a great plugin but its not working for me. i m using bootstrap theme in my wordpress site. i just activate this plugin and now in oneof my page i want to open a video in lightbox so i have put these lines into it:

Click this to open up a Video!

but it not showing any lightbox .instead it showing a loading icon.
Razer

Hey, could you tell me what’s the name of that prev/next image slide effect? I’m looking for some lightbox wordpress plugin that has such transition.
Pam

I also just posted this on the Captain Theme forum. Sorry for the duplication….

It seems I have a conflict with the WP-Supersized plugin. When it’s
activated and I click on an image on this page,
http://www.maplehurstweddings.com/photographs/the-farm/ the lightbox
jumps up to the left and then into the middle. When I deactivate
WP-Supersized, the lightbox works fine. Does anyone know a way to fix
this? Thanks!
headlessbody

Great code, i was struggling to find a working lightbox on my modified elegant themes theme, and yours is the only that works perfectly on my android tablet! thanks!

Home » Light – A Free Responsive Lightbox Plugin for WordPress