Mobile Friendly Website

CSSPLAY

Doing it with style

Simple photo-gallery 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

Rodney:-
Does not work in Opera 9 >> Photos appear on click but dissapear again. Too bad an otherwise great browser keeps messing up CSS.
(01.08.2006, 09:04)

Stu:-
Rodney, this is always a problem with Opera and I believe Safari in that the :focus state is only current whilst the mouse button is held. Most other browsers keep the :active/:focus state until the next mouse click.
(01.08.2006, 10:00)

steve:-
stu :: Who did the photos? (they're breathtaking)
(01.08.2006, 18:40)

Stu:-
steve, all the photos in this album are from the stock xchng - www.sxc.hu/ and are supplied free of charge.
(01.08.2006, 20:36)

Rodney:-
Stu, thanks for your reply and the link to the stock xchng.
BTW, I visit your website almost daily, very educational on CSS, great stuff here, thanks for that.
(02.08.2006, 19:59)

Frans:-
Very very nice. But maybe it's nicer to show make it possible to show one pic on startup. And is it possible to have a titlebar or.and place for a description of the pics?

sorry for my poor English
(12.08.2006, 22:39)

Stu:-
Frans, it is always possible to do this , but I will leave it up to you. Many of my example do this so it is a case of combining the styles from several of my demos.
(12.08.2006, 22:47)

Frans:-
Well I am one of those people who is good at copy and paste codes. but I am not capable of doing anything with CSS that asks more then copy/paste.

But that is a pity for me. But your site is really nice. One of my favorites.
(13.08.2006, 16:53)

benoit:-
Is it possible to have images not disappear when focus is lost (when you use scroll bar ...)
(24.08.2006, 08:14)

Stu:-
benoit, use Firefox :)
Unfortunately IE does not act the same way. You could use the scroll wheel.
(24.08.2006, 22:00)

Andrew:-
Stu wrote: "Frans, it is always possible to do this , but I will leave it up to you. Many of my example do this so it is a case of combining the styles from several of my demos."

I'd also like to see a default image when the page loads. I may be able to figure this out, but I was looking for an example of a gallery that does this and couldn't find one. Can you recommend one that has the necessary styles? Thanks and keep up the amazing work.
(11.10.2006, 19:45)

Stu:-
Andrew, www.cssplay.co.uk/menu/scroll_gallery.html uses a default image of a camera. But in this case I have now added a square default image to the background div on this example which gets covered by the gallery images. You could have a landscape or portrait image instead but will need to add borders to the pop up images so that the default image is always covered.
(11.10.2006, 20:24)

Andrew:-
Wow that was fast! That's certainly better, but I was actually thinking it would be nice if one of the gallery images loaded first. Is that a possibility?
(11.10.2006, 21:03)

Stu:-
Andrew, it would not be possible to have one of the gallery images display whilst the other are invisible. However, as I pointed out in me previous post, you could have a gallery image as the background image of the top level div. If this was a landscape image it would be partially visible when a portrait image was displayed. So you would need the full size images to be 360px by 360px with grey left/right borders for portrait sizes.
(11.10.2006, 21:50)

Stu:-
Better? :)
(11.10.2006, 22:09)

Anonym:-
I appreciate the work you've done, and maybe I'm being overly picky, but it would be a bit of a pain to maintain a gallery if you had to place every vertical image into a square box. I'd really like to find to an easy to update css gallery that will accommodate images of different sizes and aspect ratios.
(12.10.2006, 05:48)

Stu:-
There's no pleasing some people :)
Try this version which use normal portrait and landscape images with the left/right border for portraits added by CSS.
(12.10.2006, 15:30)

Andrew:-
Stu wrote: "Try this version which use normal portrait and landscape images with the left/right border for portraits added by CSS."

Looks good! I'm so stuck in my old ways I immediately thought I'd have to add the borders to portrait images in Photoshop. As long as all the images have the same aspect ratio this would work fine.

Now what about captions? ;-) I'm going to try and figure it out from your other examples, but any advice would be much appreciated. Thanks.
(12.10.2006, 19:50)

Stu:-
Have a look at www.cssplay.co.uk/menu/menu_gallery.html which adds a caption when you hover over the full size image.
(12.10.2006, 19:58)

