Mobile Friendly Website

CSSPLAY

Doing it with style

lightbox 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

mike capstick:-
Congratulations, a very impressive piece of work
(31.03.2006, 04:22)

bigpeeler:-
Amazingly cool, Bro. Not only is the layout slick, but the photos themselves are top notch.
(31.03.2006, 04:38)

talwar_:-
Brilliant, how simple yet effective! proves you dont need heavy javascript/ajax for everything.
(31.03.2006, 04:41)

Teilhard:-
Impressive!
(31.03.2006, 06:17)

Peezdyits:-
Wow awesome piece of work! I am in awe.
(31.03.2006, 06:48)

DragonI:-
OMG! Your photo gallery is Super Duper AMAZING.

I couldn't even imagine that it was possible. U da MAN.

I wish I could afford you!!!
(31.03.2006, 07:05)

Anonym:-
Fantastic Stu.. I always surprise about your work.
You make me each day more interesting to use CSS instead of javascript¡¡ This example and next generations make me again to ask you for permission to use it..thank you very much...congratulations for your work..
(31.03.2006, 07:21)

miguelvideosub:-
Sorry, I forgot the name in my previus post..Please permision to try with this example,,Thank you..
(if you want ,delete previus post Anonymus...(31.03.2006, 07:21)
(31.03.2006, 07:23)

Anonym:-
I have a question about the image gallery.
How can I just use the image gallery without the menu?
I mean I would like to display a list of images and when you move the mouse over, it will zoom out.

Thank you.
(31.03.2006, 07:28)

Asher:-
Works like a charm in Safari 2.03 and Shiira 1.2.2 as well!

This is a fantastic CSS build!
(31.03.2006, 09:05)

Anonym:-
I am very impressed! Nice work.
p.s. A little off the subject here but are these your own photos?! If so, what camera do you use!
(31.03.2006, 10:08)

pink:-
I ran out of words! It's clean and slick and nicely designed too! Brilliant job - I plan to shoehorn it into the next project I do whether it's relevant or not!
(31.03.2006, 10:21)

Stu:-
The photos used in this demonstration are from www.sxc.hu - stock.xchng of which I am a member. These particular one are given free.
Do visit and become involved in this project as the photographers have provided most of the images seen on this site.
(31.03.2006, 13:43)

Fishy:-
This is rather awesome. Good job!

I'm also impreseed that it validates and doesn't really on the extensive box model hacking I usually resort to.

For extra credit, any of you groovy CSS kids should redo with a) add rounded corners to the tabs and b) make it section 508 compliant (allowing the tab text to resize, etc.).
(31.03.2006, 17:50)

Patrick Metz:-
An interesting idea. I've been working with CSS for a few years now and if you'd asked me 'How to make an image-gallery?' I'd answer : 'With Javascript' ;-)
(31.03.2006, 21:17)

kodeman:-
Cool effect, really.

Yes, the CSS validates. Sure, the HTML that non-IE browsers see is valid. But, the nested anchors that IE sees is not valid.

Chew on this: screenreader programs that work on top of IE will get nested anchors, without the CSS.

These programs have a hard enough job in TagSoupLand without things like this unnecessarily ambiguating the logic of the document.

Which URL should the program follow when the user activates a nested link? The outermost? The deepest? Is the destination immediately apparent to the user?

Bottom line: links are too important to mess with in this way.

Stay wise, friend: valid markup is more important for accessibility than the CSS will ever be. W3C validator be damned, it is what the browser sees that is important.

Make the markup valid, first. Use documented browser features with known effects (behaviors, exprssions, or some other whatever:hover workaround) to overcome functional deficiency instead of a hack which may have unintended side-effects.

Remember, IE-specific stylesheet extensions are features -- not hacks -- in that browser.

Best regards, Mr. Nicholls.
(31.03.2006, 22:05)

Stu:-
kodeman, your comments are noted.
This site, however, is for experiments in css and that is exactly what this is, an experiment to see if this was possible. I don't see a screen reader as being too important in an experiment and especially as this is a photo gallery (not very interesting to someone using a screenreader).
I do also agree with your comments about nested inks etc. and you will find that most of my pages on this site do present valid xhtml and css.
I hope that you find the rest of my site interesting and enjoyable experiments.

