Mobile Friendly Website

CSSPLAY

Doing it with style

sliding 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

Stephen:-
You have done it again another greeat bit of CSS.
(01.07.2005, 00:55)

John:-
http://hb.cult.bg/ps/?seek=02.animals&and=pn6#pn6
is a similar "on click" version. Your rollover example is much smoother
(01.07.2005, 14:19)

Stu:-
John, they look similar but use totally different methods. Your link example does not compress the whole image and also requires the page to reload to display the selected image (using query strings in the links). I will probably add the horizontal method soon.
(01.07.2005, 15:17)

Jo-an:-
Stu did you post on archivist.incutio.com a question how to achieve a 3 columnar css layout with definition lists? If so - this may help <http://www.brunildo.org/test/float_clear2.html>
(01.07.2005, 17:25)

Jo-an:-
Sorry if I am wrong
<http://archivist.incutio.com/viewlist/css-discuss/July+2005>
(01.07.2005, 17:33)

Stu:-
Not me Jo-an. Must be a different stu ;o)
(01.07.2005, 18:50)

Robbin:-
Hi Stu, love your site.

About the sliding photo-gallery, I would like to know if this is possible without using the <img> as an opener. I am think of using this effect on my students photo page. I am a teacher and I would like to have 5-8 classes in containers with thumbnail photos and on hover opening the class with all the thumbnail photo's.

I have this example working (dl-dt-dd), but it is not working as cool as your images..If you are willing to discuss/help, please contact me wisbin at gmail.com
(02.07.2005, 19:52)

Daniel:-
very nice!
(03.07.2005, 19:54)

FreeBee:-
I've been here a few times now, and I'm amazed at the genius every time! Very impressive, Stu. Thanks!
(03.07.2005, 22:52)

mag:-
Hello Stu! Pretty little thing. Is it possible to use your script for our web projects? I would put a copyright next to it...
(05.07.2005, 09:06)

Stu:-
mag, yes anyone can use this script and a copyright would be nice.
(05.07.2005, 10:43)

RossBruniges - cssDiv:-
very nice stu - very nice indeed :>
(05.07.2005, 14:27)

Anja:-
This is the most amazing css-site I have ever seen. Real innovating. Thanx for sharing it with us lesser geniusses :)
(06.07.2005, 00:09)

Stu:-
Glad you like it Anja, the pleasure is all mine. But remember this is only a playground for CSS and many of the examples are not for the 'real' world ;o)
(06.07.2005, 11:10)

perke:-
well, this is a "playground" ... very cool playground indeed...another jewel here is jawdroping :) thanks Stu
(08.07.2005, 23:03)

Wishmerhill:-
Hi Stu!
As soon as I have time, I'll try to make this gallery clickable, so that you can get a bigger copy of the picture in a new page. You think it's possible?As far as I see, there should be no problem...
Great example, by the way!!!
(24.07.2005, 10:10)

Stu:-
Wisherhill, to make the gallery clickable just change the #nogo to a valid link page/image.
(26.07.2005, 15:33)

sayami:-
Nice to meet you.
It became reference very much.
(09.09.2005, 09:01)

Staci:-
Hello,
Nice site. I saw a tutorial of yours for a photo gallery done completely in CSS. Is there a way to have the larger image stay in the frame when you click on it instead just doing the "mouseover"?
(10.09.2005, 23:13)

John:-
Stu: Very nice and thought provoking! I have been trying to get the vertical gallery working the other way up! Background/title at the top and with the images opening up. Any thoughts
(18.09.2005, 20:36)

michael from Holland:-
Hi Stu, as a beginner I would like to know how the horizontal slie show css code looks like I have c&p the vertical one and as you mentioned it could be easily made horizontally. But how? pls help. By the way I like your site a lot it is very professional looking.
My email is michael@lojawebdesign.nl
(27.09.2005, 10:24)

Stu:-
michael, the horizontal version css is embeded in the source code for the page, and I hope that you like the new layout as much as the last.
(02.10.2005, 18:04)

elffie:-
Hello, I love the compressed photo galleries. I would like to use them on myspace.com but the css and html are not working though they are allowed. For example I tried to use the html format for the sliding photo gallery but viewing it on myspace.com only shows the pictures on top of each other and bullets on the left of them.

I have a lot of pictures to share, but I dont want to take up too much room. Can you help, please. Thank you...
(22.10.2005, 18:15)

Stu:-
elffie, it sounds as though you are not linking correctly to your style sheet. Can you post the url?
(22.10.2005, 18:55)

michal:-
Hi Stu,
I must say, I love your sliding-gallery code. I told someone about it and they loved it as well. I, for one, really like how the galleryie doesn't resize the images but simply places them one on top of the other. To make it easier for my friend to adapt it, I created a little Excel spreadsheet where you enter a few params and it'll spit out the code for you. I made the spreadsheet for him but was wondering if you'd be interested in having a copy. (It might also need one last check to make sure that the parameters are calculated properly).
If you would like to have it, please tell me where to send it/upload it.
Thank you again, your whole website is a real source of inspiration.
(24.10.2005, 22:50)

