Mobile Friendly Website

CSSPLAY

Doing it with style

click 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

dexus:-
nice!
(06.02.2006, 19:38)

mark from ireland:-
oooooooooh. This is the answer to another prayer.
(07.02.2006, 00:02)

Al from Oz:-
Thanks Stu. This is perfect for my needs... i'll add it to my site which has lots of other examples from your wonderful site. Thanks.
(07.02.2006, 04:48)

Johan:-
>Safari 1.3.2 Mac
shows image txt no large images a:active state
(10.02.2006, 15:29)

Stu:-
Johan, Safari should be ok except that the images are not preloaded and the mouse button must be held down for a:active to stay active. This demo was intended for people with slow connections who didn't want the images preloaded. If anyone wants image preloading for this then I can easily put up another demo.
(10.02.2006, 19:20)

Johan:-
"the mouse button must be held down for a:active to stay active" that is what I meant, dear Stu.

Keep up the CSSing!
(12.02.2006, 20:57)

Vitaly Sharovatov:-
Stu, thanks a lot:) I've been using similar technics for advanced tabs system, but never thought of exploiting :active and :visited pseudoclasses! Nice, really nice.
(14.02.2006, 13:56)

Thomas from Poland:-
I have a small problem. When you show a large picture, image txt to this picture doesn't show anymore until you close it...
...by the way: Stu you're my CSS-God ;) This site is unbelievable.
(21.02.2006, 08:35)

Andrew:-
This is great and I'm going to try and modify it for my site, but I'm pretty new to css. Any suggestions on how to place the thumbs on the right side and the main image on the left? I also found Stu's article "How to Create a Photographic Gallery Using CSS" and I like the layout, but I'm worried about the time to load the page with larger images.
(22.02.2006, 02:09)

Stu:-
Andrew, I have had several people ask how to place the thumbnails at the left, right and bottom, so I will be altering this soon to show all four methods.
(22.02.2006, 10:35)

Andrew:-
That's great! If it's not too much to ask maybe you could describe how to move the captions as well. I personally prefer the way the other gallery I mentioned looks. In that one the captions change at the same time as the main image and they can be placed below or beside the image. That gallery has just about everything I need, but I don't want all the images to preload and I prefer onclick instead of hover. Thanks. P.S. It would be nice if you had a mailing list to notify people of updates to this site.
(22.02.2006, 16:54)

Stu:-
Andrew, no mailing list I'm afraid, but I do have RSS. which is much the same thing. I update this on a regular basis. Also the HOME page contains a list of the newest pages.
(22.02.2006, 22:20)

Andrew:-
How can I subscribe to the RSS? I don't see any info here.
(23.02.2006, 00:38)

Stu:-
Andrew, if you use Firefox you will see the link in the address bar. But I have added a link to the sub menu at the top right of the HOME page for IE users.
(23.02.2006, 19:27)

Kenny:-
How can I add more than the ten photos to this layout? I love the way it works, better than any of the other gallery demos.

Thanks much for your great help. I use it almost daily. You are a great teacher.
(01.03.2006, 18:45)

Stu:-
Kenny, just add the extra thumbnails and move the :hover position absolute values to clear the extra thumbnails.
(01.03.2006, 19:30)

Thomas, in Montana:-
Hi, I've been struggling with CSS for several weeks while learning how to develop my personal site for digital images. It's a delight to come upon your site, which I hope to study. You are kind to share your efforts. Thank you.
(03.03.2006, 03:16)

Roberto:-
Stu, It is amazing what is possible with css.

It is not too difficult to play with the source code (trial and error and change one thing at a time) to have picture left, the description right and a row of thumbs at the bottom.

By doing so, this gallery solution works fine in Firefox; but in IE 6.0, when you slide with moderate speed with the mouse through the thumbs, a few thumbs will be blank for a second (I have eight thumbs placed in a row).

It would be nice is there is a possibility to have a default picture in the place of the big images, let say the first picture.

Anyway, I am new at css but you have convinced me to go on this way.
(05.03.2006, 13:28)

Stu:-
Roberto, I assume you have added a :hover mode so that the images appear as you hover over each one. The purpose of this menu was to not preload the images but only use :active/:focus to show the images so there may be a delay on hover in IE. If you want no delay then you will need my first photo-gallery which has both :hover and :active/:focus.
(05.03.2006, 13:39)

Roberto:-
Stu, Indeed I have experimeted with hover, but the problem seems to be the handling of temporary internet files. In Firefox there is no option to change that, but in IE, you can have the option to check new versions of a page with every visit to that page (comes in handy if you are working on a page and want to visit the updated in stead of the cached page).

