Mobile Friendly Website


Doing it with style

lightbox mark 2 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}

Post a comment

Current posts

Anonymous Coward:-
This is so cool! Safari doesn't show the big image when the intermediate image is clicked. Anyone out there know why? Thanks!
(31.03.2006, 19:22)

Hi Anonymous Coward, I think that Safari will act the same way as Opera in that you will need to hold down the mouse button to display the large image. ;active is only active whilst the button is held.
(31.03.2006, 19:40)

Anonymous Coward:-
No, when I hold down the mouse button it just turns a little grey on the border, but no larger image comes up. (Safari 2.0.3 OSX.4.5) Any thoughts on how to look at debugging this?

I see Firefox 1.5 works right.
(31.03.2006, 19:59)

Wow. I fixed it for Safari so now it works like you describe it - click and hold to see the large image.

I changed this:
/* give the link focus/active state a relative position and remove the focus/active border so that it doesn't spoil the large image */
/* active for Opera and Focus for Firefox */
.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {

to this:
.menu2 ul li:hover ul li a:active img, .menu2 ul li:hover ul li a:focus img

it seems that adding the img makes it work for Safari. And it doesn't break Firefox or IE6 in my limited testing. YMMV.
(31.03.2006, 20:48)

Anonymous Coward:-
oops... you only need the extra img for the active pseudoclass

.menu2 ul li:hover ul li a:active img, .menu2 ul li:hover ul li a:focus

If you add it to both active and focus, you'll get flickering large images as you roll off them.
(31.03.2006, 20:59)

Try it now...
(31.03.2006, 21:08)

This really is wonderful!

Is there a possibility of including a next/back link or button so once an image has been selected one could simply continue browsing through the category (current tab) in the large image mode?
(31.03.2006, 23:15)

Buzzkill, that could be done with javascript, but may be possible with css and extra markup.
(31.03.2006, 23:18)

Anonymous Coward:-
Great! Safari works now too.

I actually like the Safari UI result better. It is lithe - the way the image snaps back dutifully when you release the mouse. The rest of the design is so fluid it feels a little encumbering to have to click a second time to get rid of the large image.

I like to have a set of images that you can really quickly zoom into and then zoom out of. The Safari version achieves the lightweight feel better than the two click version you see in Firefox or IE. IMO.

Thanks for this cool work you do. It's like a drug.
(01.04.2006, 00:34)

Using IE7 beta, the rollovers work fine, the images expand when clicked, but when I move off the large image it jumps up and left ...
any ideas?
(03.04.2006, 09:33)

DeadMeatGF, IE7 is only beta so it may still have bugs.
But you could try changing:
.menu2 ul li:hover ul li a:active img,
.menu2 ul li:hover ul li a:active,

The 'img' bit was added to make it work in Safari so it may need another conditional comment for IE7.
(03.04.2006, 12:30)

That looks fabulous, great work!!!
So I'm very new to css and would like to use this on my site but I only have one page of pictures. Can someone please tell me how I could modify the code so that the pictures all load up on the page and then you just click on them to open. I pretty much would like to have no tabs at the top and just one page of images.

Thanks you.
(01.05.2006, 16:05)

Howard, Norway:-
First of all.. Great work :)
I absolutely love these galleries.

I have a question for you though.
Could you please make an example where, let's say, the "Portraits" gallery has more than one page?

I miss the possibility to click "next" and "back"..
(I have lots of pictures) :)
(20.01.2007, 14:53)

Howard, it is not possible to have a <prervious> <next> function with these menus as this will require a scripting language. All you can do is add extra tabs labelled portrait#1 portrait#2 etc.
(20.01.2007, 15:02)

Stu, you ask "Hope you think the effort was worth it ;o)". Yes indeed, thank you!
(06.10.2007, 13:40)

Hey Stu, I am successful in setting up the gallery, but it currently goes 'under' my .swf movie displays... do you know if there is a way to have the gallery master impose itself on top of all other types...?
(08.01.2008, 13:29)

And just to add... would the below help?

<param name="wmode" value="transparent" />
(08.01.2008, 13:40)

the gallery works very well in ie7 mozilla but not at all in ie6 should I had a conditionnal commentaries?
(01.07.2008, 10:32)


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://'


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.


Facebook Twitter rss feed Facebook Fan Page