Pixelworkshop supports this item


This author's response time can be up to 2 business days.

18 comments found.


great work :-)

is it posibly to open other things (pages, videos) then images?

greats markus

Hello and thanks :) !

The short answer is yes but as the lightbox is opened and closed by using the mouse focus, any content like an iframe for example will steal this focus (if that makes sense), so it’s a bit annoying. In other words, I’d stick to images for now.

I am trying to determine if this product will meet a need that my customer has identified. He wants to display pictures for viewing. Likely a thumbnail of digital pictures and then, if clicked, open a window to show a bigger view and let the user close it after viewing it.


Yes, that’s exactly the purpose of this item, enlarge images on click and close them with the top button. But keep in mind that this is a CSS item, it works without javascript (except for IE7 and IE8 that need some kind of “modernizing” script) so it’s not made for complex galleries :)

This would be a perfect plugin for wordpress. Then i will buy this right away!

Thanks for your comment, it’s something I’ll consider but I don’t promise anything :)

Important Notice

I’m currently having holidays until december 30th, in the meantime I won’t be able to provide support. Before contacting me, make sure that you already checked the documentation and/or the comments, otherwise I’ll get back to you after my return.

Thanks for understanding !

Would it be possible to insert a “next/previous picture” solution? And would I be able to scale the pictures so it wouldnt be bigger than the windowssize alone with CSS (no javascript)?

Hello, I tested and tried different methods to add a previous and a next button when I created this lightbox but doing it via CSS makes things a lot more complicated and not working well in all listed browsers.

To scale your images properly, the easiest way is to resize them with an imge editor or by using the CSS3 transform property, you can see the third example on this page :)

When I implement the html into dreamweaver, all I am getting is the smaller thumbnail with the larger photo directly below it, instead of the mouse over / zoom / and close effect.

What I’m saying is… It’s rendering as two static images (one stacked on top of the other) in the browser.

Hello, I’m not sure to understand but you should only copy and paste the HTML code as well as including the CSS markup required.

It looks nice and its easy to use, but would it also be possible to close just by clicking on the background. It also doesn’t seem to work on a smartphone.

Unfortunately not, it must be closed with the button. Also this item has not been tested at all with mobile devices, only desktop browsers.

I get the same static images that jrobinsonchicago does?

?? Sorry I don’t understand.

Hi, should this work with the iPad?

Hello, I don’t know because I can’t test. I guess that it should be ok but I really can’t guarantee.

5 Stars! Pixelworkshop you are amazing. This works great for Online Learning Blogs that refuse Javascript.

is there a way to open all images in lightbox without extra html code? i wil that all images at the website open in lightbox after click.

Hello, all the lightbox markup is required and if you need something more simple, javascript is the way to go.

Is it possible to add a scroll bar to the popups? I’m using it for a thumbnail page of images, but the full size images are big, and it’s not possible (at present) to scroll down to see the full image.

Hello, as this is a CSS-only lightbox, you’d need to add some javascript for that. Here are a few ones I’ve used in several projects : Tiny Scrollbar, jScrollPane and jQuery custom content scroller.

Question, will this lightbox stay centered to screen with different image sizes?

Hello, yes the lightbox is always centered.

hello. is it possible to get other styles of the lightbox background, instead of just black and white? perhaps the diagonal shaded patterns or crosshatch patterns with this?

Hello, only black and white versions are provided, if you need anything else, you can customize the CSS for sure.

Help the script is not working

Your link doesn’t show the lightbox at all, so it’s either not there or you changed all classes. If the lightbox is installed on another page, you can send me the link by email but it’s definitely not where you indicated.

I think it is too much of a bother for a 3 $ script bash on regardless

You state that it’s not working without any info or link. And when you give me a link, nothing on your page shows that you’re using my product there. I can’t guess what the issue is and where it is if you don’t provide at least an URL showing where you integrated it. I was asking nothing more than a simple URL where I can see the CSS and markup of the lightbox, is that complicated ?

How do I add option to click anywhere to close the picture.

Hello, this is not possible without adding some javascript. This lightbox is based exclusively on CSS.

Hello, CSS lightbox mouseover Enlarge an image by moving the mouse over as in the example here http://www.bingoo.be/Petites-annonces-11-Region-Bruxelloise.htm Zoom a picture in the search result as the site thank you

Hello I replied in your previous comment, this lightbox is not what you need, it’s a different component that you can find probably for free.


thank you resolved

Thanks for the code. I was wondering if it’s possible to not have to use a thumbnail? Or do I need to use the original js lightbox script for that?

Hello, well it’s a CSS lightbox so the possibilities are limited compared to a javascript lightbox. Now what would you want to use to trigger the lightbox? A link?