When someone has that option checked, there will be a delay for loading even the small thumbnails; every other option works fine.
The first gallery has the same behaviour but has the text below where it would be nice for the lay-out to have it beside the the big photograph.

I think only a few people has IE to check the page with every visit, so we can be aware of the problem but can ignore it.
(05.03.2006, 18:52)

Stu:-
Roberto, if you want to override the option to check new versions with every visit, then you could try using this method
www.webreference.com/programming/css_animation/3.html
Read 'One last comment' at the end of the page.
(05.03.2006, 19:07)

Roberto:-
Stu, Thanks for your quick response. It works absolutely fine. Suddenly all the examples with problems in IE begin to work properly!
(05.03.2006, 19:36)

Anyulled:-
stu, you said "the thumbnail is just a small area of the full sized image rather than a reduced image"
i ask:how do you do that? using clip?
(09.03.2006, 16:21)

Ligea:-
Stu,

I am so grateful I found your site; I've been trying to set up a gallery for one of my teachers at school who is an artist and this one seems to be the most compatible. I am new to CSS and tried to view the pages in Opera for Mac with no real success; I will have to go to school to try opera for win since I only have a macG5 at home, where I am building the site; my main question is which browsers should I be testing in to ensure maximum compatibility for this gallery?
thanks!
(09.03.2006, 23:29)

Stu:-
Anyulled, the thumbnails are produced using a paint package and creating an image of the right size from the main image.
(09.03.2006, 23:45)

Stu:-
Ligea, I am not familiar with Opera for Mac so I cannot suggest any way of seeing the source code. Normally it is just a right mouse click then select view source from the menu.
This gallery will work windows IE, FF adn Mozilla. Opera will work but need the mouse click held down to display the images. Safari on a Mac has the same problem so I am told.
(09.03.2006, 23:49)

Ligea:-
Stu,

sorry for the confusion; I tried to view the pages I built using the css/xhtml of the gallery in opera for mac and it doesn't show the large images at all.
You're right about safari needing to have the button held down, too...
(10.03.2006, 00:44)

Bibi:-
Hi Stu, I assume there is no way of keeping the active image in focus after you klick somewhere else? (to use something like this for a "change your header layout")
(10.03.2006, 08:24)

Stu:-
Bibi, not without using javascript, cookies and a separate css file. Similar to the method I used for my archived home pages (see 'WHAT HAPPENED TO MY PREVIOUS HOME PAGES?' on the home page.)
(10.03.2006, 10:06)

Bibi:-
thought so, thanks for answering
(10.03.2006, 10:30)

Ligea:-
Hey Stu, what if I wanted to allow for larger images both landscape and portrait? I've been trying to work out how to tweak the code to allow the titles to automatically reposition under a taller or shorter image rather than having absolute position/static size image box... any ideas would be very helpful.. thanks!
(10.03.2006, 19:51)

anyulled:-
thanks for answering... i looked every bit of your code withoult any result, then i tried to do it by clippnig or putting the image as a background and then positioning, all with css, but i found no similar result (thought i found something great)
(13.03.2006, 21:18)

Nacho:-
I can´t see the small images in IE but i can in firefox, opera, netscape. I can see your site un my browser IE but if i copy and cut your css in my Web. Could you help me?
(19.03.2006, 15:50)

Stu:-
Nacho, are you using a standards compliant !doctype ?
(19.03.2006, 15:58)

Nacho:-
Yes, I am using a standards compliant !doctype. 0 errors in W3C Validator
(21.03.2006, 22:01)

Stu:-
Nacho, do you have a url for your page that I can look at?
(21.03.2006, 22:44)

Andreas:-
Stu, great site, learned a lot the last couple of days, but I can't seem to get the gallery to do what I want.
I am trying to Show thums and initial picture on start. (gallery on the right, picture and text on the left like in your click gallery example).
No action on hover, but show and keep picture and description on and after click... until click outside box (reset to default pic, or click on different pic)... what am I missing?
Thanks for your great examples...
(23.03.2006, 22:35)