Best wishes
Mr Nicholls
(Stu to everbody else)
(31.03.2006, 22:20)

Stu:-
Anybody..do screen readers read IE conditional comments?
(31.03.2006, 23:20)

kodeman:-
I understand the point is to experiment. As it were, the comments I made can be taken to emphasise that point. My point is simply that, while possible and neat, these kinds of demonstrations can and do get the green light for production use (in the minds of some) when stamped with the word 'valid'. You may realize that experimental/bleeding-edge techniques, such as the IE7 script, while carrying a warning not to be used in production, is widely used nonetheless. I'd like to point out, not only for you, but also to your readers that the technique can be done without harming the innocent using the techniques I described in the previous post. And, Stu, the screen-readers of which I spoke are built on top of MSHTML and/or MSIE itself, and are fed the content and markup cues post-rendering. So, yes, they will get what is between conditional comments, just as IE sees it. Cheers.
(02.04.2006, 08:31)

Stu:-
kodeman, I understand what you say, but all I am doing is getting IE to recognise nested links in the same way as you can nest uls (it's not rocket science to have an 'outer' link and an 'inner' link). IE7 by the way will see the valid markup that Firefox etc see so the 'problem' is with IE6 and IE5.5.

Now, to take this further, xhtml1.1 and xhtml2 allow you to add/modify the dtd - so I could have added my own dtd to allow nested links (and 'target' if I want)- this will then make the markup 'valid' without the conditional comments and IE/Firefox etc should understand.
How will the readers cope with xhtml1.1 and 2 when there is a bespoke dtd?
(02.04.2006, 09:39)

kodeman:-
Stu, the 'problem' is nested links causing unintended side-effects.

It's not the fact that the nested tags are anchors, it's the fact that anchors are 'link' elements. All content within the outer anchor is part of the link, including the inner anchor.

A link is understood only to interact 'as a whole', not on a sub-element basis. Nested link behavior is undefined.

In practice, the target that gets honored varies between user agents. The fact that it can be made to validate is, at best, a red herring. Your 'out' -- a custom DTD -- provides no mechanism for you to disambiguate that situation.

Visitors do not care if you can justify the alteration of the intuitive link using some 'standards' loophole. They want to know why they didn't go where they thought the link would take them.

As for how readers will cope, they will do as they do now -- treat a link element as a self-contained object. They are right to do so.
(03.04.2006, 23:58)

Stu:-
I still believe that this way is better than a javascript 'bodge' that would require an alternative menu for visitors with javascript turned off.
Once IE7 is established and IE5.5/IE6 have had their day, this method will no longer be required and it will vanish in favour of the li:hover alternative.
This will not require any alteration on the part of the webmaster.

However, just to see what problems it causes, can you point me in the direction of the IE screen reader software so I can see if there is any way that this can be resolved.
(04.04.2006, 08:20)

Jeremy Stover:-
Hey Stu,

Just wondering if you give out help or assistance on your forum here. I'm having a bit of trouble with my CSS using mozilla (Although it worked fine a week or 2 ago-I'm wondering if mozilla changed something). If you can see if you can help me out, I'd appreciate it.

The site is pianoman684.googlepages.com/index.htm

My email address is pianoman684@yahoo.com if you can get back to me. If not I can keep checking here. Thanks!
(05.04.2006, 03:47)

Stu:-
Jeremy, it looks like your html page is missing a little markup, like the </head> and the <body>.....</body></html> etc.

The style sheet may be loading but it isn't seeing the page correctly.
(06.04.2006, 11:28)

cedric:-
Just to let you know Multi-page photo gallery MK.2 and MK.3 do not work properly in ie 7 beta. Once the thumbnail is clicked, the large pic appears fine (you need to hold it clicked to display the large one in opera),when going outside the large pics (white part), the large pic appears on the left of the screen, it is hard to get rid of it then... Thanks anyway for sharing all of this.... Cedric cmainguy@gmail
(08.04.2006, 09:52)

