Mobile Friendly Website

CSSPLAY

Doing it with style

Simplest 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

Bob:-
Simplest photograph gallery. hello, great site, but i can not get this to work in IE7. Works great in netscape, firefox, and opers.
(16.04.2007, 16:57)

Stu:-
Bob, try it now.
(16.04.2007, 19:54)

Bob:-
Works great now, thank you very much. What was the solution?
(16.04.2007, 21:59)

Stu:-
Bob, for some unknown reason IE7 needs a width for the containing #gallery div.
#gallery {position:relative; width:750px;}
This width can be 100% (which is the default) but IE7 will not work unless this is styled. IE6 is fine.
(16.04.2007, 22:16)

Dave:-
I am try to use a combination of your gallery examples and am having difficulty with larger images. Is there a method to 'limit' image size?

e.g.
portal 400x400
image 300x300 displayed 300x300
image 600x300 displayed 400x200

Using max-width/max-height in some combination.

It does seem possible to do when only one (width or height) dimension needs limited, but looks impossible to maintain aspect if both exceed the portal limits?! (without ... ugh ... javascript)

Any way you see to accomplish this?
(17.04.2007, 15:36)

Gerhard Groebe:-
Hi, I'm just beginning to test your script and here is my question: do you know a simple (of course...) way of "preloading" a first image on the left side. So that the page doesn't start with an empty space but with an image loaded.
Thanks a lot
Gerd
(19.04.2007, 10:33)

Michael Dresser:-
Hi Stu
Great gallery but I'm still having probs with it in IE7 - I'm literally copying and pasting your code without changing anything and hovering over the last thumbnail causes 2 gaps to appear in the row below, pushing the rest of the thumbs along a space. Don't know if this is different to the prob Bob was having above....??
(27.04.2007, 21:17)

Stu:-
Michael, are you using a standards compliant doctype?
(27.04.2007, 21:35)

Pam:-
HI Stu,
I'm using the new Simplest Gallery. On your page you can hover over the images and clcik and nothing happens When I do it on mine, it clicks to an empty page. How do I remover the click ability. I ave tried and cant figure it out. I copied all the info code in the body and the style code into the header.
Thanks for your help.
Pam
(28.04.2007, 02:51)

Daniel:-
Hi
I am trying to get this simple hover gallery working with my site. Have had considerable problems as this is my first crack at CSS. Things work well in IE7, and this is how I would like the images to display (the images scroll with the text, then pop up over everything when hovered over). The problem is that in Safari or Firefox the images get clipped and wont display on top as I would like. Is there a way to get both ideas to work, that is that the images can be imbedded so they scroll, then pop up over everything when hovered over? One problem I know I have is that when I copied and modified the CSS that I wound up with lots of repetitive ID tags, I trying to fix that as well if anyone knows a quick fix for this that would be great too.

Here is the link...
www.caea-colorado.org/Web-Pages/About-Us.htm
And the external CSS is here:
www.caea-colorado.org/CSS/master.css

Thanks from me and CO for the help!
(06.05.2007, 20:18)

Steve:-
Stu,

Your "Simplest Photograph gallery" is great, and I've just implemented it on one of the sites I'm developing.

However, because of other issues, the site forces IE6 into "Quirks" mode and I've struggled to get the Thumbnail display right in this mode. The problem seems to be more than just the usual IE Box Model troubles. I ended up having to "hack" the size of the thumbnail images back to 48px x 46px to stop strange "shuffling" of the thumbnails under hover. Unfortunately this leaves the thumbnail image not filling its box.

The "experimental" page is at:

www.miltonmalsorpc.org/gallery/devindex.php

Grateful for any ideas on a "fix"

Steve
(15.05.2007, 11:32)

Claire:-
Hi there,

I am also after a way of "preloading" a first image on the left side. So that the page doesn't start with an empty space but with an image loaded. Any ideas?

Also a way of when you scroll over the image, the image does not disappear and still displays the image to enlarge?

Thanks, Claire
(23.05.2007, 10:48)

Andy:-
Steve, I was having the same problem as you, your fix has helped but is there anyway of fixing this without having the image smaller than it's box?

Other than that though, Thanks for the script Stu!
(25.05.2007, 16:55)

Stu:-
Andy and Steve, change the style of the img for IE to:
* html #thumbs a img
{
width:48px;
height:48px;
display:block;
}
(25.05.2007, 17:23)

Steve:-
Stu, excellent! Thanks so much - that did the trick.

