Mobile Friendly Website

CSSPLAY

Doing it with style

two step 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

mrruben5:-
Jezus Christ you own :P
(08.07.2005, 19:53)

Stephen:-
Changed the photos around from before. Very nice all the same.
(08.07.2005, 19:54)

Stu:-
Stephen, yes I thought that the 'windows' were a little fussy for this one so I changed them for a series of toys (taken from http://sxc.hu/). I had the idea this morning and put it together this afternoon.
(08.07.2005, 20:44)

Stu:-
photos changed again - now happy ;o)
(09.07.2005, 14:49)

Stephen:-
Very nice indeed. I think these are the best photos yet. I may give it a go later.
(09.07.2005, 17:08)

Stephen:-
Any way that you can get a caption to come up with each full image?
(09.07.2005, 17:20)

Stu:-
Stephen, you would need to have a span in each image 'link' which would normally be display:none; Then on :focus/:active this would become display:block; position:absolute; and then stick it where you like.
(09.07.2005, 18:20)

James:-
I am fond of your work. Thank you so much.
(09.07.2005, 21:09)

Gina Silveira:-
The 2 step photo gallery does work correctly on Mac. Thanks for this website, it is a phenomenal learning tool! =)
(10.07.2005, 23:06)

Stu:-
Thanks Gina
(11.07.2005, 10:52)

hnagel:-
You asked for Mac (OS 10.3.9)
Firefox 1.0.4 -> fine;
Safari 1.3 -> Shows the fullsize picture in the middle only while you hold down the mouse button
IE 5.2 -> fine;
Mozilla 1.7.3 -> fine;
(11.07.2005, 12:37)

Stu:-
Thanks hnagel, that is a comprehensive list for Mac users. I will add it to my list.
(11.07.2005, 12:59)

Femi:-
New surprise!
Thanks Stu
great solution
femi
wowdev.com
(11.07.2005, 14:12)

dzash:-
Stu - From the Mac side, adding to hnagel's assessment - I.E. 5.2 is not fine. What it actually does is a bit strange. The first small pix I click works fine. When I roll over the second image it shows in the center scaled down but if I click it, it goes away and shows image 1 again. BUT - if I continue to explore - and click on image 3 THEN image 2 will fill the center. It's almost as if, after the first image change, the browser fall behind by one request. To see image 2 you must click on image 3. To see 3 you must click 4 and so on.
(11.07.2005, 22:50)

hnagel:-
Stu/dzash: It's right, I.E 5.2 for Mac behave really strange ... I fooled around with it again. A click on image 2 doesn't change the middle. Actually you don't have to click on image 3 to see image 2, it's enough to hover over image 3 (you see image 2 big in the middle, image 3 scaled down in the middle), now leave the area of image 3: image 2 is in the middle now. (I just looked on the side with I.E because of my curiosity - is there really someone using this browser?)
(12.07.2005, 08:51)

Stu:-
dzash and hnagel, thanks for the feedback on Mac IE5.2. It certainly is a strange interpretation of the css. But whilst developing this gallery I had a similar thing happen in Firefox which needed a mouse movement after the click to make the image full size. There is possibly an answer to this but I cannot test on this platform.
(12.07.2005, 09:30)

derek:-
Best information ive seen in a while. Smile your on digg!
(14.07.2005, 04:49)

Stu:-
derek, I noticed the digg posting. It's nice to know that my work is that popular. Thanks.
(14.07.2005, 08:26)

call me al:-
"Blow the bandwidth, let's have a decent subject."
I agree, bandwidth-schmandwidth!
That rocks! Very original and looks great.
(15.07.2005, 18:06)

Siobhan:-
Hi can we download and install this Stu?

Thanks
(17.07.2005, 10:53)

Stu:-
Siobhan, you can use the css as you wish with your own series of images, but do not copy the demonstration with my choice of images so that it is an exact copy.
(17.07.2005, 12:12)

Francis:-
Hi stu you are the man from css world :o)this is fantastic. I am thinking of using the method for another purpose.

Cheers
(18.07.2005, 09:41)

mindy:-
Stu, your talent is amazing. You requested feedback from a mac user on http://www.stunicholls.myby.co.uk/menu/gallery4.html.
Works perfectly in Firefox. In safari, I see all states of the images, but the large image goes away as soon as the mouse click is released.
Thank you so much for sharing your knowledge.
(19.07.2005, 16:38)

marko:-
Two step photo-gallery don't work in Safari 1.2.4. Images ara static, without any action.
(21.07.2005, 11:34)

michael:-
Great demo. It does work beautifully in Safari 1.3 & 1.4

I'm getting a different behavior for IE 5.2. Everything works as it should except that the last image hovered over does not revert when the cursor moves. It still shows the click image. Not a big deal.

Opera 8 on Mac works just as you describe for Windows.
(22.07.2005, 00:43)