Stu:-
Andreas, I assume your problem is with Internet Explorer? You need to define the a.gallery:hover {border:1px solid #fff;} and the #container_top a.gallery:hover span {...}
to make the text appear on hover. The click to make the picture show is correct. This will stay on display until you click somewhere else.
(23.03.2006, 22:41)

Andreas:-
Thanks, Might have misstated the problem... I would like to display text and picture on click only ! I have a picture and description that go together and I don't want to show the wrong text driven by hover over other picture.
The a.gallery:hover... to show the border around the gallery pic works. Can i change the a.Gallery:hover span{..} to: a.gallery:active span {...} to show the text on click instead of hover ? (same behaviour like the large Picture display?)

I also saw that sequence of hover and active make a difference...
Thanks for getting back to me so quickly... Please let me know How I can include a link to your site.. once I get this thing in the air.. you've been a great help
(24.03.2006, 07:35)

Stu:-
Andreas, you will need to change the :hover style to :active AND :focus. The :active is for Internet Explorer as it does not understand :focus. :focus is for other browsers. A link back would be nice and I have a button on the home page that can be used if you wish.
(24.03.2006, 11:33)

Roy:-
I'm using this code, but the first few times I hover over my thumbs they disapear, then if I keep mousing back over them they come back and work fine. Is there a way to make them work right from the start?
(27.03.2006, 16:33)

Stu:-
Roy, I am not sure why you should be getting this problem. The hover should not affect the image status but should only make the text visible.
(27.03.2006, 20:44)

Erik:-
I would like one of the thumbnails to be shown as default on page load. Is it possible to set the state of the thumbnail to "active" using e.g. javascript? Or is it a better way to do this?
(02.04.2006, 17:59)

Stu:-
Erik, the 'Views of London' is a default image. Just change this for the thumbnail default of your choice. Position it in the correct place so that it looks as if the thumbnail is clicked.
(02.04.2006, 18:13)

Erik:-
Wow, that was fast. I have tried that solution and the "default image" gets positioned right in Firefox and Opera but ~4px below the other images in IE. I would also like the "default image" to show up among the thumbnails.
(02.04.2006, 18:27)

Stu:-
Erik,
Add
, #container_top a.slidea em to
#container_top a.gallery:active em, #container_top a.gallery:focus em
so that it becomes
#container_top a.gallery:active em, #container_top a.gallery:focus em, #container_top a.slidea em {etc.

Change slidea to whichever slide you want as default.
(02.04.2006, 18:45)

Erik:-
Excellent. It is working great. Thank you so much.
(02.04.2006, 19:27)

Franck:-
Hi Stu and thanx a lot for your great work !

I have the same problem as Nacho, I can't see the thumbs on IE while I can on every other browsers I got.

thanx for your help !
(19.04.2006, 11:11)

Franck:-
the url of the page : moreofthis.free.fr/castors/galerie.html (no www.)
(19.04.2006, 11:15)

packet.head:-
I checked your css validation on this page and got the error:

"Line: 85 Context : a.gallery, a.gallery:visited

Invalid number : display inline-block is not a display value : inline-block "

is there a way around this?
(23.04.2006, 09:14)

Stu:-
packet.head, inline-block is a valid style. It is just that the w3c validator only checks for css2 validation.
Anything beyond this is considered invalid.
However, if you look at the css3 specification you will see that it is there.
I will see if there is an alternative way to do this, but I think that this si the simplest.
(23.04.2006, 09:45)

packet.head:-
thanks for the clarification, Stu. your website is an inspiration and a half.
(23.04.2006, 15:04)

packet.head:-
almost forgot..
after playing around with it for awhile, i got it to validate, and work in IE6 as well as the latest FF and Opera builds.

i changed

display: block;
display: inline-block;

to

display: block;
display: inline;

not sure how other browsers will react, but nifty nonetheless.
(23.04.2006, 15:10)

Anonym:-
thanx for reply, Stu. The pb is when I add the a:link, visited, hover, active useful for the rest of the site...

Packet.head, I tried your suggestion, and it changed nothing on IE 6 for me. Thanx anyway :-)
(23.04.2006, 16:42)

Stu:-
Franck, it is all to do with the background:transparent on your default link styles. Remove this and the thumbnails will show.
(23.04.2006, 17:46)

Franck:-
Oops ! I should've thought about & tried it much earlier indeed. Thank you for your help and your indispensable site Stu !
(24.04.2006, 07:41)

Sasha:-
Hi Stu, you do a great job, thanks a lot. I'm writing the degree work using some examples from cssplay, it's a great help.
I have the same problem as Thomas from Poland. In IE6 text under activated image disappears (on "mouseout") after clicking on it, so visitor needs to reclick it if he wants to look at the caption. Don't know how to work out, the problem takes place also on your demonstration page. Thanks
(08.05.2006, 02:02)

Stu:-
Sasha, this is meant to happen on this gallery. The text appears on hover and vanishes when you move off the thumbnail. This way you can see something about the image before clicking it.
If you want the text to stay on a clicked image then add an active/focus state to the <span>.
(08.05.2006, 07:53)