I'd used the * html hack to change the width and height, but found I needed to take the height right back to 45px for it to work, and that left an annoying white gap at the bottom of the thumbnail.

Presumably display:block is the important change. I'd ask why, but probably wouldn't understand the answer!

I've added a "title" to the <a> tag which brings up a description of the image.

The only problem now is that it renders the same in all my browsers, and I was using the white gap in the thumbnail as my check that I'd forced IE into Quirks mode ..... only joking :)

Steve
(27.05.2007, 22:46)

Arden:-
The simplest gallery works great on just about every browser I have tried. The only glich is in Mac Safari when hovering over thumbnail the image displays about 150 px off to the left and out of the container. Any suggestions? If not that is ok, it is a small portion of web browsers using Mac Safari. You can check it out here www.sardisvet.com/photos.htm. Thanks for any suggestions.
(21.06.2007, 19:31)

Arden Powell:-
I just downloaded the new Safari Beta and the display is perfect so I guess it is a CSS bug they have fixed in this version. Cheers and thanks for the scripts.
(30.06.2007, 00:02)

Aafje:-
Hi-
I'd like to use your simple photogallery, but the images I upload will not resize to thumbnails...
I'm using Firefox.
Hope you can help me.
Thanks a lot from Amsterdam!
(22.07.2007, 21:08)

Jason:-
Is there an easy way to run the thumbs across the top, and have the image appear below? I tried changing the position on "#thumbs a:hover img" but couldn't get it to work.
(25.07.2007, 22:34)

Jo:-
Hi Stu!

This simplest gallery is fantastic, except I am having the same problem as Pam. Hoping you'll post an answer eventually, as you have in the past for others!!

Jo
(23.08.2007, 02:15)

Stu:-
Jo, if you are using the link <a href="#nogo"> then it should not jump to a new page. This is a relative jump to a tag #nogo on the same page and if that tag is not defined then it will be ignored. I have seen <a href="#"> used on some demonstrations but this is treated as a jump to the top of the page in some browsers.
(23.08.2007, 07:50)

Suzy:-
Stu -

First off, thanks for a great gallery! I'm not sure that I'm having the same issue as Steve. The third image in row will move the next row down one while using IE7. Any suggestion?
(30.08.2007, 22:31)

Frank:-
thank you very much for the gallery its awsome!

i'm new to web design, is there an easy way to put some text under each pop up picture?

thank you in advance

regards
(09.09.2007, 16:45)

sophie:-
Hi stu,
I used on my site www.riadpuchka.com/ the gallery "it's a dog life" I didn't find on your site. It doesn't works on IE 6 everything is freezed. Tell me if I should add a script?
thanks a lot
(17.09.2007, 16:52)

James:-
Would it be possible to display a default image and also what code would be needed to hold the image when the user clicks on the image?! i imagine its something to do with the hover active class?!

Great site :o)
(10.10.2007, 11:18)

James:-
I added:
#thumbs a:active img, a:focus img {position:absolute; width:auto; height:auto; left:180px; top:-258px; border:1px solid #a6d0e7;}

But it's only displaying the 50px X 50px and holding it in focus. hmmmm :o)
(10.10.2007, 12:23)

Bryan:-
Stu,

Do you know of a way to resize images that are larger than a given size to a maximum size? I tried max-width/height but it fails in IE6.

Thanks,
Bryan
(21.11.2007, 05:19)

Lindsey:-
Hi Stu

Thanks for a briliantly simple bit of CSS!
It's at www.1stclassprojects.co.uk/galleryint.php

I've got about 50 images in my gallery - so to get the big picture to always be visible, I changed its position to position:fixed. But now, when I mouseout, the thumbnail changes so you can't see what it is.... any thoughts on how to fix it would be appreciated.
Regards

Lindsey
(10.12.2007, 07:57)

David:-
Stu,

How do you go about displaying a textural description of the images below the images that apper on hover of the thumbnails.

Thanks
(04.01.2008, 03:21)

Julio:-
I am also (as Claire and Gerhard) looking for a way to have an image "preloaded" on the left side. Or at least a way to fixate an image when you click it (That would be nice too).

Thank you very much for all this excellent scripts.
(17.01.2008, 06:48)

Mauro:-
Lots of posts to have a pre-loaded image or default image. But no answer. Please, this would be very helpul
(01.03.2008, 21:37)

Stu:-
As this is the simplest photo gallery it was never intended to have all these extra features, but I may produce another version that has a default image and descriptive text.
(01.03.2008, 22:03)