maze:-
hi stu! thanks for encouraging everyone to use css in a more appropriate way. the photo gallery almost works with safari 1.3 (v312), as mentioned bevore by mindy, the large images go back to small as soon as you release the mouse button. works fine with mozilla. when will the world get rid of IE?
(23.07.2005, 22:13)

Todd:-
Maze - I'm with you...IE is just the bane of anyone's internet experience...
(27.07.2005, 22:30)

GaryBadger:-
Stu, I have to let you know, this two-step is easily the greatest gallery I have ever seen. Unbelievable! Well done!
(29.07.2005, 02:13)

Todd (todd@reidjazz.com):-
Stu: Love this two-step photo gallery. I'm having a bit of trouble implementing and wondering if you could help. I've got the basic gallery working at http://www.bradgoode.com/photos.html, but as you can see, something isn't right with the hover. I suspect it's something really basic that I've overlooked, but can't seem to get it right. Any ideas
(30.07.2005, 16:16)

Rachel:-
Stu, your site is great. The two-step work fine on Mozilla 1.7.8 mac os 10.41
(21.08.2005, 13:27)

Stu:-
Thanks Rachel, it seems to be a success in most browsers doesn't it.
(21.08.2005, 15:43)

Mary Anne:-
Dear Stu,
I built my first site with Netscape Composer and was very proud of it until I learned something about the code behind the scenes! You're site makes learning css easy. I understand that your code is not to be used for commercial purposes, but I would like to display my album based on your code. Can I upload it to my site for you to view? (Please do not display my full name or website address; I'd be happy to send any other info by email.)I'd like to indicate~design adapted from original work by Stu....@your site button....
(21.09.2005, 14:26)

Stu:-
Mary Anne, the css is there to be used. A link back would be nice but it is not compulsory.
(22.09.2005, 23:09)

Will:-
Stu, great site, and I LOVE this gallery! However, I'm having some strange behaviour when I try to add extra elements (say, another row down) beyond the original 7x7 frame. I get weird flickering on hover-over. I checked the size of the original ul#gallery object, shouldn't be the problem. Thanks in advance!
(10.10.2005, 20:57)

BJ@chumpmusic.de:-
hi stu really nice work. i want to use it on my hompage chumpmusic.de nut i'm still looking for a way to handle pictures wither bigger height than width without destroying the proportions. Some help really would be apreciated and of course rewarded with a grateful link to your sensational homepage.
(20.10.2005, 19:26)

Stu:-
BJ, if they are all portrait format then the layout should still work. Just imagine the gallery turned through 90 degrees.
(06.12.2005, 08:23)

Stu:-
BTW if you are trying to get this to work on IE for a Mac then there are problems in the layout of the thumbnails. You will need to find another way of positioning them around the outside edges of the gallery. Unfortunately I do not have a Mac for testing :(
(06.12.2005, 08:24)

Heather:-
Stu, I love the idea. I have been wracking my brains on a project for a client and you have given me some great ideas! Thanks. By the way, as a Mac user, interesting quirks to note on my end. The hover feature works in IE, but the click does not show you the image until you move the mouse off the thumbnail. You can see the full image if you more to another box, see the new hover image, then move the mouse outside of the box. Hope this makes sense and helps in some way.
(07.01.2006, 04:01)

Cyn:-
Thanks for the great tutorial. My only problem is I can't seenm to get the large image to remain on screen in Safari 1.3.1. That function works on IE 5.2 for Mac but only "hovers" in Safari - I am really new to CSS so forgive me if it is a really obvious question but is there a way to make the large image remain in both browsers?
(03.03.2006, 15:21)

Stu:-
Cyn, Safari acts like Opera when it comes to the :active and :focus pseudo classes. They only work whilst the mouse button is held down. There is no way round this I'm afraid.
(03.03.2006, 15:54)

B:-
A bit of redundancy on my part and a touch of something new:

Safari 2.0 and Shiira

Half image while scrolling works but graffiti background image doesn't change unless the mouse button is held down. As long as the mouse button is depressed a different full size image will be visible.

Flock - works
Firefox 1.5 - works

Thanks Stu
(04.07.2006, 02:10)

MJ:-
Hi!

I am new in CSS and i wonder how could i get the exact style as shown in your example (i.e. in gallery) I tried to copy and paste it to an editor (also edit the img scr). Then after i run it, all i see is a list of images. (horizontally)
(30.08.2006, 18:41)

Chet:-
Love this gallery. Is there an easy way to make a picture appear default in the middle instead of the grey background? Keep up the great work, I've learned more in 1 day here than in the past couple mosts through other tutorials online!
(07.09.2006, 00:30)

Yansky:-
Thanks very much Stu. This tutorial was a great help. :)
(04.11.2006, 10:42)

Ian:-
So this gallery is great and im using it for our band pic gallery page. However id like to expand the thumbs to the perimeter of the full size so that the full image is seen on click. Also im aware that this would add more thumbs to make up the perimeter. Also how and where do i put the "click" image you have on the example?

Thanks
(04.01.2009, 23:26)



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