Michael:-
Hey Stu-Great stuff, as a beginner in CSS your site has been a great reference. I really like these sliding galleries. I am a photographer and am adapting this code for my site but I also do quicktime 360 images. I am having a problem getting them to display. any thoughts?
(11.11.2005, 20:31)

Leastest Genius:-
Hello Stu:

Thanks again for the wonderful reference. Have a client barking up my tree for a site yesterday and want so bad to make her photo/press/flyer gallery like your rollover example. Having trouble with getting photos to show up inside thumbnail boxes. Just now figured out I could link the source file for the bigger ones... HELP! :>//
(18.11.2005, 19:45)

Leastest Genius:-
OK I think it's fixable now just the ../ is what was messing is up both in xhtml and in the css. All I have to do now is tweek the sizes and fix a couple things. Woopeeee!! Thanks again for your fabulous reference. Don't know what I'd do with out you :)
(18.11.2005, 20:16)

Avril Bayer:-
Hi Stu!
I've been having fun with your stacked photo gallery, but would like to use an image for the "top of the stack" as well. Could you kindly help out? Thanks in advance!
(08.01.2006, 08:41)

Stu:-
Avril, the easiest way would be to use the gallery background image to hold the 'top of stack'. Otherwise you would need an extra list item to hold the image but not have it as a 'linked' item. This way it would not be compressed but would get pushed out of site (not compressed) when the other photos are selected.
(08.01.2006, 13:56)

Linda:-
Hi Stu, I love your site. I am a student in Web Development and Web site Tools courses. I found your site while researching on the assignments. I posted the link for the other students. I hope you don't mine. Thank you for including the source code of the Photo Gallery. I am also a photographer and can't wait to try this technique on my photos and web site.
(11.01.2006, 00:53)

Avril Bayer:-
Hi again, Stu!

I did try replacing the gallery background image with another, but the image was sliced and came up in two pieces. Floating it to the right helped, though, and it is also easier to slide the pointer from left to right (if you're right-handed). Haven't tried an un-linked image as yet. Going to play with them some more. Thanks again!
(11.01.2006, 06:18)

Stu Nichols:-
Hi Stu!

I'm named Stu Nichols as well ;)
I just did a search on my name and ran across you,
LOL, take care,
Stu
(28.01.2006, 05:26)

Stu:-
Hi Stu, only one 'l' though?
I am quite proud that a Google search on 'Stu' gives me a third place listing.
(28.01.2006, 08:50)

Tim Seaward:-
Hello Stu,
Your MkII sliding Gallery is just what I have been looking for. I really appreciate the fact that you put all this work on-line.

I am another CSS novice, and I am trying to change the way your gallery works. What I am trying to do is rather than clicking the thumbnail to view a larger shot, what I want to do is for the visitor to click on the thumbnail which will then take them onto another page with the larger image. Unfortunately I cannot seem to "crack the code". I am confident that it is not very difficult but I am struggling to get it right. Can you help me?

Here's hoping I may be one of the lucky ones.
But if not then thank anyway for this site.

Regards
Tim Seaward
(11.05.2006, 18:16)

Stu:-
Tim, all you need to do is change the #nogo to the link page and remove all the styling to do with the span, :hove and :active
(11.05.2006, 19:08)

Toni Lynne:-
Hi Stu, your photo slide show looks great!! I am having a problem getting it to work properly, how did you make the background image "win_back.gif" I think that is part of my problem. Also, what is the linked "nogo"? I am new to some of this, I make pages and have my certifications in CSS and HTML... so I just need to know the actions more so of the different things you have set up... please don't think I'm stupid!! I really appreciate your help!!
(16.07.2006, 04:54)

Stu:-
Toni, win_back.gif was made using a paint package called 'Fireworks' but any one would do.
The link #nogo is used because a normal link would take your visitor to another page if they clicked an image. As long as you don't have a page jump called #nogo a click on an image will do nothing.
(16.07.2006, 09:17)

Boris:-
I've tested in IE5, and all are working, except the one for IE...
(29.07.2006, 12:19)

Melissa:-
hey, I was just wondering if I could possibly make the horizontal photo gallery into my top 8 on myspace? If so, how would I accomplish that?
(12.09.2006, 04:42)

Peter:-
Hi Stu,
Firstly, fantastic work you deserve much praise. The sliding gallery, does it meet accessibility standards? It certainly works for the almighty search engine!

Hope you don't mind me asking but it was just a concern, I not sure at all, it may well be fine.
Best wishes,

Peter
(06.10.2006, 08:51)

Stu:-
Peter, if you mean 'does it work using the keyboard' then the answer is no. But it can be made to work using :active/:focus so that you visitor can select each image as if it were a link.
(06.10.2006, 09:19)

Stu:-
Peter, by the way, the next two gallery demos will work using the tab key to select each thumbnail and display the full size image.
(06.10.2006, 09:21)

Lola:-
This is a fantatic way to view pictures but how do you make it horizontal? I don't understand how it is embedded into the css...
(03.12.2006, 00:23)

Stu:-
Lola, the galleryh style is for the horizontal version.
(03.12.2006, 00:31)

Joe:-
Hey stu,

Your photo slide show is amazing, I have but one question: for some reason I am able to change all the photos that are by default on the slide show to my personal photos, however, the photo where it says "photo gallery horizontal slide" cannot be located not on html and not in the files that the page downloads.
(26.12.2006, 02:13)

Stu:-
Joe, if you examine the stylesheet you will see that this is a background image:
background:#fff url(windows/win_back.gif);
So you will need to create your own and load it through the stylesheet.
(26.12.2006, 15:20)

Hailey:-
Hi Stu!
Great Site!! :) I was wondering if there was a way to have the first image in your vertical image gallery default to be opened up in stead of having all of the images squished? Is this possible?