Andrew:-
I've been messing around with this stuff all day, and I just can't figure out how to add captions. I also added some more numbers to the list, and then tried to center the images horizontally, but I had to give up on that as well. :(
(13.10.2006, 04:25)

Bill:-
This is what I have been looking for to add to a site, but the code is not listed for it. Am I doing something wrong? Please let me know how to get the code so that I can play with it. Thanks
(18.10.2006, 01:46)

James:-
I'm a photographer that's been trying for years to get away from flash- it's just too much of a pain to update (and I update frequently)- your "Simple Photo Gallery" is almost exactly what I've been looking for. One question though (and I'm very much a CSS novice), how hard would it be to implement an forward and backward arrow type scrolling mechanism, i.e " <- 01 -> " where the number changes to show which image you are looking at when either arrow is clicked? I've poked around on your site without finding anything, but maybe I've missed it? Thanks again for all your hard work, I've learned more CSS from this site than all others combined!
(19.10.2006, 21:22)

Stu:-
James, this sort of action is not possible with CSS, you will need javascript to do this.
(19.10.2006, 22:17)

Powermic:-
Bugs in Opera 9, when click or curson on
(20.10.2006, 16:54)

Stu:-
Powermic, Opera (and Safari) have a different way of interpretting the mouse click. Other browsers retain the :active/:focus state when the click button is released. Opera and Safari only retain the :active/:focus while the mouse button is held down.
(20.10.2006, 17:33)

Hans:-
Stu, I wanted to share your simple Photo Album on my Blog, see beautifulbeta.blogspot.com.
In Firefox however it doesn't render as it should. On your site, Firefox renders it okay. Could you please give me some hints on how to correct this?
(24.10.2006, 22:36)

Stu:-
Hans, your xhtml appears to have added <br /> tags.
If you remove all the <br /> tags between
<div id="album"> and </div>
it should be ok.
(24.10.2006, 23:30)

Hans:-
Stu, thanks for your help! It seems that the Blogger editor, even when used in HTML-mode, adds the &lt;br/&gt;-tags without displaying them as html. It now works okay.
(25.10.2006, 21:17)

Yacahuma:-
There need to be a small fix in the css
#album img{
border:0px;
padding:0px;
}
In my case I have a previous div that was messing up the image placement. By adding this I overwrote those settings
(08.11.2006, 17:36)

Yacahuma:-
HELP, How can one image be loaded when the page loads? It seems to work on cssplay site but not in mine. What am I missing??

Every time I open my page it comes empty. I have to click a number in order for the images to appear. Thank you for any help
(08.11.2006, 17:43)

Stu:-
Yacahuma, the initial image is loaded as a background image for the gallery
#album {.....background:#eee url(gallery/deer.jpg) 0 40px no-repeat;....}
(08.11.2006, 22:31)

Yacahuma:-
Stu, thanks, It works now. I dont want to detroy the beauty of simplicity, BUT, what will be required to make it so that the images change on- hover instead of on-click.
(10.11.2006, 12:20)

Stu:-
Just change the :active / :focus to :hover
(11.11.2006, 19:54)

imadeit&itdoenotwork:-
this is really nice but not cross-platform. what is the point of emulating this.

thanks but no thanks
(01.12.2006, 08:39)

Stu:-
All my demonstrations are experiments in CSS. This one works across all the major browsers, but if you do not want to use it then that is your choice. I am not forcing this on anyone :)
(01.12.2006, 09:17)

Alice:-
Hello,
I'm trying to build my portfolio on-line, and used your photo gallery to display photos of the projects. It worked out very well, except for a little detail...
The problem is that the gallery background image appears in the split second that it takes to change between pictures. Please see it at www.alicebernardoarq.blogspot.com .

What can I do to correct this? Or how can I make the 1st img appear by default (when I open the gallery), instead of having a bground image?

I would apprecciate your help, since this gallery is really important for me, and I really don't know anything about css...

Thank you for your tutorials!
(20.01.2007, 22:00)

Stu:-
Alice, all you need to do is make a change to the background color for the :active state. At the moment you have the same (gray) background for :hover and :active.
Change the :active style to
.gallery li a:active, .gallery li a:focus {
background:#888;
color:#fff;
}
and it will work.
(20.01.2007, 22:29)

