Mobile Friendly Website

CSSPLAY

Doing it with style

CSS Light Box 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

Paul Wilkins:-
Normally I am enamoured by your work Stu, but this doesn't work well. When a user moves the mouse over an image, it is unexpected for the web browser to perform such radical behaviour as to open up a light box as the mouse passed over the screen.

I really think that for this to be acceptable to typical visitors, that this type of behaviour should be performed by a click event instead.
(06.03.2009, 11:46)

Matt:-
I agree. But it could still be used in some scenarios where there is only one option as opposed to a gallery. Nice idea.
(06.03.2009, 12:07)

Stu:-
Hi Paul, I agree that a click event would look nicer, BUT unfortunately Safari and Google Chrome do not hold the :active/:focus state once the mouse button is released so it cannot work in these browsers.
I will produce a click version later to show the problem.
(06.03.2009, 12:08)

Paul Wilkins:-
I suspect that it's just the layout that causes the user interface dissonance. If the thumbnails showed the larger image in a separate location that didn't cover the thumbnails, while allowing the ability to hover on the white cross to close the larger representation, that might sit better with the expected behaviour of hovering.

Sorry for causing the trouble here. I'm just trying to work through what may work best for users.
(06.03.2009, 13:44)

Stu:-
There is now a click version for testing.
Safari and Chrome will need to keep the mouse button pressed to see the images.
(06.03.2009, 13:55)

cyrilRictus:-
I'll try to get this clear... let's say you've got a page longer than your screen height, (with a scrollbar) the gray background won't cover the page as you scroll down... I wonder if this can be fixed without javascript...
(08.03.2009, 21:16)

Ted Eggs:-
Stu. I think this is a good idea save for the instant switch as the curser touches an image. If you have a block of thumbnails more than two high or wide you will never see further tan the first layer. Can you put a delay in the switchover so a thumbnail will grow after, say, 250 milliseconds. Hovering over the white cross is fine.
(21.03.2009, 10:43)

Stu:-
CSS is not capable of this so you are limited to one or two rows of images.
You could always try the click to view version.
(21.03.2009, 11:41)

Swany:-
When the hover pop's up into the larger picture can there be no background color around the larger picture?
(19.09.2009, 19:45)

Hana:-
Hey Stu, good use of the hover effect. I've been looking for the hover lightbox effect, and everytime I find it, it usually has one of two problems:
1) For images only, no text.
2) Can't seem to get lightbox width and height to change size based on inner content (typical div problems it seems or maybe due to absolute positioning)

So I'm messing around with your code and am having the same problem, I can get a great hover effect with a set width-height box but not make that width and height change based on the content (image and caption) inside of it. Any help I can get from anyone?
(27.07.2010, 02:57)

Mary:-
Oooohw, ik want to choose where I put the close button, but i can't, what is the secret of closing the image...position relative..?
Please help.
Greetings, Mary
(12.12.2012, 17:47)



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