Thanks! Hailey
(27.03.2007, 05:02)

Trix:-
Thanks for this. I needed a clean, easy way to display my portfolio and this provided a fun, easy to update solution. Thank you!
(25.07.2007, 18:43)

Megarian:-
hey gallery is very nice but i was thinking if it was possible to combine a square of horizontal and vertical ones together so when you move thru vertical menu it doesnt show a picture but another horizontal menu which is defined for every "floor" of the vertical menu.
regards
(28.03.2008, 23:41)

Jonathon:-
The last example, with images of the ballet dancer, is gorgeous...very nice work. You are a CSS visionary - a hero for us mere mortals.
(21.05.2009, 01:39)

Daniel:-
Hey Stu,

Well... What can I say? You really own it there. My biggest compliments. Unfortunately I'm a real beginner here. I saw in the comments-list, that Lola was asking you how to get the horizontal version and you answered here by saying that the galleryh is the solution. But I can't find the galleryh style?

Thanks in advance.
(02.12.2009, 15:56)

Daniel:-
sorry Stu, I'm a complete Idiot.
I didn't see the wood for the trees :-)
I found it now. :-) Never mind.
(02.12.2009, 16:01)

Melanie:-
very good thing indeed. Stu, how can I add more images to the gallery instead of only 7?
thanks so much.
(08.12.2009, 08:14)

Stu:-
You would just need to recalculate the overall width or height depending which version you are using
(08.12.2009, 10:21)

Melanie:-
Ah I see. Thanks a lot.
(08.12.2009, 14:18)

Gibbym:-
Really cool. Thanks for the idea. Do you think it could be done with captions for each photo (without putting the caption in the pics via Photoshop) This seems like a great way to provide many details in a limited space.
(16.03.2010, 21:02)

Kevin:-
Stu,
This tutorial was fantastic!! The only problem I am having is the placeholder of the menu that says vertical. How do I replace that. I am guessing that is the background url in the css code, but when I connect something else, I just have a blank white screen under the working gallery. Thank you for your time.
(08.04.2010, 16:04)

shawn:-
great,simple gallery setup! I was wondering if there is a way to show just a 'slice' of the full size image instead of compressing the entire image? it'd make the 'strips' more readable.
(28.04.2010, 20:28)

david:-
i'm grooving on the translucent edging on each of the images. how's that done? javascript? or css z-indexing? anyone know? new to all of this. thanks.
(09.06.2010, 20:40)

Stu:-
This is part of each image.
(09.06.2010, 22:12)

david:-
thanks so much for responding.
(10.06.2010, 18:57)

andrew:-
I found this tutorial really awesome, I was a bit frustrated though that I can't make the same css in an external style sheet it seems to have to be within the html page for it to hid properly?
(15.02.2011, 19:55)

Stu:-
There is no reason why the styles cannot be moved to an external stylesheet
(15.02.2011, 20:18)

Elisa:-
Hi Stu, thanks for this wonderful tutorial. The only problem I found is that it does not work properly with IE, the pictures appear in a strange position. Please have a look at my site and tell me how to fix this:

alerce.pntic.mec.es/elbubr/vocabulary.html

Thanks so much
(29.03.2011, 04:06)

Esteban:-
i still dont get it how to make the horizontal slideshow :'( can u Stu or anyone help me?
(30.03.2012, 05:01)

ivan vargas:-
buenas nose si me podra contestar alguien pero yo lanzo la pregunta...he copiado el codigo de la galeria y funciona pero nose donde poner la imagen que se muestra cuando no estas sobre ninguna foto, es decir la imagen de la portada de la galeria,si alguien me puede ayudar por favor
(24.05.2012, 15:01)

Marta Fernandez:-
Hi, I've tried the gallery photo code, but I do not know how to set the first photo, the "Photo gallery Vertical slide" one.
Thank you for any help
(24.05.2012, 15:09)

Augustine:-
bro. how to make the horizontal gallery?
thanks. very nice gallery. =))
(02.08.2012, 08:03)

Stu:-
Just look at the source code. The site FAQs will tell you where to look.
(02.08.2012, 08:56)

Alejandra:-
Hi, I have no idea about css but I want to use your horizontal sliding gallery in my website. First I would like to know how much is the donation you require and then to learn how it works... Now I´m making my website on dreamworks. Thankyou
(18.05.2013, 02:16)



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