Sasha:-
Yes. That's right. But when i move the cursor off the activated thumbnail and hover on it once more, the caption doesn't appear! The problem is that all the thumbnails show their texts except that one which is :active now. So there's need to click somewhere else to unactivate it and hover on it again to get the caption text. Sorry if my explanations suffer. By the way i think it is some kind of bug in IE that doesn't allow any hover actions on already :active object.
Adding display:block or increasing z-index to a.gallery:active span causes no effect
(09.05.2006, 00:11)

Andy.:-
Hi Stu,

I'm new to CSS, I thought it was just for background colours and images!! This has opened my eyes.

Just a quick question, I've been playing with this with some of my own images, and the thumbs are ok, but when the larger image is loaded it is way to large for the box and spans the screen and beyond! I've looked at the width settings but can't figure it. What am I doing wrong?

Thanks for a great site.

Andy.
(10.05.2006, 12:53)

gemneye73:-
Great CSS! Love it! I have a question on the thumbnails. How can I re-position the pixels to capture a different area of the larger picture. Right now, the thumbnails are displaying a corner of the larger picture and its hard to tell what the thumbnail is. thanks!
(15.05.2006, 20:47)

Stu:-
gemneye73, the thumbnails are not the large image repositioned, they are separate images taken from an appropriate area of the large image.
(15.05.2006, 21:50)

gemneye73:-
Oh silly me...but wouldn't that be cool!?!

THANKS for the fast response!
(15.05.2006, 22:04)

Stu:-
gemneye73, you could use the full size image for the thumbnails. This is held as a background image so you could define its position using the normal convention of x and y values.
(16.05.2006, 16:06)

gemneye73:-
Since I am still learning CSS, how would I do this...?
Here is a line of my code:

a.slidea {background:url(images/pictures/thumb_2120709.jpg); height:56px; width:76px;}

Would I add some type of padding?
(17.05.2006, 22:54)

Josh:-
I worked it so that it is a "click then stay" for the picture/text - however, it doesnt want to display the picture/text until the cursor leaves the thumbnail area after clicking the tumbnail.

Here's what I've currently got:

#container_left a.gallery:active span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_left a.gallery:active span {display:block; position:absolute; width:402px; height:50px; top:50px; left:525px; padding:5px; color:#fff; z-index:100;}
(19.05.2006, 17:07)

