Screen Shot 2012-10-27 at 7.24.27 PM

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 1.0.0

Documentation / Demo

80 thoughts on “Light – A Free Responsive Lightbox Plugin for WordPress”

  1. 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.

    1. 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

    2. 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.

  2. 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?

    1. 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 :)

    1. 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.

    1. At the time when I made this there weren’t really any good responsive light boxes besides fancybox. You can still technically use it but for commercial projects they suggest buying a license.

  3. 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!!!

      1. 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.

  4. 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 ? :)

  5. 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.

  6. 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.

  7. 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.

  8. 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!

  9. 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!

  10. hi, great plugin… the only one i found that is doing well in mobile world…
    But i have a problem with the caption. I have filled the alt tag but i alway see the title. Any solution?

  11. Anyone else having positioning issues in Chrome and Safari? (beautiful in IE and Firefox) Seems to correct itself when resizing the browser but by default it is positioned rather oddly… :)

  12. Thank you, I’ve tried 20 other plugins to try and get it to work responsively with Awesome Flickr Gallery and this is the first that didn’t conflict with the already installed colorbox.

  13. This plugin does not work many themes. When the themes is provided shade. Site stops responding, have to overload the page.

    For example here, this site theme http://wordpress.org/themes/why-hello-there
    Activate it, your plugin, and then click the icon on the site “search.” The screen goes dark, the site will be unworkable.

    So many website does not work. Thought the problem in themes proved a problem with this plugin.

      1. Hi Bryce,

        sorry but I don’t know what to post.

        Let me explain my issue: I work a sysadmin for an hosting provider, and in the past week several wordpress-based sites we host have been hacked and sent tons of spam emails.

        As we investigated, we found that within every hosted website your plugin’s files had been hacked and their content changed.

        I really wouldn’t know what to report, because content was obfuscated. Anyway I think that someone has found a vulnerability in your code which allows him to arbitrarily write on files in the same directory, but I can’t tell more.

        Thank you for your time :-)

        1. Thank you for taking a look but that’s pretty unlikely as there is barely any PHP in the plugin. It simply uses the WordPress enqueue_styles to load a lightbox library. I think it may have been their own site or another plugin..

  14. I encountered 3 errors

    Warning: Attempt to modify property of non-object in ..pluginslightlight.php on line 39

    Warning: array_search() expects parameter 2 to be array, null given in ..pluginslightlight.php on line 40

    Warning: Attempt to modify property of non-object in ..pluginslightlight.php on line 40

  15. thanks for your work bryce!
    i have a question: how to change “width” and “left” of the wrap? it seems to come out of the js file wich is hard to read / understand for me. Shure i could overwrite both values using css, but it would not be dynamic anymore .. thx for your help & time

  16. I should have specified, sorry – I meant when using it in a gallery where you can’t add the title attribute like you can in the <a tag.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>