in Plugins, Tutorials, WordPress

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

Write a Comment

Comment

54 Comments

  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.

  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?

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

    • 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!!!

  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. works like a charm, thank you! 🙂
    One question though, is there a way to remove the social networking links?

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

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

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

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

  18. Hiya! Did you discontinue video support? The example in the comments does not work anymore, nor does it on a website I am working on. I put the classes video and fancybox.iframe in there on the link to the video.

Webmentions

  • 30 Best jQuery Lightbox Plugins | Hi Cydia November 20, 2014

    […] Light – A Free Responsive Lightbox Plugin for WordPress […]

  • Nulled Free Typegrid - Responsive News & Magazine Theme Download November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Hello world! - TechBlog November 20, 2014

    […] of plugins to choose from that adds such a feature. This demo site uses a plugin called “light“, it is included with the theme. Activate it, and it will all […]

  • WP plugint keresek - - 5. oldal - ENTITY November 20, 2014

    […] […]

  • 30 Best jQuery Lightbox Plugins - Design Bump November 20, 2014

    […] Light – A Free Responsive Lightbox Plugin for WordPress […]

  • Typegrid – Responsive News & Magazine Theme | Scripts CodeCanyon November 20, 2014

    […] this demo makes use of the responsive fancybox plugin referred to as “light” for normal […]

  • Download Typegrid – Responsive News & Magazine Theme November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme | Website Templates November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme | Website Templates November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Photo Gallery | Mali Samaj November 20, 2014

    […] plenty of plugins to choose from that adds such a feature. This demo site uses a plugin called “light“, it is included with the theme. Activate it, and it will all […]

  • Wordpress杂志主题——Typegrid | Wordpress主题站 November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid - Responsive News & Magazine Theme | 9Downloads November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine ThemeWoThemes | WoThemes November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Free Responsive jQuery Lightbox Plugins. Cool. | N4more Design November 20, 2014

    […] Light, the responsive lightbox plugin for WordPress is extremely easy to use. […]

  • Gallery Test Post | myNVE November 20, 2014

    […] plenty of plugins to choose from that adds such a feature. This demo site uses a plugin called “light“. Upload and activate it, and it will all […]

  • Light, une lightbox design, responsive et gratuite pour Wordpress November 20, 2014

    […] pouvez télécharger le plugin Light pour WordPress directement sur le site de son développeur. Pour l’installer, passez par l’interface […]

  • Typegrid – Responsive News & Magazine Theme | themesafe November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid - Responsive News & Magazine Theme Free Download - Wp Free | Wp Free November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme | ThemeToucan November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme | WP Renew November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme (News / Editorial) | Feeds November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid - Responsive News & Magazine Theme (News / Editorial)Web Procyon November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • 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 November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme (News / Editorial) | Theme Samurai November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive | WordPress Planet November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Free Download » Typegrid – Responsive News & Magazine Theme (News / Editorial) November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid wordpress theme download.HotFile & Filesonic. November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme (News / Editorial) | Themes Tub November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme (News / Editorial) | themeReview November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Typegrid – Responsive News & Magazine Theme (News / Editorial) | WPLITE.ORG November 20, 2014

    […] this demo uses the responsive fancybox plugin called “light” for standard […]

  • Light per Wp, plugin gratuito per gallerie con lightbox responsive | vizo.it November 20, 2014

    […] il link del plugin: Light – A Free Responsive Lightbox Plugin for WordPress e questa invece la documentazione: Light Plugin […]

  • Light - Responsive Lightbox Plugin Released | Captain Theme Blog November 20, 2014

    […] can check it out over on Bryce’s personal website, where you can get it […]