Stu:-
Josh, add a default link state in your css
a {color:#xxxxxx;}
a:visited {color:#yyyyyy;}
a:hover {color:#zzzzzz;}
For some reason only known to IE this corrects the 'bug'.
(21.05.2006, 19:24)

Marten:-
hi stu,

i've got a little problem with the gallery with the thumbs on the right side. what can i do with more thumbs? i have to use more than 20 thumbs and i want 2 buttons. one button for getting forward in the thumbs (there are only 3 displayed) and one for backward.
so that i can use more thumbs but only display 3. how can i do that? do u know what i mean?
(21.06.2006, 09:36)

John:-
Hi Stu,

thanks for this great site ! It changed a lot for me.

I have a simular problem then Marten -> I´m looking for a way to use more thumbs.. I want to use it with bigger collections, like 50+ pictures, without preloading. Is there a way where you click "1","2","3" etc. and the the first/second/third/.. set of thumbs appear ?
(06.07.2006, 01:07)

Jason (photomagic):-
Stu- You've helped me tremendously already, and I hate to ask for more assistance, but I just cannot figure this out. In my sample gallery, I'm using this click-gallery. What do I need to change so that the full-sized images are always centered? Right now, landscaped images are centered, and portraits are all pushed to the left. I tried looking at your other galleries that incorporate landscape/portraits but I can't figure this out.
(04.08.2006, 18:00)

Stu:-
This is all down to the position absolute on the em style. You will need a separate style for the portrait top and left positions.
(04.08.2006, 18:17)

Diane at Chapin Hall:-
I've been thrilled to find this site, but am such an extreme novice at CSS (despite a couple of CSS books in my office that I've actually read), that I'm having trouble picking some things apart. I'd like to know if there's a way of combining the tabbed gallery menus with this click gallery? I like the click gallery because its simple, intuitive and the captions are readily apparent, but I love the ability to have multiple galleries on one page that you just rollover to. Any suggestions on where to start to put these two together?

Thanks!
(16.08.2006, 20:40)

Stu:-
Diane, just create the click gallery pages as separate galleries, then wrap them up in another unordered list with titles per gallery. Surround these in a link that can be hoevered over to display each gallery.....simple..... ;o)
(16.08.2006, 20:58)

Jezza:-
Is there any way I can get the top row, top left image to display full size when the gallery loads? I'm new to CSS and I can't work it out! If it wasn't for CSSplay.com, I would not persevere with CSS; thanks, Stu, for posting such great code, tips and learning materials. Cheers, Mate.
(16.08.2006, 23:24)

Jezza:-
Whoops, apologies. I didn't think to read the other comments first.

And the code works a treat, brilliant!

Cheers again.
(16.08.2006, 23:44)

Diane at Chapin Hall:-
I think I get the concept, but will have to play with it awhile to figure it out!

Right now I'm trying to figure out why when I created separate formats for horizontal and vertical pictures, the click link for the vertical pictures works, but not the horizontal. Something tells me I'm overriding something else. Ah well - the joys of debugging...

Thanks bunches!
(17.08.2006, 18:01)

Tracy:-
I'm sorry to be asking this as you have answered a couple others similar. I can't get the thumbnails to be repositioned to show a different part of the image. It is always the upper left corner and shows basically nothing. Can you explain this again? Please
(29.08.2006, 07:10)

Nige:-
Hi Stu, I've been experimenting with your photo gallery for slow connections. Is there a way to make the 'active' image print..i.e so it will print preview?. I've tried using @media print & display:block etc but not being an expert i'm a bit stumped. Any tips or pointers you could give would be appreciated.
(01.09.2006, 00:40)

sigma:-
hi,
i use this demo: www.cssplay.co.uk/menu/gallery_click.html#nogo with thumbanails at right, it's very good, but i want add more thumbs, so i must insert a scrollbar, but i can do it??
thanks!!
(05.09.2006, 10:53)

Stu:-
sigma, adding more thumbnails and scroll bars is possble but it would mean a rewrite of the style. Something along the lines of my previous scroll gallery (but this doesn't work yet in IE7).
(05.09.2006, 11:26)

Stu:-
Nige, I can't think of any way using css to have a selected image print preview, sorry.
(05.09.2006, 11:28)

sigma:-
Thanks STU!!!
(06.09.2006, 15:21)

Nige:-
Thanks Stu, If i find a solution I will post it here.
(06.09.2006, 21:47)

Monty:-
Hello Stu. Excellent write ups. Is it possible when they click on the thumbnail that two different images appear instead of just one? For example if you click on the thumbnail of let say San Francisco and a picture of the bridge comes up, I want also another picture to appear of San Francisco, lets say downtown? So Image left, thumbnails in the middle, and second image to the right?
(22.09.2006, 00:54)

Richard:-
Hi Stu,

Great site and some lovely ideas.

I have incorporated your gallery into some pages that have 24 or more images in them, no problem there.

However, you siad that no preload happens for the images here, but the page takes ages to load and the thumbnails seem to be the last thing to load. When they have all loaded, it's great and the images popup immediately.

Anyway of stopping the main images preloading?

Thanks
(03.10.2006, 14:24)

Stu:-
Richard, the images have been changed in this demonstration so that they preload. If you do not want preloading then you will need to have them as background images in the <em>s which are shown on hover.
This will require a small style change.
(03.10.2006, 17:19)

Stu:-
Richard, I have re-styled these galleries to get back to the original no preloading of the large images. This is on a new page. The link can be found at the bottom of this demonstration.
(03.10.2006, 20:17)

Richard:-
Thanks Stu, Hopefully it will be exactly what I need.

Richard
(04.10.2006, 09:09)

Richard:-
Yep, worked like a dream. I have actually built the page so there are two colums of thumnails on either side of the main page and the image pops up in the middle of them. Looks great too!!

Thanks a lot Stu for firstly sharing your great ideas and also being so helpful when people have queries about them.

I'll put a link back to this site once I have finished.

Richard
(04.10.2006, 10:34)

Kathy:-
I'm thinking that you could combine the click gallery for slow connections (left thumbnails) with the shrink wrapped calendar in place of the thumbnails. That would provide an event calendar with the ability to click on a date & get the details of the event displayed on the right. Calendars are overly complicated online and this would be a popular solution I think. The event details would be where the picture caption is, and the picture could be a small decorative image, or even a transparent gif. Unless it could be done without an image at all? See why I didn't just do it myself??? LOL. If you don't want to try it, feel free to give me a few tips & I'll try to muddle through it.
Great site, thank you.
(18.10.2006, 23:24)

Camilla:-
Hi Stu

Thanks for a great site - I have learned so much from it.

I would like one of the images to display as default instead of the "views of london" text (I am not using any captions).

I tried adding #container_left a.slidea em as you mentioned to Erik but when I do that none of the other images show when you click their thumbs (all you see is the default image). Any idea what I might be doing wrong?

Many thanks
Camilla
(20.10.2006, 01:58)

Powermic:-
Whole doesn't work in Opera 9
(20.10.2006, 16:51)

Stu:-
Powermic, it does if you keep the mouse button held down, Opera has a different mouse button action to other PC browsers.
(20.10.2006, 17:37)

linden.mueller@gmail.com:-
First of all, my web design classmates tease me because whenever they ask me something, I always respond with, "You know, I saw something like that on CSSplay..." :) You're awesome.

And apparently, I can't comprehend exactly how awesome you are, because I can't get this to work! See www.accellart.com/see/gal_gallery.htm for an example of the weird problem I'm getting. It looks like the full-size image isn't positioned right, but I can't fix it.

*I have only resized one thumb and one full-size image, so you will mostly see a lot of alt text
*I'm using XHTML 1.0 Strict, and it validates
*At this stage, I've tested mostly in FF
(09.12.2006, 20:12)

Stu:-
linden, the link is broken, is it correct?
(09.12.2006, 20:16)

linden.mueller@gmail.com:-
Oops... There's a "g" where a "c" should be:

accellart.com/see/cal_gallery.htm
(09.12.2006, 20:58)

Stu:-
linden, you had a couple of lines missing from the bottom of your stylesheet /* common styling for all galleries */
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}
This is the bit that hides the text.
You also needed to tweak the left and top position of the large image because you have an extra thumbnail width (6x2)
www.cssplay.co.uk/test/accellart.html
is the layout as it should be.
(09.12.2006, 21:22)

