Mobile Friendly Website

CSSPLAY

Doing it with style

CSS Light Box Click COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

manu:-
Great!
(06.03.2009, 21:12)

denny:-
Trying to figure out on how to adjust image thumbnail sizes
(09.03.2009, 03:02)

Dave:-
Hi, thanks for this, I'm having problems using this in Google Chrome - it only seems to work if you keep holding the mouse down after you click an image.
(09.03.2009, 08:15)

Rich:-
If you size the browser so it has a scrollbar, then click on an image, the black background shows, however, if you then scroll down you can see the normal page with no black covering it.

If you then resize the browser to have no scrollbar, all is ok again.

How can you make it so the black covers everything, even when has scrollbar?
(09.03.2009, 08:42)

Chris Hudson:-
It works on my safari 4 beta on a 10.5.6 MacPro
(16.03.2009, 20:16)

Stu:-
Maybe Safari are changing their mouse clicks to fall into line with all other browsers (except Chrome). Opera made this change a few versions ago.
(17.03.2009, 22:41)

Cara:-
As always very impressive. Thank you for another fabulous demonstration!
(19.03.2009, 03:27)

Ariane:-
Hey where I can see how you did that? Only in the source code?
Can I use it more my homepage?
(31.03.2009, 19:04)

Rebecca Dykstra:-
I love this gallery. Everything works well except the X to close doesn't show up. I tested in Safari, Firefox and Opera. Help!
(01.04.2009, 20:47)

Stu:-
The white cross is a graphic image which is called up in the stylesheet as a background image 16 x 16 pixels www.cssplay.co.uk/menu/trees/close.gif
(01.04.2009, 20:58)

Simple Anecdote:-
Dear Stu,

Very impressive indeed!
I think I solved the height issue.
I checked it in FF 3.0.8 and in IE7 so obviously it needs more testing. But here it is anyway:

add " position: fixed; "
in:
.thumbholder a:active .lightbox .light, .thumbholder a:focus .lightbox .light {}

and:
.thumbholder a:active .lightbox .box, .thumbholder a:focus .lightbox .box {}

That way the full size of the lightbox screen just scrolls along with the rest of the page.

Thanks again for all your hard work. Your brilliant designs and implementations are always an inspiration.

I hope that for once I did something to contribute.

Me.
(06.04.2009, 11:17)

vinay:-
Yup, position:static will let users add relative positions to links
(16.04.2009, 12:00)

Little Girl:-
For the record, in Firefox, the picture opens with a click and closes with a click without having to click the X. This script also works in Konqueror 3.5.10 (under KDE 3.5.10) with the difference being that in Konqueror, you must click the X to close the picture.
(04.05.2009, 15:47)

Joe:-
Any idea why the markup does not validate over at?
(07.05.2009, 06:15)

Joe:-
over at validator.w3.org
(07.05.2009, 06:17)

mrzpro:-
Dear Stu, my address is mrzpro@tin.it and as you know I've used your photo gallery in my site www.ferentino.org (and you've a link in my credits page) is possible to have the link from where I can download this file?
thank you very much
(31.05.2009, 16:01)

Richard:-
Thought this should be possible, so thanks for confirming it. Will look into using the technique.
(02.06.2009, 16:07)

J:-
This is a great script, I am trying to use it now. I am having problems getting the "X" to show up as well. Other than viewing the page source is there another place where you've laid out the CSS?
(03.06.2009, 14:39)

J:-
Ignore that last part, Stu (read the front page). Still can't get that dang close.gif to work.
(03.06.2009, 14:56)

J:-
Okay, I got the image to show (which took me longer than it should have, I feel like a dunce) however it is always visible, I'd like it to disappear when I'm not clicked into an image.
(03.06.2009, 15:08)

J:-
I see now, you actually dont have the X hidden, its only the same color as the background. What about for those like myself with more complicated background images? I'd like it if the "X" was only there when I clicked the images. Thanks for your time Stu! Great code
(03.06.2009, 15:16)

Stu:-
With this version you do not need the X to close as clicking anywhere on the lareg image screen will close it. So you could remove the X altogether or transfer it to the large image layout.
(03.06.2009, 16:16)