Maria:-
I am so happy I have found your website! I love the photo galleries, mine looks great in Firefox but in IE it just lists the pictures. I have a Yahoo template store, and I have placed the css under css edit and the html on the page. I have tested a few options but I cannot figure out where to place the DTD. My web page is here: www.happylittlesqueaker.com/tabasl1.html

Thanks for any help!
(07.05.2008, 17:46)

Stu:-
Maria, I do offer a service to get my demos working in your web pages. Just emial me stu{at}cssplay.co.uk for details.
(07.05.2008, 18:00)

Ted:-
Hi Stu
I found your CSS gallery demo on webreference.com and adapted it for a site I'm building. Where you use position:absolute for the large image to display in the same area, I used position:relative because the list of thumbs is vertical and kinda long. Anyway, it works great in Firefox, but not in IE7 or Safari. For IE I used position:fixed which solves it. In Safari it displays the image with chunks missing. Very odd - I wonder if you had any ideas? The site is here: www.primationdesign.com/development/Skylandis/miscellaneous.htm
(05.02.2009, 21:07)

Katie:-
This is awesome, thanks so much. I know nothing about web design and it works great.

What would I need to add to the code (and where) to display a different thumbnail - essentially, a thumbnail and a rollover image as 2 different images. I love that it resizes the big image, but it takes so long to load...
(10.06.2009, 03:55)

Matt Howell:-
Stu,
This gallery is perfect for showing different sized images, with one caveat: the default image is persistent and I can't figure out how to hide it when the selected image is smaller than the default.
Could use js I suppose but would rather not.
(29.05.2010, 14:46)

Stu:-
In my demo some of the images are not big enough to cover the default image (the 6th image for instance).
The gallery caters for this by using the <b> element to have a size big enough to cover the default image and uses the white background for this.
(29.05.2010, 15:11)

Matt:-
Stu,
Oops-I forgot I changed that element to transparent till I took another look at the demo....
Thanks for the super quick response!
(29.05.2010, 16:37)

john:-
I really love this your css picture gallery. The new on is most awesome. But for some reason I can not set a default image width. I'm using pics from a db and I have no idea how large they are. So I need to set a default image width. I tried adding a width attribute to the img element and that did not work for some strange reason. Thanks in advance for your help. jtracey at dbidirect dot com
(28.10.2011, 08:08)

john:-
never mind - of course you put it in the css. what a wonderful piece of work this is. thanks again! keep me posted on all your future work.
(28.10.2011, 08:23)

Burt:-
I appreciate the ideas on this gallery and on many of the others, but I have to warn people new to HTML and CSS that the code in these demos is simply horrific.

There are entire blocks of CSS in this particular demo that are redundant or do nothing.

The tags <b> and <i> are blatantly misused. <span> seems to be totally misunderstood. The floats are wrong (you'll notice that the demo isn't actually "in" the #info div at all, it just happen to be forcibly lined up so that it appears to be inside of the #info div's boundaries).

Seriously, this is not code you want to emulate, and I think the author might want to work on this before posting it to his site. They look nice under certain conditions, but it's only on the surface. Be very careful if you're going to try to use this stuff.
(03.04.2013, 11:24)

Stu:-
I think that you will find that the code IS in the #info div and whilst I do not claim that this is semantically correct, it does show what is possible using just html and css.
This is the purpose of CSS play, as stated on the home page:
"Because CSS play deals with experimental CSS that is exactly what you get JUST CSS"
Also this demo was produced 6 years ago and as such had to use styles that were available at that time.
If I were to revise this using css3 styles that are now available I could do away with the need for <span>, <b> and <i> tags.
(03.04.2013, 12:37)

asghar:-
hi,
I used your code to enlarge pictures on my website by hovering on them.
the issue is that it does not work on google chrome. have you noticed this before? do you have a solution for this?
thanks
(23.04.2014, 15:39)

Stu:-
This demo works on all browsers including Chrome.
(23.04.2014, 16:37)

chris:-
OK, I give up... what are the empty <span></span>'s for?
(27.01.2015, 19:35)

Stu:-
These are for IE6 and IE7.
If you look at the separate stylesheet for IE6 and IE7 you will see that they are styled #gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;}
This then gets the image file which is also display:inline-block; vertical-align:middle; to be vertically centered.
All other browsers use display:table-cell; vertical-align:middle;
(27.01.2015, 19:56)



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