Cancel

Sarah Gooding

CSS3 Lightbox Plugin for WordPress: Pure CSS, Super Fast and Mobile Friendly

Lightboxes are generally built using Javascript, but depending on the author/version/script, lightbox plugins can sometimes cause conflicts with other plugins and themes when used with WordPress.

CSS3 Lightbox is the first lightbox plugin for WordPress that is powered purely by CSS3, making it super fast and lightweight. It doesn’t require any Javascript whatsoever and provides a beautiful experience on mobile.

lightbox

How does the CSS3 Lightbox plugin work?

The plugin parses all your images in your content and creates some specific classes which are called from a CSS file. It then uses browser native CSS3 functionality to display images in a lightbox, which makes it faster than any Javascript lightbox plugin out there.

You can test out a demo of the CSS3 lightbox by clicking on the image in the post on the demo page.

The CSS3 Lightbox plugin currently works with any embedded image in WordPress content. The plugin’s author is working to make it compatible with gallery images, a feature that will be added in its next release. There’s nothing more annoying than staring at a loading image, waiting for a Javascript-powered lightbox to load. The delay may even cause visitors to leave the page and navigate away from your site. Check out the CSS3 Lightbox plugin for a much faster alternative.

Category:
Tags: ,
22

22 responses to “CSS3 Lightbox Plugin for WordPress: Pure CSS, Super Fast and Mobile Friendly”

  2. Will definitely try. I hope that gallery support will be included as an option, because for that purpose I’m using “Gallery Carousel Without JetPack” which has image preloading, but cannot be used for single images. In this case it’s really nice to have a fast lighbox to display separate images.

    BTW demo page link goes to: Mashshare.net / Mash-Networks Addon. Is it right?

    Create forum topic from comment

  3. After playing with it I have several comments.

    Because lightbox doesn’t have any controls on screen, it would be good to make it close on Esc key – many galleries support this, so users might expect this behavior.

    On the plugin page it says: “After installation goto the settings page Settings->Mashshare and make your changes there.” – I could not locate options :-/

    Create forum topic from comment

  6. This actually worked in my IE8 vm as well. I didn’t think CSS3-only lightboxes were compatible with IE8. Maybe they’re using a JS fallback of some kind, but nice to see they’ve given some consideration to that. Still plenty of IE8 in the wild.

    Create forum topic from comment

  7. Final update. CSS3 Light box plugin broke one of my post. It looks it conflicts with the included code reference inside the article, here you can see results: https://imgur.com/O9BKNMz

    I have to say, that I do not use any plugin to include code. It is included after treatment with: http://www.elliotswan.com/postable/

    After code citation block the rest of the article was without CSS formatting. For the comparison you can see real look at: http://mtomas.com/389/tiny-forge-framework-child-themes-comprehensive-guide

    I’m very thankful for one reader who informed me about this. At the moment plugin feels like an early beta. Will stick with traditional JS solutions for the time being ;)

    Create forum topic from comment

  8. CSS3 Lightbox.
    The availability of a plug-in that would not use JS was exiting. I could not wait to try it out on one of my sites and development pages with the common browsers and on mobiles. It just doesn’t work at all. My test site uses the Twenty Eleven theme, which I consider to be well established and stable. The instructions say to go to settings->Mashable. It doesn’t not appear anywhere. Going to the web site by clicking on the Visit plug-in site link and searching for it (http://www.digitalsday.com) for either part of its name produced zero results! The web site seems to have links to cracks and dubious material. Have I installed some malware? searching for Mashable, I find a a site mashare.com, I am told I must click on a Facebook Share link before I can see a demo. Prices are also given!! The whole thing is a scam. Please Ms. Gooding don’t post stuff like this without checking it out and giving the whole picture.

    Create forum topic from comment

  9. Thank you for your explanation. I did not click to try the demo, because I will not bother to click on any Like or Share buttons unless I have tried the product. I am not the only one to be fooled by what I see in clear text. The name of Mashshare (unrelated to the plug-in function) made me suspicious and I may have been sensitized by the unrelated web site opened by the plug-in link, which I see has now been changed, since my comment here and on the WordPress Support page – very bad publicity to put the wrong(?) link.

    On a subsequent visit to the Mashare site, apart from the prices, I saw at the very bottom:
    Note: This addon requires Mashshare installed. So that’s why it wont work? There are a few plug-ins that require pre-installation of a specific theme or plug-in, but they give you a warning. What a time-waster. I hope that they get their act together.

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.