Tamara:-
Why does the enlarged grey background have a strip left at the bottom of IE browsers? about 1 inch in size (so it shows the webpage right through)?
Also, can you have the enlarged image display a little lower? I have a header that is quite big and when i select the image to enlarge, it views up too high and i have to scroll the page up.
(07.07.2009, 13:25)

kuhn:-
Hi Stu,

great site, great demos!

I made some changes and (as I hope) improvements to the concept of the CSS lightbox... (e.g. got rid of all Javascript(expressions) in IE6- so the lightbox is now CSS-only).

If you are interested please check it out at:

www.k-u-h-n.net/wp/index.php/2009/07/08/kuhn-pure-css-lightbox/

bye
kuhn
(16.07.2009, 10:44)

NTulip:-
it does work in Chrome 3.0
(07.08.2009, 16:27)

Rob:-
When I look at your demo in safari the images do not stay on the screen unless I hold down the left mouse key. However in Firefox they stay until I click again. Is there a piece of code I can add to the css styles so that it works the same way for safari as it does for firefox?

thanks
rob
(29.08.2009, 17:14)

Stu:-
As I mention on the demo, this does not work in Safari and Google Chrome as these two browsers have different routines for monitoring the mouse click :active and :focus states. These ore only available with the mouse button held down. As soon as you release the button both these states are lost.
(29.08.2009, 17:30)

Erik:-
First of all I really think you create some fantastic css stuff!

Only problem i have with this code is that it does not validate.
(13.09.2009, 09:59)

Stu:-
It now validates.
(13.09.2009, 17:22)

Erik:-
Thanks Stu the HTML validates now.
The css does not, but so be it.

I have one more question if you don't mind.
In Firefox you can return to the thumbnails by just clicking anywhere.
In IE this doesn't work.
How can i make it work in IE like it is working in Firefox?
(14.09.2009, 09:05)

Kate:-
hiya,

was wondering is if it possible to have on the main images ( when the thumbnails are clicked) to have Arrows or next/previous buttons?

thanks

Kate
(16.10.2009, 16:37)

Giuliana:-
Dear Stu,

You are my CSS hero.

Thanks, and mangoes and key limes,

g
(16.11.2009, 05:21)

Lili:-
Hey Stu, I'm using Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6. If I scroll to the bottom of the page, the grey/lightbox does not cover the entire HTML page. It cuts off.

Don't know if an issue on my side, letting you know anyhow. Cheers mate.
(25.01.2010, 15:12)

Stu:-
Check the latest version of this for the fixes.
'Clickbox'
(25.01.2010, 15:20)

leslie vivas:-
very nice... is it possible to get the codes?
(20.03.2010, 22:18)

Egen:-
I't don't support listing images prev-next, too small button for exit. No effective.
Sorry, for my english :)
(18.05.2010, 17:45)

Anthony:-
Pardon my lack of knowledge on this, just learning, but how do I use this? Do I get the code form somewhere or just view source....?
(09.06.2010, 14:15)

Stu:-
You will need a general knowledge of html/css before you can use this demo. But all you need is in the page source code.
(09.06.2010, 15:39)

Anthony:-
Cool. Thankyou. Amazing galleries.
Like the CSS play - CSS Light Box - Click version. It's above my ay grade but trying to figure out if it's possible to use that setup but kind of inside this one. Want to have a gallery for memorablia. So headings at top would be letters of the alphabet, then if "A" is selected, another drop down appears for each band under "A" then you select that band and under that comes the CSS play - CSS Light Box - Click version. Is it possible r am I completely out of my element. The look of that gallery is perfect but just trying to get more option for heading etc. Great work!
(12.06.2010, 02:56)

Karl Badde:-
The Lightboxrs don't work in Safari5 on OSX.
I'm using Safari 5.0.1
(25.08.2010, 12:03)

Stu:-
If you read the information on this demo you would see that I mention it does not work in Safari or Chrome.
(25.08.2010, 12:16)

pippimann:-
Great Gallery´s!
(10.08.2012, 21:05)

Black Falcon:-
works for me in chrome 44.0.2403.107, thanks very much
(28.07.2015, 16:18)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page