Marian:-
This examples are great and I'm trying to learn from them to create a portfolio of artwork where the thumbs and images are different sizes. I've managed to get my large image to show when the mouse hovers over thumb but I can't work out how to make the large image stay on screen when the thumb is clicked and the mouse moved away from the thumbs. Thanks.
(22.12.2006, 22:22)

Michael:-
Thanks for the demos... I am working on a gallery project and like the "Click Gallery" example. However, I am serving many galleries using a SQL Database with links to the actual images on the harddrive.

Would you be able to advise me on how best to dynamically build the gallery ( from 1 to 10 images) once I have the image names and the links to them on the harddrive?

Your insights are much appreciated.

Michael
(27.12.2006, 00:59)

Ben:-
Hello Stu,

Thanks for the great site.
I have been using the script you have for the "Views of London" gallery, but I have more albums which I have grouped into 10 images. How could I put all the photo albums on one page, without repeating the CSS code for each one. I would like to group the pictures in folders and the CSS just to grab images from different folders. The images could be named something basic (for example: pic01,pic02,pic03) in each folder.
Could you please help me?

Thanks for your time and effort.

Ben
(02.03.2007, 06:13)

Graham:-
Hi Stu i was just getting my head around css when I came accross your most excellent site. Now "i'm chomping at the bit" in wanting to implement all I can. However Im unsure how to use this photo gallery without the tutorial linked with it . Could you possibly guide me to a "how to" or something . Thanks and lookforward to your reply
Graham
(15.03.2007, 22:09)

Stu:-
Graham, there is a tutorial for this type of gallery on this page www.cssplay.co.uk/menu/gallery.html
just click 'tutorial' at the top of the page.
(15.03.2007, 22:12)

Graham:-
Stu thanks for your prompt reply.
all the best Graham
(17.03.2007, 09:52)

Ben:-
Hello Stu,
Once again thanks for your expertise.
I have posted a question previously, and this is related to that question.

I am using your script of "Gallery for Slow Connections" - Views of London on a site and I like it very much.
I know there can be more done with it to personalize it, and I like that you've kept it quite simple.

My challenge is this:
I have several categories for albums, whic are all on one webpage.
Let's say Category A, Album 1 (with ten pics)
Category A, Album 2 (with ten pics)
Category A, Album 3 (with ten pics)
Category B, Album 1 (with ten pics)
Category B, Album 2 (with ten pics)
Category C, Album 1 (with ten pics)
For each category I have a different background design (eg. Category A - sports design, Category B - music design, ...)
I would like not to repeat the same background design for every 10 pictures, therefor I would like to switch the pictures displayed (with something like tabs)(eg. Album A: pics 1-10, next pics 11-20, after that pics 21-30,...) Would this be difficult to do with CSS?
Any suggestions/help would be appreciated.

Thanks,
(27.03.2007, 05:26)

Aaron:-
I seem to have put my comment in the wrong place, as I can't find it... I am using your excellent gallery in a class project (my portfolio, actually), and it seems that text does not appear using IE6. It works perfectly (text and all) under FF and Netscape, but for some reason I cannot figure out, text does not appear in IE6. The page can be found here: www.freewebs.com/tkgg/portfolio Any help would be appreciated.
(09.05.2007, 18:28)