Alice:-
So simple...
Thank you!
I'll link back to your site when I get everything ready.
(21.01.2007, 13:44)

sean:-
I've implemented this code, and have had reports that it doesn't work on a MAC... Is this true? (they say that they have to click and hold down the link for the image to stay active) ... can this be fixed with just using "hover" ? help ?
(25.01.2007, 17:06)

Stu:-
sean, Safari and Opera only keep the :active/:focus state while the mouse button is held down. You can change the :active/:focus to :hover to make it work in the same way on all modern browsers, or just put a note that Safari and Opera users should hold down the mouse key.
(25.01.2007, 17:22)

Jenny:-
I must tell you -the design of your photo gallery is the best and has so much to offer. I'm a novice at css and I was just wondering if I might ask how to make the numbered buttons appear on the left side instead of the horizontal line at the bottom?
(28.01.2007, 00:54)

Steve:-
Really like you experiments in css, a funtastic medium for graphically inclined people, well done and if I wasn't so skint I'd donate.
(25.02.2007, 02:10)

Chris:-
Great site Stu thanks - have been visiting regularly the last few months and learnt a lot about CSS. Unfortunately not enough to be able to succesfully adapt this to display a caption for each image. Tried learning from the scroll gallery but 2 afternoons later I haven't quite cracked it .. any hints perhaps?
(26.03.2007, 21:57)

Stu:-
Chris, add the caption text inside each link and enclose it in a <b>...</b> tag. Make this hidden
.gallery li a b {
position:absolute;
top:-24px;
left:0;
visibility:hidden;
}
Then make it visible on :active/:focus
.gallery li a:active b, .gallery li a:focus b {
visibility:visible;
}
You may also want to position the large image higher so that the caption is under the image,
if so then adjust:
.gallery li a img {
..
top:-320px;
..
}
(26.03.2007, 22:16)

Ken:-
I'm stumped. How are you making the background image disappear when the other images are displayed?
(27.03.2007, 15:15)

Ken:-
Of course, I would figure it out shortly after posting. You're using a wide border on the portrait images to hide the landscape background image. I love your CSS stuff...but I'm trying to overcome an issue. I want to display images without specifying whether they are portrait or landscape and I want the first image to display when someone comes to the page. From what I can see, your scripts will do one or the other, but not both. Suggestions? Thanks!
(27.03.2007, 15:38)

Ken:-
I decided to go with javascript for this particular task. But I'm definitely going to browse your site some more. You have some impressive examples. Thanks!
(27.03.2007, 18:43)

Anonym:-
Stu, Many, many thanks for your help above. Works a treat - and even better, I understand how it works!
(13.04.2007, 14:28)

Chris:-
Sorry, comment above from Chris!
(13.04.2007, 14:29)

Anonym:-
I use this album just a few days and it seems that my IE 6.0 does not show images on hover/mouseklick, there is just an empty box only the numberboxes are reacting correctly. Netscape and Firefox work fine.
Any idea?
(11.05.2007, 14:20)

Stu:-
Anonym, the usual reason for this not working in IE6 is that you are not using a standards compliant doctype.
(11.05.2007, 14:51)

Learner:-
I use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "xxxx://www.w3.org/TR/html4/loose.dtd">

Is this the reason of the problem? :hover works, but it is not the solution I want to use.
(12.05.2007, 08:57)

Angela:-
Hi Stu, have you redone your site lately? I can't find what I'm looking for and am sure I first saw it on your site. I am looking for an image gallery that had a horizontal thumbnail scoller with the large image positioned up above. The large image had the capability of including captions. Can you please direct me to that demo? Your current demo doesn't have captions.
(01.07.2007, 15:42)

Stu:-
Angela, try www.cssplay.co.uk/menu/scroll_gallery
(01.07.2007, 21:14)

J.:-
Hi, Stu! This is a lovely demonstration, and I am attempting to implement it in my current project.

Unfortunately, I cannot seem to get the position correct for the images when they appear, and this is showing true in both FF and IE. I'm pretty sure it is because it has created a double row of numbers.

The live test is here:
www.lostinxlation.net/sandbox1/gallery.html

And the css is:
www.lostinxlation.net/sandbox1/testcss.css

Any ideas on what I am doing incorrectly?

