Mobile Friendly Website


Doing it with style

Photo scroll 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}

Post a comment

Current posts

Hi Stu,
You say, you want to share your experimnts but I do not see any tutorials for the most sophisticated designs.
(05.04.2007, 16:18)

Answering instead of Stu, but tutorials are very hard to write: if you really start writing a tutorial, you probably want to explain in very detail why every single rule was set to their place. Including browser bugs. Atleast I do some things purely to skip browser problems specifically IE problems.

Including these reasonings may then lead to a very confusing tutorial, leaving them out in the other hand makes the tutorial not worthy, as it doesn't teach much anything that you can read from the code.

CSS in the other hand is in a very moving environment: writings written now are often badly outdated just in a few months/years after new browser releases (except if there are no browser hacks required). At the moment IE6 information is becoming less and less important each day as people are moving to IE7 (or Firefox).
(06.04.2007, 00:04)

And for the last addition: atleast I use Stu's designs purely for ideas and inspiration, I rarely look into the code as ideas are more important. Once you know CSS enough, you don't often need to see the code to know how to do it. Or if you do have a need to take a peek, it is just for one or two specific tricks.
(06.04.2007, 00:08)

Robin Cunningham:-
Altered scroll-show con'd - To make my request clearer: Want hover on thumbnails to produce variable-sized images to left of scroll-space; thumbs will be fixed size; variable image sizes set in src code of image, but will display in fixed-sized area; eliminated 2x images, 2x image space, 'click for image' image, click link. See work in progress at There are no images, only blanks, but concept (so far) should be clear. Thanx again.
(08.04.2007, 19:34)

Feel kinda dumb. First post didn't include 'Stu's first name', so didn't post. OK, once again: Altering scroll slide show to eliminate 2x mini-pix, 2x display area, 'click on image' b'ground image. I've increased size of scroll area and am using a:hover to display image rather than a:active. Seeking variable sizing of images displayed via src instead of fixed image sizing via a:hover img. I hope this is somewhat clear. 1st published post includes site with coding. I've added a little more support for your long-standing imagination, creativity, and innovation. Thanx.
(08.04.2007, 19:42)

Bryan C.:-

I'm attempting to use multiple photo scrollers on a single page. I was previously trying a modification of the entire layout, but with it failing in IE6, I've gone back to the default CSS and source. The only thing I've changed the #scroller to a class (.scroller) and changed the #thumbs to a class as well (.thumbs) for validation purposes.

The technique works flawlessly in Firefox, but fails in IE6. Your demo works properly in IE6 as I've noticed, though. Unless I remove the overflow:auto declaration, and thus limiting the number of images I can display, all of the slightly larger thumbnails and full size images appear within the thumbnail box.

Any idea why this might be happening?
(25.04.2007, 15:22)

Bryan C.:-

I think I've found the problem. The site I'm developing the page for is using the HTML 4.0 Transitional DOCTYPE. When I change the DOCTYPE to XHTML 1.0 Strict (as your page is), multiple photo scrollers on a page work.
(25.04.2007, 16:29)

Bryan C.:-
So it seems like the site I'm working on (previously developed by others) has been rendering in quirks mode in FF and IE b/c of no URI specification. Now when I put in a valid DOCTYPE and URI, IE6 renders the gallery properly, but FF1.5 doesn't. I'm about to pull what little hair I have left out.. :(

If anyone has any suggestions, they'd be greatly appreciated.
(25.04.2007, 19:09)

Stu, another wonderful entry. Thank you.

I am trying to modify to have the thumbnails differ from the hover and fullsize image. Still working on it.

You should know that the fullsize images do not hold in Safari, but require that the mouse button be held to be visible.
(04.05.2007, 03:36)

regarding 'Photo scroll gallery'. Man you're a space cadet. The code is simplistic and portable, the approach complex. def'nately a gem.
(24.05.2007, 16:01)

I was playing with modifications based off this idea of yours, but had trouble making the thumbnails resize in IE (although it works fine with your exact code).

My question is, why have you defined "#scroller b#thumbs a:focus img.vt" (and twice in the CSS file? On lines 32-35.

At this time, with respect to thumbnail resizing, that's the only discernible difference I have between my version and your original code, but I don't understand the reason behind your defining it/them twice.
(05.06.2007, 13:39)

Gracias, this was an oversight and has now been corrected.
(05.06.2007, 17:30)

This used to work in FF, but one day, it today it just stopped doesn't resize the thumbnails when you hover and click...
It would be appreciated if this could be confirmed, and hopefully fixed... :)

Thank you,
(18.06.2007, 23:38)

I apologize for my last was actually a FF add-on that caused it to not work.
Thank you for such a wonderful thing...

(18.06.2007, 23:57)

Played with the code but had problems, so I went back to your original ( between the info div) and got it working except on the 'click' ie active - The largest image will only display when you move off the thumbnail. The same code works perfectly in firefix. Any ideas
(15.10.2007, 20:17)

James, you need to define the default styles for the links. I use:

a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}

This is a little known bug in IE.
(15.10.2007, 21:39)

Hello, I really like this gallery layout. But how can I make the pictures in the 'active'-box clickable, so people can download them?
(31.10.2007, 22:16)

Ahmed Ali:-
i would like to ask permission if i am able to use "Photo scroll gallery" on my website and i how will i go about making it, because there is no tutorial
(06.03.2008, 00:32)

Stu - I'm working with this scrolling gallery and noticed what might be an IE bug(?) If you click on a thumbnail then click the browser scroll bar to move the page down, the full image is removed. In FF the full image is retained while using the browser scroll bar. My images are 600px high so I need people to be able to scroll down and not lose the full image. Is there a hack that you know of? Thanks!
(24.09.2008, 20:19)

This is an IE 'feature'. A scrollbar click will cancel any :active state, and there is no fix for this except to use the mousewheel to scroll.
(24.09.2008, 20:27)

Kyle Jernigan:-
I was curious if u have files downloadable containing this gallery. I wasnt sure if I had to hunt for the files seperately or what? If you could email me with an answer that would be great...thanks
(18.08.2009, 05:53)

Photo scroll gallery

I would really like to use this for my site. I tried to copy and paste the coding for the page source, But I did something wrong. I don't think I got the entire coding. I have looked, but I can't seem to find anything else that would go with the gallery. Will you help me out?
(22.06.2010, 00:10)

Loving this! Many thanks for a wonderful site. I have successfully included the code for the Photo Scroll Gallery and have altered the frames to suit. Is there any way to set an initial photo to display in either of the main frames?
(06.02.2012, 16:53)

You could add a background image to each of these frames that would then be covered by the selected images on hover/click
(06.02.2012, 22:31)


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://'


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.


Facebook Twitter rss feed Facebook Fan Page