Ben:-
Hi Stu,

I have a simular problem then Marten and John -> I´m looking for a way to use more thumbs.. I want to use it with bigger collections, like 50+ pictures, without preloading. Is there a way where you click "1","2","3" etc. and the the first/second/third/.. set of thumbs appear ?
(10.05.2007, 06:28)

Valdecir Carvalho:-
Hi there! Gr8 site! I would like to ask you if is it possible to add one of these galleries, in particular this one : Photograph Gallery for fast download speeds in a Wordpress post! I've been trying but with no lucky :( Thanks again.

Rgrds,

valdecir
(15.05.2007, 23:07)

Stu:-
Unfortunately I have no knowledge of Wordpress so cannot say if this is possible or not. Perhaps someone can comment on this?
(15.05.2007, 23:20)

Joe:-
Hi Stu... css genius no doubt

I seem to have gotten the galley (right thumbs) working in Firefox but IE 7 trashes it. As you attempt to click thumbs it throws the thumbs into the main image area? I added your strict DOCTYPE thinking that might be it but no luck. The thumbs jump into the main image area?
(22.05.2007, 18:45)

Joe:-
Stu...ADDENDUM

This is obviously something I'm doing. I am "choke ... gag" putting your DIV's into a table cell. Your galleries work fine in IE7
(22.05.2007, 18:50)

lindsey:-
is there any way you could split up the thumbnail section and the large image section so that i could stick the thumbnails in my sidebar and the large image section in my contect section? i've been messing with everything, but nothing i do seems to work correctly and quite frankly i'm not sure what i need to be changing to make it work right. my sidebar is name 'sidebar-b' and my content area is called 'content'.
thanks so much!
(16.07.2007, 15:27)

Mark Hutchinson:-
Hi Stu,

Long time since Portland! I see you just keep improving. Sadly I do not have the time now.

I like the gallery code and utilised it on some pages. Sadly I did a bit of tweaking to get it right and for some reason it is not working in Firefox now. perhaps I should not have gone overboard with the fancy stuff like "glow", but it does look good on the site, if only in IE7 (sigh).

Anyway, glad to see you still flying the CSS flag and trying to persuade us to use it.
(26.07.2007, 19:53)

jnow:-
Hi Stu,

There is one issue with this menu - browsers downloads the target image first and the thumbnail later. It looks like browsers give higher priority to content of the <a></a> section than to the background style param even if the content has the style param display set to none.

Fortunately there is vary simple resolution!

It is enough if befor the menu you "display" all thumbnails with style param display set to none!

Simply put following html code before the menu for yeach thumbnail:
<div style="display:none;"><img src="london/thumb2.jpg"/></div>

Beat the browser with its own weapon!
I propose adding this small trick to the menu code.

Apart form that, very good menu!

Cheers
(02.09.2007, 11:06)

David:-
I'm having a real problem getting this to work in IE6. When I first visit the page with my gallery on (very first visit - before the images are cached), and click on a thumbnail, sometimes nothing happens until I move the cursor off the thumbnail. It seems to be random as some thumbnails are fine. Once I've looked at all images there are no problems. I have tried the exact same code as is here, and still have the problem. Any help is greatly appreciated. I really want to use this css gallery. Thanks in advance.
(07.09.2007, 17:57)