Thank you in advance for your time and attention.
(18.07.2007, 23:10)

Tom:-
Hello Stu!

I'm trying out your "Simple CSS photo-album » 31-07-2006". Seems to work in most browsers I've tried, but I can't get it to work on IE6. Any ideas why this should happen?

Cheers.
(09.08.2007, 06:24)

Tovi Ellesse:-
YOU ARE THE MAN!!! Your site just made my day. I picked up this gallery in particular and maaaiinnnnn all i can say is THANK YOU and God bless. A lot!!
(23.08.2007, 20:55)

beakersoft:-
Hi,

First thing, thanks for this code, very useful. One thing i would like to be able to do is once the picture is displayed, keep that one displayed even when the user clicks somewhere else on the page. Can you do that with CSS or would it need java?

Cheers
(29.08.2007, 14:19)

libbygudzdesign:-
well, i don't know very much about any of this stuff. i don't even know if it's possible to use this on my greeting card myspace page. (www.myspace.com/libbygudzdesign) i hope you aren't laughing at me right now. basically, i need something like this so people can get an enlarged view of my cards to see the details (it's all in the details!). please help me. i know i'm an idiot. i just don't know if it's even possible to use this type of thing on a myspace page--i am using a div overlay and i do understand some html language.
(21.09.2007, 01:09)

stephanie:-
I do admire your work; wonderful ideas. I was wondering how I might get the horizontal row of numbers to become vertical *alongside the photos*?
(28.09.2007, 03:31)

Chris ash:-
Stu i have been trying to modify this gallery so the thumbnails are on top of the large image version... but im ot having much luck.

as soon as you click a thumb to load a large image, the thumbnails are now underneath the large image, playing with z-index was no use either.

any ideas?
(13.03.2008, 04:56)

Alex:-
This is great Script, Thanks very much for all the hardwork behind this script.

I would really like to have the images change automatically, every let say 30sec to 2min even if the user has not clicked on the next image. javascript would be required am welling to pay for this if anyone can help.

here is what i want, the Simple CSS script here just the way it is now is automatic script that will change the images from 30sec to 2min even if the user has not selected the next image.

Please advise Any help would be greatly appreciated and am welling to reword the person that helps.
(07.05.2008, 17:29)

John P:-
Hey Stu,

I started using this script but realized that it isn't working in Safari 3.0. When you click the thumbnail the content image doesn't stay visible.

Is there a fix?

Thanks!
(31.07.2008, 18:24)

Andrew:-
Hi.

I would like to try this code on my page. But I wanted to have 5 thumbnails down the left hand side which, when clicked, show the larger image respectively. How would I adjust?

Andrew
(02.02.2009, 22:22)

Daniel:-
Hi.
Nice gallery, but the problem is:
in internet explorer 7 (don't know if its better in 8 beta version) the image disappears when you click on the scroll bar or anywhere on the page.

how can i turn this off?

thanks,
daniel
(04.02.2009, 16:30)

Cathy:-
I can't figure out how to get the pictures to display.

I see the box and the numbers but nothing else. I am sure it is something simple if someone could help me out please.

thanks

catherinesmithfilms.com/photos.html
(20.04.2009, 20:47)

Sandra:-
I love this gallery, and have adapted it to suit a simple image based site I'm working on. The only problem I found is that the images don't stay visible in Safari (pc) unless you continually hover over it's corresponding box. Any solutions for this?
(22.12.2009, 17:08)

Doug C.:-
Hi Stu. Great little slider. I was wondering how to get the code for the "A simple CSS photo-album" to put it on my web site? I didn't see a download link anywhere.
(25.07.2010, 09:13)

Doug C.:-
Ah, nevermind. I took a look at your page source and found it there. Tried using it as is in Dreamweaver by inserting my own images, but it doesn't work too well. I just wanted a simple slider to show my one-panel comics. They're all the same size so I didn't think it would be too hard with your code, but it doesn't work. Images come out all over the place and the buttons disappear.

Oh well, back to the drawing board.
(25.07.2010, 09:35)

Ucha:-
good
(16.10.2012, 01:25)

ark:-
How can I make first box with letter "1" active when first open page?
Thanks
(16.10.2012, 13:31)

Stu:-
This is not possible using just CSS with this gallery.
(16.10.2012, 13:57)



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