momotaro:-
I've tried to rework recent menus to see if I can get a page from a different server to load into a division ( httprequest) but unsuccessful so far (without JavaScript). Which of your menus is the best candidate to reverse engineer? Plan to link a Favicon to open a page into a redundent column's div.
(15.04.2006, 15:15)

daniel:-
hi wonderfull creations. how do you do it?

I would like top learn from you.

hear from you soon.

thanks daniel
(25.04.2006, 08:38)

johsi:-
Hi Stu..
Im impressed with 1st entrance this site -found thru Google-search "hover+image+html+NOT javascript".

I use (still) IE6 and 'live' with the dangers still being published for this browser.
However, beeing a 'security'freak - I do avoid javascript and active-x (the latter
-unfortunately- YOU uses :-( on this page).

When I browse the internet, I only allow some very few sites the use of "active-x and
plugins"..

So my Q:
Is it only for the demonstration purposes that you use active-x or is it essential for the
use of the "just css" ??
Or (being curious) whatever am I missing by not allowing active-x ?? :-)

Regards from Denmark
(native country of Peter Schmeichel)
Johsi
(12.05.2006, 13:02)

Stu:-
joshi, NONE of my demonstrations use javascript (or any other program language) JUST CSS.
The only javascript on the pages is from the Google AdSense advertising which helps towards the running costs of the site.
(12.05.2006, 16:43)

Sepideh:-
Hi Stu
I do like the new version of "Cross Browser Multi-Page Photograph Gallery" better, but i don't want to have to explaine how to use it on my site and lose the chance to show my work. If once you moved the mouse away from the enlarged image the thumnails re-appear, there would be less confusion as to how we can get back to the thumnails.
I dont have a mac, but i get a sence that there would be problems with it on mac. right?
thanks
sepideh
(28.08.2006, 04:14)

Torbjørn:-
Hello there yong child...
If you look at my page [figgyo.piczo.com] it's kind a boring... can you help me?
i'm not good at this "html" stuff...

From Norway
(24.09.2006, 18:16)

Buck:-
Hey, Stu. Great work.

The problem I am having with all CSS image galleries seems to be the fact that all the enlarged images get loaded when the page loads.