Stu:-
David, check that you have a standards compliant doctype and that you have the default links styled.
a, a:visited {color:#000;}
The style can be anything you like, but the default links MUST be styled for this to work in IE.
(07.09.2007, 19:20)

David:-
Stu. Hi.

Thank you for responding to my comment. It is much appreciated. I have decided to use your 'simplest photo gallery' method instead. Which works a treat. So thanks.

I also emailed you to enquire as to whether you would mind me using this gallery method in one of my "web templates" (which I make available to download from my site www.dcarter.co.uk)? I will include a link back to cssPlay on every page of the template.

Thanks. David.
(08.09.2007, 14:46)

getnit:-
Hello,

I am new to css and images, my little site has been improved because of your code. Anyways, i wanted to get a little help on having a main picture when my page loads. As of now "views of london" is the main image type thing. Can i get a image as my main pic to start the page? I cant figure it out.

Thanks for all your help.
(11.10.2007, 23:46)

Debbie:-
Thank you Stu for your great site. I've gotten such great information here.

My gallery is working fine in IE7 but not in FF or Opera. I've the active/focus on the span, but in FF it won't stay visible when the thumbnail is clicked although the image does (there's a background image there too that I'm trying to fix right now, so you may see that popping out from below the selected image).

In Opera, neither the image nor the span is visible unless the thumbnail is clicked and the mouse keeps it that way. Can you tell me what I'm doing wrong here?

www.redkitecreative.com/projects/rm/projects_pelicanlakeranch.php#nogo
(18.10.2007, 23:03)

wcDogg:-
Stu –

Thanks for such a great site – I’ve used several of your designs and they all work like a charm!

For “An :active Photograph Gallery for fast download speeds”

I wanted to know, is there a way to center images when the image size is narrower than 406px?

Thanks!

- wcDogg
(09.11.2007, 23:06)

wcDogg:-
Heh, heh -

Figured out how to center photos when narrower than container:

Replace:
<div class="thumbs">

With:
<div align="center" class="thumbs">

This centers the title and caption as well.

Have a good one!
(13.11.2007, 17:51)

George:-
Hi,

I really like this gallery, its very effective. However, it doesn't seem to work in safari. The large image will show when you click on the thumb but then disappear as soon as you move the cursor away from the thumb. Any suggestions?
(06.12.2007, 15:43)

Christine:-
I like your galleries in particular I want to use the gallery for fast loading pages. But I am having problems with it, the main image shows along with the small image when viewed in a broswer, so I must have done something wrong but cannot figure out what.
(18.02.2008, 01:04)

Monty:-
This is awesome and I have been using it the last couple of months. One thing someone pointed out to me they found frustrating though. If they click on the thumbnail the image pops up like it should. But when they click off the page or try to use the side browser to scroll down the image disappears.

How do I make it so that the larger image only disappears when the next thumbnail is selected rather then disappearing when you click anywhere off the thumbnail. I hope that made sense.
(18.02.2008, 19:36)

Stu:-
Monty, you will need to use a javascript version of this menu if you want a clicked image to stay on screen at all times. See my other site stunicholls.com for javascript galleries.
(18.02.2008, 20:25)

Jpn:-
I found a javascript to force focus in safari, but don't how I have to implement it... maybe someone has an idea and want to helps me? Or maybe stu can implement it in his demo?

<script type="text/javascript">
function getfocus(id)
{document.getElementById(id).focus()}
</script>

Then for each instance, you include

id="xxxxxx" onclick="getfocus(id)"

This works, but then it makes a weird outline, in order to get rid of it you need to add:
outline: none; to your css file
(18.02.2008, 22:38)

Monty:-
Awesome I'll check that out. Thank you for the quick reply Stu.
(19.02.2008, 21:47)

Jessica Lorber:-
Dear Stu,
Thanks so much for this jammin gallery. I´ve put it up at www.gonzalocores.com/reciente1.htm. I´m new to CSS and trying very hard to make the captions stay put when a large image is up. Any suggestions? THANKS!!!
(20.02.2008, 15:11)

steve:-
First off thank you for your hard work. I'm working on the gallery and want to load an initial image when the page loads. Basically I want to mimic that I just clicked the first thumbnail without actually clicking it. I've played with the code for days but can't seem to figure it out. Any help??
(30.10.2008, 01:21)

Dean:-
Stu, One quick question. Within the div how can you push the thumbnails all the way to the right and the large photo all the way to the left. When I look at the layout on a wide screen it's not very nice looking all squashed right.
(18.11.2008, 15:51)

gabriele:-
Hello,
I can't find the code (HTML and CSS) to use your demonstrations on my web pages.
Could you help me, please ?
thank you
gabriele
(25.08.2009, 09:47)

benny:-
hi,
found a solution for the bug in safari:
1. add tabindex="0" to the <a> tag
2. to solve the outer glow problem after add:
<style media="screen">
#test { outline: none; }
</style>
and in the <a> tag add: id="test"
thats it
@ gabriele: have a look at source page of this site.
ciao
(17.11.2011, 22:47)

Stu:-
I have used tabindex in my newer galleries that use a click action, and also outline:none; to stop the :active/:focus highlight.
(17.11.2011, 22:55)

Benny:-
Is it possible to see not only the thumbnails on load, but also one of the big pictures, when the gallery loads first time?
Thanks.
(23.11.2011, 23:49)

L.A.M.:-
Stu, you've been an endless source of knowledge and help over the years since the days of Portland hosting. We want to thank you hugely for all your help and wish you and your wife good health and prosperity.
The London Allstar Majorettes
(24.01.2012, 20:54)

LAM:-
Hi Stu
This no longer works n the iPad. Can it be fixed?
Many thanks
(12.09.2012, 14:45)

LAM:-
Correction to my last post.
The above solution from Benny with a little tweaking worked. Two clicks are needed instead of one, but it's a good workaround.
Many thanks
(12.09.2012, 15:06)



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