I have a large collection of images (90+) and I noticed the CSS gallery I am currently using is causing the page to take 20-30 seconds to fully load even via DSL (can't imagine dialup).

My question is will this gallery technique behave the same? Will all pure CSS galleries behave the same?

Thanks,

Buck
(14.11.2006, 23:21)

DavidD:-
Hi

I was looking at the css codes for lightbox2.css. & lightbox2_ie.css but could'nt
find your example code for lightbox2_files/css_play.css
(21.01.2007, 12:24)

DavidD:-
Hi ..Me again

The reason for this is to find out how do you alter the size of the images for the thumbnails and large pics via the gallery css code.
(21.01.2007, 12:26)

Stu:-
DavidD, all you need for this is the two lightbox files 'lightbox2.css' and 'lightbox2_ie.css' the other css files are general ones for the page layout:
www.cssplay.co.uk/css/css_play.css and
www.cssplay.co.uk/css/demos.css
You will also need to define the default styles for a, a:visited and a:hover for this to work correctly.
To alter the size of the thumbnails etc. you will need a good understanding of how the css styles interact.
(21.01.2007, 13:52)

Yves:-
How does the CSS change if each individual image would reside within a list item? E.g. each menu would have an ul with a li for each image. Is the same effect still possible?
(08.02.2007, 21:36)

Nicoleta:-
I saw your nice example of a photo gallery. I am a beginner in webdesign and I would like to know whether it is possible, just using CSS + XHTML (without Javascript), to create a photo gallery where one uses 'Prev', 'Next' buttons to browse through available photos. If yes, could you please send some code ? Thank you in advance for your time! Sincerely, Nicoleta
(23.04.2007, 23:30)

Patrick:-
Stu,

I stumbled onto your site while browsing and I am impressed with everything. As a beginning web designer, I am totally in love with CSS and its capabilities. I have a question regarding this particular demo:

Cross Browser Multi-Page Photograph Gallery posted 30th March 2006

What do I need to add or change to have the entire box remain open rather than appearing only when I :hover over the links. I wnat to use this for my families web site to display family pictures and such. I am definitely putting your sites in my favorites.

Thanks Stu.
(06.05.2007, 15:52)

Olivia:-
Hi there,
I was researching a way to create a gllery without using a database driven gallery with all the coponents.
I found that the demo: "Cross Browser Multi-Page Photograph Gallery" a good solution. My only question: is there a way to put a "back to gallery" link? Because, when you click on the image, it pops up in its own page. Is there a way to just put a link back to the gallery?

My email: Soychi509@aol.com ---- just in case I don't have chance to stop by the site to check up a response...
(14.05.2007, 04:03)

Stu:-
Olivia, instead of having a link to the image, have a link to a page containing the image and a 'back' link. But you can also use the browser 'back' button.
(05.10.2007, 10:15)

Steve:-
It's a beautiful script. I think you must be a genius. However, I can't get my images to appear!
What is the file path to the images relative to the script. I know this should be easy - sorry.
(04.02.2008, 18:28)

Suzanne:-
I LOVE this script, but tried to put it to use on my site (non-profit company I'm setting up) and was told it's not working in internet explorer. I tried to modify to use as a product listing page.
I know my code is VERY messy - but would love it if you could take a look and tell me what to do to help?
www.savingart.ca/Products
(07.02.2008, 14:08)

Stu:-
Suzanne, the first thing you need to do is use a standards compliant doctype. See my home page or the FAQs page for a link to a list to choose from on w3.org
(07.02.2008, 14:33)

Suzanne:-
Hi, Stu - Thanks for the quick response! and ... Wow - I feel like a complete novice (which I am!). I'm on the page w3.org site - which one should I use, to rectify the problem?? and Do I just copy the code and paste on top of my html page?
(07.02.2008, 14:45)

Stu:-
Suzanne, use the basic html4.01 transitional to start with. Just copy the code and place it at the top of your web pages.
(07.02.2008, 18:19)

Suzanne:-
Thanks, that worked great! Much appreciated.
:)
(08.02.2008, 01:08)

Suzanne:-
Hi, again -
Now that the browser issue is fixed (I think - it may still need fixing in earlier IEs, I have to check) -
2 more questions:
1) Is there a way to make the image not clickable?
2) In the larger (rolled-over) image, is there a way to add information that's not in the smaller (non-rolled-over) image ?
(like on iStock's site )

? again - thanks...
(08.02.2008, 15:12)

Jeanette:-
Hello Stu!

This is absolutely beautiful and exactly what I have been looking for to get my club webpage gallery up and running. However, as a novice I do have a question. Is there a way to incorporate all the aspects of the gallery but into a content wrapper so that the gallery would appear in the center of the page with the right and left content found on all the other pages, instead of being the whole page?

www.humboldt.edu/~conserve if you'd like to take a look.
(02.04.2008, 18:23)

Jon:-
Hi,

Great site. Just wanted to point out that this page doesn't validate against the HTML (W3C)

but loving the work
(26.04.2008, 09:42)

Stu:-
Jon, now fixed, thanks.
(26.04.2008, 11:06)

Miguel:-
Hi:

Is there a way to show more than 4 pictures in a row?.
(26.06.2008, 21:20)

Stu:-
Miguel, there is always a way, but it would mean a restyling of the layout.
(26.06.2008, 21:23)

Seanan:-
Dear Stu,

Firstly I'd like to echo what others have stated in that I apprechiate the time you've taken in putting together this terrific site of yours.

Also like most people here I am just starting off in web design and have used your gallery in designing an artists site. It works fine in firefox and safari however in IE7 it goes all pig ugly, with two colums and no hover effect. Hopefully it's something quite straight forward.

The site url is www.creationsbydroog.com/gallery.html

Also as a warning to anyone reading this thinking of looking at the site be advised it contains some mildly explicit material
(05.07.2008, 16:11)

Stu:-
Seanan, you need to make you doctype the 'full' standards compliant version for this to work in IE7. See my home page for information.
Also you should be aware that for commercial use a donation is required to support CSSplay.
(05.07.2008, 16:34)

Jim Pass:-
I am very impressed with this gallery. I have cut it down to two tabbed pages but would like to be able to have viewers click on either tab and make that the active gallery till they click the other tab. Is this a doable process for someone very new to html?
Thank You
(10.08.2008, 17:57)

Stu:-
Jim, not possible without using javascript. See my other site stunicholls.com for this version.
(10.08.2008, 18:07)

alessio:-
Dear Stu,
is it possible to show not 4/3 thumbs (and preview) such as panorama or portrait photos?
thanks
(13.09.2008, 23:46)

Jessie Thuma:-
Hi Stu--

I used your mark up and css to create a photogallery for a website I designed for a friend. I included this comment on both the html and css files of the photogallery page, and I wanted to thank you directly for an article that was lucid and nearly as elegant as the resulting design!

You can see your work and annotation at carynscornerquincy.com. I used dreamweaver only to preview my code. The goal I set for myself was to use only css, and no tables or frames to style the site. If you have any recommendations on how to get better at this, please let me know. I'll certainly be a regular reader of your articles. Again--thank you!

"The mark up and css of this photogallery can be found on an awesome webdesign tutorial by Stu Nicholls titled How to Create a Photographic Gallery Using CSS . I made a few changes to color, but other than that I did exactly what Stu described and used his code. Thanks to Stu Nicholls and other designers who are making css fun and exciting for those of us just starting out.*/
(09.05.2009, 21:19)

CHERYL:-
Hi Stu,
Great layout!
QUESTION:
Is there any way, I can use JUST the gallery, WITHOUT the menu tabs?
ie: On a page that I have designed, I just want to show the gallery without the menu tabs.
Thanks so much in advance!
Cheryl
(05.06.2009, 16:43)

John:-
Hi Stu,
Firstly many many thanks for your efforts. They are very much appreciated.
I've been trying to use Lightbox in order to show about 8 categories. I've managed to do this. The categories appear in 2 rows of four. The main window opens lower so that you can always see the menu.
Menu question is:
Is there a way of making the main window open and stay open if the menu tab is 'clicked' rather than just hovered over.
The reason for this request is that, because I have 2 rows of menu tabs, if I 'hover' over one of the top menu tabs, the window appears but then disappears as soon as my mouse moves over the bottom row of menu tabs to get to the window. (Am I making any sense at all - it's been a long day, apologies!)
Hopefully you can make sense of that question and keep up the brilliant work!
All the best

John
(03.07.2009, 20:02)

John:-
Hi, Its John again. I've sorted that problem out by using some javascript. Thanks all the same. And a big thanks for some great work.
Cheers

John
(05.07.2009, 22:57)

Narzal:-
Hi, I love this so much!!

I just have one question, how can you make it so that when you hover over or click on a tab, it will STAY on that tab until you click on another? I don't want it to go back to default when your mouse hovers out of the box. Thanks!
(30.08.2009, 11:01)

DavidL:-
Hey Stu, Anyway you can help us on how to show 4 thumbs instead of 3? Thanks
(07.11.2011, 22:06)

Langston:-
How would I go about making everything bigger when i try it distorts the tabs
(30.03.2014, 23:38)

Jessica Price:-
Hello Stu,

My name is Jessica and I am a student at Lake Washington Institute of Technology in Kirkland, Washington. I would like to use your Cross Browser Multi-Page Photograph Gallery for a website I am building for my parent's business. Can I please get your permission? And what is the suggested donation amount?

The website I would like to add the gallery to is platinumpch.com

Thanks,
Jessica Price
jess.price882@gmail.com
(29.06.2015, 22:12)

Stu:-
There is no donation required for the use of this demo.
(30.06.2015, 12:38)



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