Mobile Friendly Website

CSSPLAY

Doing it with style

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

sf:-
I really prefer this layout to the tutorial layout, especially being able to click the image and have it remain in the main box.
(18.05.2005, 22:14)

Stu:-
You can easily add this feature to the tutorial layout, but this does cause problems if you use both hover and focus/active.
(19.05.2005, 23:58)

Gaugericus:-
Many thanks Mr Nicholls ! Your css-based image gallery is great . I used it in one site( http://www.paul-maurer.com). My question is that I would like to use your tutorial layout for another one, but how can I have the container absolutely centered in my pages? Thank you.
(07.06.2005, 18:20)

Stu:-
The tutorial layout is centered in the page. This is done using margin:0 auto; for FF etc and text-align:center; in the body style for Explorer.
(07.06.2005, 19:51)

Gaugericus:-
Thank you, I meant centered horizontally AND vertically in the browsers, but I finally found. It works with modern browsers like Firefox, Safari, Camino, but not with IE Mac as usual.
Bravo and thank you for what you are doing
(08.06.2005, 17:30)

Asger:-
Thank you Stu. As Gaugericus I like to know if it is possible to centered it vertically in the browsers. With tables one can use valign="middle".
(08.07.2005, 15:55)

Stu:-
Asger, unfortunately css does not have a cross browser method of vertically aligning elements on a page. It is possible in Internet Explorer using inline blocks but that is about all.
(08.07.2005, 17:17)

miksago:-
the Gallery is heaps cool but IE has a problem with <a href="#nogo">
(11.07.2005, 05:34)

Alex:-
Stu, great piece of css. I see one problem: when I press (mouse click) on the thumb, the previous thumb is not responding anymore to mouse-over <span> - change image. Also if I move mouse "fast" from upper row after clicking thumb to the big image sometimes I get the last "mouse-over" thumb as preview.
(14.07.2005, 10:29)

Stu:-
This 'problem' has been discussed in previous threads. I have said that you should use :hover or :active/:focus but not both. HOWEVER, just to show that with a little jiggling with z-indexes and display:relative; it is possible to have both. You can now use :hover and :active/:focus and :hover will work when a previous :active/:focus phot has been selected.
(14.07.2005, 20:12)

Alex:-
thanx Stu,
I've been playing yesterday and I discovered that already.
I tried also z-indexes but so far no result with them.
Again thanx for your answer
Alex
(15.07.2005, 09:46)

Stu:-
IE has a small problem using z-index and sometimes doesn't work first time. Firefox, however gets it right.
(15.07.2005, 12:56)

Anonym:-
I don't know how often Opera is used, but I find this breaks on Opera. Thanks very much for this though, I love it! You mention things being discussed on a previous thread... where can I find the previous thread?

Thanks!
(25.07.2005, 13:27)

Stu:-
If you click the [*] at the bottom of the comments you will see all of the comments (not just the last 10. It has also been mentioned in other page comments (but not sure which ones). Opera has a problem with :active and :focus not being 'held' if the mouse moves off the link.
(25.07.2005, 21:27)

m:-
The gallery script is cool. How do you get the thumbnails to move to their full image when you click on the thumbnail instead of hoveringover it. Thanks.
(30.07.2005, 15:55)

Stu:-
m, just use :active for IE with :focus for FF etc. See the CSS for method.
(30.07.2005, 16:11)

Simon:-
Gaugericus, previous thumbs doesn't work in your gallery too. And, Stu, i would like to ask ofr a little help. I have problems with :active and :focus, and I don't get it how to use them correctly for good results in both, IE and FF. When no :hover is mentioned in gallery's style, then FF displays allright (I don't need rollover preview, just after click), but IE displays nothing! When hover is mentioned, then after click IE displays big photo only after focusing thumb! :\ I'm confused. Sorry for my bad english.. and I'll be happy if you help me :)
(21.08.2005, 11:30)

Stu:-
Simon, IE has a bug when using :active (it doesn't understand :focus).
I have found that styling the default a:visited link often cures the problem. If you look at my two step photo gallery you will see that this works ok with :hover and :active/:focus.
(21.08.2005, 15:38)

Simon:-
yes, and I off course try to make something different than the default style ;) Anyway, thank you, I'll try to play around a bit with your two step gallery.
(21.08.2005, 15:51)

ellen:-
I love the speed of your photo gallery; I am curious about the purpose of the following code which do not explain in your tutorial
* html #container a.slided {
width:91px;
w\idth:93px;
}
would appreciate an explanantion-many thanks
(24.11.2005, 20:44)

Stu:-
ellen, the * html is to target Internet Explorer only (all other browsers will ignore this style).
the first width will be recognised by all versions of IE but the second w\idth will only be recognised by IE6. This particular style is to correct the faulty box model in IE5.01 and E5.5 which will get a value of 91px whereas IE6 will get a value of 93px. Hope this explains things.
(24.11.2005, 21:17)

ellen:-
stu: have you had the opportunity to try the photo galleries on a MAC using I.E as the browser? I have discovered some very interesting things happen: the photo gallery displayed on the demo page shows the thumbnails but not the full size images (except for one,down and to the left) and the one you do in your tutorial comes up as a series of very small slits and none of the larger images get displayed. Do you have any advice about how to handle this anomaly? ( I have run these tests on more than one MAC with I.E.)
(28.11.2005, 02:23)

Michael:-
Stu: I cannot get the tutorial to work I get a page cannot be displayed error. I would like to use it. cool script.
(29.11.2005, 19:24)

Stu:-
Michael, the tutorial link works for me?
(29.11.2005, 21:56)

Michael:-
Ok well then it is something on my side thank you for getting back to me so quickly. Have a good day.
(29.11.2005, 22:40)

ellen:-
stu: should one just give up on trying to make it work in I.E. on a MAC?
(01.12.2005, 23:41)

Stu:-
ellen, unfortunately I do not have access to a Mac for testing, but from what others have said I think that it is expecting too much for IE on a Mac to be able to cope with this.
(02.12.2005, 00:12)

nick may:-
Hi

Love the site - learned and learning a lot from it. But I am confused about your use of

XHTML 1.1 doctype with a content type of content="application/xhtml+xml;"

This is my understanding:

Setting the content type in the page will NOT mean that the page is actually served as "application/xhtml+xml". It is actually being served as text/html, unless you send an xml header server-side.

So your pages are actually being served as text/html. (If they were not, IE would try to download them as a file.)

So they should not be referred to as XHTML 1.1, as it there is no standard that allows XHTML 1.1 to be served as text/html. To stay in standard, either an xml header should be set server side, (which would break i.e. unless you sniff) OR the doctype should be set to XHTML 1.0.

I THINK browsers are treating your pages as XHTML 1.0 text/html.

The only reason I mention it is that I tend to regard your site as "correct" and copy and paste stuff from it - as I am sure others do.

there is more info here:

http://randsco.com/index.php/2005/11/10/serving_xhtml_with_the_right_mime_type

Or have I got it completely wrong?

regards

nick at kyushu.com
(18.12.2005, 13:15)

Stu:-
The pages are served as xhtml1.1 application/xhtml+xml to browsers that understand (using mod_rewrite). IE will interpret this as text/html because it does not (and will not) understand application/xhtml+xml. No matter what I do IE will always see text/html so I make do with this method. At least most browsers will get application/xhtml+xml.
(18.12.2005, 13:31)

nick may:-
I see - you set the mime type dynamically server side in addition to the in-page declaration. All is clear. Would you consider adding a section on this to your site somewhere? I am sure many people - me for one - just copy your Doctype without realising that to actually REALLY send xhtml 1.1 as application/xhtml+xml they need to set a mime type header for each request, separately from the inpage declaration. Best wishes
(18.12.2005, 14:03)

Stu:-
nick, there is no foolproof answer to this problem. At work for instance, we have a proxy server that serves everything on this site as text/html :( so what can you do.
(18.12.2005, 16:00)

rick Bible:-
I just discovered your site. It's beautiful, informative. Thanks
(31.12.2005, 06:41)

Bill:-
Great site Stu. My problem with the galleries is creating the images and thumbnails to specific sizes. Do you have any tips on this?
(31.12.2005, 16:08)

Stu:-
Bill, I just work from the layout I would like and then use 'Photoshop Elements' and 'Fireworks' to resize my images and thumbnails to suit. Photoshop Elements makes a good job of resizing images without too much loss of quality and Fireworks is good at saving images with control over filesize and quality.
(08.01.2006, 17:26)

yaoz:-
I would like to know how to make the photo gallery work on Opera so that active image can be seen also? Now it's just possible to see hover. The image disappears when removing a mouse off from thumbnails.
(09.01.2006, 01:29)

Stu:-
yaoz, Opera is the only browser, as far as I know, that does not 'hold' the active state. You can click on a link but as soon as the mouse button is released then the active state in no longer active. All the other browsers retain the active state until the mouse button is clicked elsewhere.
(09.01.2006, 08:57)

yaoz:-
So then it is not possible to make it work on Opera. too bad...well have to live with it.
(11.01.2006, 16:52)

Al Kendall:-
Great site STU. I love you photo gallery CSS. Is it possible to NOT have the main images preload, but to have the display on click (active) and remain there until another thumnail is clicked. It's just that I have a lot of users that are still on dial-up modems and the gallery pages are taking a long time to load.
If it is possible can you give me an idea of what i need to do?
Thanks
AL
(29.01.2006, 11:04)

mike:-
hey Stu, great site. really enjoyed looking through your examples. i noticed a strange bug in the photo gallery Mk.2: after you click on a thumbnail, hover only displays images after the clicked image. if you hover on a thumbnail before (to the left of) the clicked one nothing happens. any idea why? i tried it in firefox 1.5 and ie6 same deal in both. thanx.
(11.02.2006, 22:35)

Stu:-
mike, now fixed. The z-index and a.active states were not quite correct.
(11.02.2006, 23:18)

alanmsherwood:-
Hi, this site is very impressive, and i am impressed enough to ask for help, i have a huge problem with a navigation system that uses complex rollovers. (Or at least i think they are complex). I was wondering if you would be able to help figure out why nothing will display in internet explorer, when it works perfectly in firefox.
i dont expect a yes answer, my only hope is that it would be challenging enough.
burntcanvasdesign
(04.03.2006, 21:02)

Paal:-
Hi!
Thanks for a great resource!!

I'm using your "Photo Gallery Mk. 1" on a website. But I can't get the hover to work in IE. Hope I'm not breaking any rules by putting an URL in here, it's for the purpose of getting help if possible. Gallery is located at tubaplayer.com/vannebo/fotogaller/index1.php / index2.php and /index3.php.

Any help is appreciated!
(10.03.2006, 09:35)

Paal:-
Damn.. Wrong URL!
should be tubaplayer.com/vannebo/fotogalleri/index1.php /index2.php and /index3.php.

Sorry..
(10.03.2006, 09:36)

Paal:-
Blush... Very frustrated and stressed... Very sorry! This is the right URL:
tubaplayer.com/vannebo/fotogalleri/index.php
index2.php
index3.php

I will hide in a corner and be ashamed of myself for a while.
(10.03.2006, 10:15)

Kathleen:-
This is a very cool site!!

I'd like to use one of your Photo Gallery Mk.1 slideshow on my site, but I'm not sure how to get it there....

Am I to copy all the code over to my site and replace your image/file names with my own?
(10.03.2006, 18:16)

Stu:-
Kathleen, if you look at the source code you will need to copy the style embeded in the <head></head> and the xhtml in the #info div. You will also need to select the correct !doctype to put IE in standards compliant mode.
(10.03.2006, 19:18)

Paal:-
Hi again.. I've tried to use the Photo Gallery Mk. 2 for a new version, and that works in IE but not in Opera.. I would be very happy for any help! Please look here:
www.tubaplayer.com/vannebo/fotogalleri/galleri2/
(10.03.2006, 19:30)

Stu:-
Paal, the sliding photo gallery MKII does not work in Opera, sorry.
(10.03.2006, 20:38)

paddy:-
how exactly does a:active/a:focus work with the z-index?
(10.04.2006, 10:20)

paddy:-
<later> oh... is it so that the image fixed on with a:active is then below the image from a:hover?
(10.04.2006, 10:50)

Stu:-
paddy, yes, the :hover large image is always on top of the :active/:focus image
(04.05.2006, 10:01)

Welch Williams:-
Dear Mr. Nicholls:

First off, I am 'stunned and amazed' at your site AND generousity. I am most definately going to bookmark it and peruse when I have some new focus.

So Thank You!

Secondly, I spend untold hours reviewing net-news sites, and feel you might have an interest in the current rush to 'regulate' the net. I'm presuming you believe the net is fine the way it is. If so, perhaps somewhere prominent on this site, you might express your feelings on this issue.

Anyway, thank you again for your time and 'artistry'.

Sincerely,

Welch williams
(31.05.2006, 10:25)

Jimmy:-
Hi! Its great, but photo gallery is not working in Netscape7.1 (windows). The large hover images
are sliding to the left, the more right the thumbnailimage is. Even at cssplay.co.uk.
Is there a fix? Thanks
(07.06.2006, 10:43)

Hopper:-
Stu,
I love your site and what you have done with CSS. I went to the "List of Demonstrations" page and then clicked on the link for "a photograph gallery" and then to the tutorial link. I noted that the tutorial references the "it's a dog's life" gallery, which is different from the www.cssplay.co.uk/menu/gallery.html

Do you have a tutorial specifically for the gallery that is referenced on that page?

THANK YOU for everything you do to help all of us. :o)
(13.06.2006, 01:57)

Christine:-
Hi Stu, I love your site, it's such a great resource and I come back to it again and again. Thank you for sharing your experiments with the rest of us.

I was wondering if the photo gallery Mk1 with a hover works on Internet Explorer for Mac? I'd like to use it on a site I am making but the .target audience is one where the proportion of IE Mac users is quite high. I have not access to a Mac to test it.

Thanks in advance.
(13.06.2006, 10:30)

Stu:-
Hi Christine, without being able to test it I would not recommend using this on a Mac-IE.
(27.07.2006, 14:49)

dawnita:-
spent 2 days modifying your gallry for my family website - working fine in Nvu but opened it in IE6 and each thumbnail is repeated continuously in an enlarged version of one of my DIVS and the large pic is not seen on hover. it was working so beautifully in my builder program!!! I am crushed..
dd
(31.07.2006, 04:52)

dawnita:-
spent 2 days modifying your gallery for my family website - working fine in Nvu but opened it in IE6 and each thumbnail is repeated continuously in an enlarged version of one of my DIVS and the large pic is not seen on hover. it was working so beautifully in my builder program!!! I am crushed..
dd
(31.07.2006, 04:53)

Brant:-
Hello, great CSS work! Is there any insight you might have on making this photo gallery work in Netscape6+ as well as Opera7+? The image pop-up seems to be posisioning off 0 0, instead of the a:link element like the rest of the popular browsers. Thanks Stu!
(11.08.2006, 01:46)

Arnold:-
Mr Nicholls,

Thanks for a great tutorial. Not only was this my first venture into CSS but you have made an old man very happy. I now have the tools to make my family photos available to my family who are dispersed all over the world.

The web could do with more generous people like you.
(24.11.2006, 14:51)

Jeff:-
Hi Stu-

I absolutely love this gallery. Doing sites for photographers and designers, I've been searching high and low for something just like this.

I am not, by any means, very knowledgable when it comes to CSS. However, I managed to follow your tutorial and get everything working perfectly.

I would like to add the feature that allows the larger image to stay displayed when the thumbnail is clicked, but this isn't in the tutorial. And, since I'm not terribly savvy with CSS I can't find what I need to put in my code to make it work.

Might you be able to post a quick answer for me?

Many thanks,
Jeff
(22.01.2007, 02:54)

geof:-
thank you for this site, i learn so much from it.

i'm seeing a problem which doesn't make sense to me.

i copied the source for the photography gallery into a text file...named it test.html.

i then modified exactly 2 lines:

line 27:

replaced spole/sph2 with graphics/Desert_Flower_2

and line 134

replaced spole/sph2 with graphics/Desert_Flower_2

and changed the alt and title to: Desert Flower 2

nothing more.

the picture used is exactly 500x500px.

now the funny part, the thumbnail is only showing the upper left corner of the picture 75x75px with no reduction...not a shrunken picture of the original as shows up in your demo. the large picture shows perfectly.

any ideas? have you ever heard anything like this before? i am used to using <img src=".." height="75px" width="75px" .... > to shrink the image. i can send the photo (zipped) if you would like. i'm working in firefox, but this doesn't work in ie7 either.

sure hope you have an idea.

thnx
(13.03.2007, 21:44)

Stu:-
Geof, the thumnail images are reduced size images that are placed in the background by the stylesheet. You cannot use the full size image and use css to reduce it for the background image. Background images are always the full size of the original and in your case just the upper left corner will show.
(13.03.2007, 22:07)

geof:-
stu,

thanks for the quick update.

i was trying to avoid actually generating thumbnails if at all possible. i don't suppose you know of a way that i could generate them on the fly, so to speak.

i do like the gallery and will probably use the technique for a future site.

thanks again.

geof
(13.03.2007, 22:15)

Ken Laing:-
Hi

Great site. With your photo galleries, have you tried them with the filenames of the images/thumbnails being loaded from a database record(or records) rather than their URLs being pre-set in the code? Or do the images and thumbnails always have to be embedded in the page code?
(27.03.2007, 23:19)

Stu:-
Ken, there is no reason why this gallery shouldn't work using something like PHP and MySQL to add the image information to the code.
(28.03.2007, 19:40)

Sarah:-
Hi Stu. I have created my portfolio using your tute. Thanks so much for you help!
if you want to see the link..

www.members.optusnet.com.au/~sarahstirling.

it helped heaps! you have no idea
sarah
(02.04.2007, 14:04)

Tanya:-
Stu, you totally rock!! I have been trying to figure out how to make my husband's website look better (even though it was constructed by an amateur, me). This is SWEEEET! Question about your example www.cssplay.co.uk/menu/gallery_click.html - nogo, how can I make the text appear to the right of the project photo (see portfolio page) of www.bata-architects.com/index.html; guessing I have to change the style sheet, just not sure what to change.

Cheers!
(03.04.2007, 18:26)

Stu:-
Tanya, I have corrected a few errors and it now works in IE and FF etc.
www.cssplay.co.uk/test/taylor.html
(04.04.2007, 22:47)

Tanya:-
Stu, I am humbled by your generousity. Thanks for taking the time out to assist. I am more than happy to support your site.
(09.04.2007, 17:28)

Bettina:-
Stu, thank you for sharing. I love the site and am learning a lot.

I have a question about the photo gallery, 'it's a dogs life.' I have followed your tutorial for a personal site and the photo gallery works like a charm. I want to add a second gallery on a separate page and did so naming the new page containerb because I didn't want the same background photo and of course have used different images. It worked also... however since adding the second page with the new gallery, the original gallery doesn't work any longer..ie when I hover over the thumbnails nothing happens. I removed the second gallery and the original works again. Any suggestions would be greatly appreciated. Thank you
(16.05.2007, 22:18)

Stu:-
Bettina, if you have renamed the second page container div to <div id="containerb"> and changed all the styles to #containerb then you should not have any problems.
(16.05.2007, 22:39)

Bettina:-
Got it! I started over...must have forgotten a 'b' somewhere. Anyway, thanks for your great script!
(18.05.2007, 21:12)

sophie dancourt:-
Stu
thank you so much for the tutorial for the gallery, it works well under IE7 but it doesn't under IE6 when I hover over the thumbnails nothing happens? It will be soon on line
(22.05.2007, 18:32)

Stu:-
Sophie, check that you are using a standards compliant doctype.
(22.05.2007, 20:05)

John Lodge:-
Hello Stu

Your css demos are wonderful examples of what can be achieved with css, and I have learned a lot from seeing and using them.

I have however, used your gallery demo in an environment where it is combined with phpThumb and lightbox, for good effects. After some work , it works perfectly in Firefox, but the thumbnails each repeat the number of times equal to the number of thumbnails in IE6. I cannot see any obvious reason why it should do this, and would appreciate any help you are able to give.

Best regards

John Lodge
john.lodge@myvoip20.com
(07.08.2007, 22:32)

Kevin W:-
Love this 1. I have a question. On a demo of this tutorial here www.webreference.com/programming/css_gallery/examples/gallery.htm

How do I make it so the background image it loads with is changed when a new image is mouseovered. My image just loads on top of the back.jpg background.

www.rainbowartglass.com/demo/#nogo

kevinw
aol/yahoo=kevinwolfk5
kevino.williams@gmail.com
(31.08.2007, 15:14)

Kamilla:-
Hello! I have found a gallery that i would like to use on my website with the name A Photograph Gallery. But how do i download it?
(25.09.2007, 15:01)

Mauro Minelli:-
There is no download link.
(29.02.2008, 03:21)

jaes:-
hello i was wonderin if you could tell me please, what type of programing is this called and where would be a good place to start to learn how to do it. I have loked up css but there does not seem to be anything secifically related to this, nor xml flash, or javascript, if these have anything to do with making a gallery, also what program would i need to make a image gallery in. Thank you. my email address is, sendtoo@hotmail.co.uk
(26.03.2008, 20:43)

Lucinda:-
HI Stu;

Why it works in IE but not in firefox?

Thanks
(30.06.2008, 14:14)

Christoph:-
I like this gallery very much. i want to embedd it in my own page. is it possible that you give me a downloadlink or tell me how to build it on my own webspace.
with best regards
Christoph
(30.09.2008, 18:05)

Perry:-
Stu,

Do you know of an easy way to display an array of different sized logos on a web page that naturally wrap when the web page is resized?

I know that this may sound terribly simple, but I haven't really tried many different things I found on the net without too much joy.

I am just looking to display the logos of companies I am currently working with on a plain white background without a haphazard display due to the different sizes of the various logos.

Any ideas?
(19.10.2008, 16:59)

Clint:-
Hi,
I like the concept of using thumbnails and having the big picture show up. I was wondering if there is a way to do this using html graphics. I have some charts that I want to use on a page that are linked to SharePoint. It would be nice to be able to hover over the thumbnail and have the big graphic pic show. Again the pics are saved as html so they can be updated.
(25.11.2008, 16:22)

Erin:-
Hello there! So ive read the FAQs and learned that in order to get the code for your tutorials, you must copy what is in the <div> code, when (im guessing) you right click and select "view source" on the page? i dont know if this is right. if it is i still cant seem to manage to get the right code. im really frustrated with myself because all i want is the code, and i cant figure it out! ghwegnwj! could you help me?
(07.01.2009, 00:08)

Drazick:-
Is there an option to embed this gallery with in line HTML code without using CSS?
Let's say embed it into WP blog post?

Thanks
(07.04.2009, 22:12)

John:-
When I click on the tutorial for A Photograph Gallery I get the code for the one with dogs.

Also, no where in the code is there
anything about clicking to hold
the image.
(17.07.2009, 21:45)

Ralph:-
hello Stu, This gallery (A Photo Gallery 18/2/09) seems right for my purpose. Fifty annual amateur Musical Productions with around 16 to 20 photos per show. I propose a separate gallery for each show/year. I'd like permission to use it, please, and also I can't find a download button on the page. Thanks.
(24.09.2009, 21:50)

Stu:-
Check the site FAQs.
(24.09.2009, 21:55)

jugu:-
where are the download links of each demonstration, is there any one who used your any demonstration? why the hell you don't give the download links, & you are asking for donations, this is good way to make money for nothing. SCAM SCAM SCAM, be careful.
(01.11.2009, 04:50)

Stu:-
As my previous post, check the site FAQs. Some of my demos are self contained in the source code and the site FAQs will tell you where to look. Others have download links and those that require a support donation I will email a zip once this is made.
I have thousands of visitors who have given their support and received the demo zip files.
CSS play is not a scam, but is my showcase of how CSS can be used and advanced CSS techniques.
Only CSS play offers such demos and menus.
(01.11.2009, 08:26)

Peter:-
Hi Stu,
Do I need a PHP Hosting as I can't see working on my site.I can see the thumbnails but when you point on the thumbs the big photo doesn't come up?
Many Thanks
(15.07.2010, 11:34)

Stu:-
PHP is not needed for any of my demos.
Check that you are using a standards compliant doctype and that the path to your images and your image names are correct (upper and lower case letters etc.)
(15.07.2010, 12:25)

Mark:-
Hi Stu,

Thanks, this CSS gallery is exactly what I've been looking for -- simple, efficient and elegant. Perfect!
I noticed one issue which I hope you can help with:
Currently the #container background colour is set to #888, and if I move my mouse pointer from one thumbnail to another the large image correctly switches at the mid-way boundary between the thumbnails (with a padding of 21px between). But if I set the #container background to "none" or "transparent" and move the pointer between thumbnails, the large image disappears when I reach the edge of the first thumbnail and doesn't reappear until I reach the edge of the second thumbnail... the 21px of padded area between thumbnails is no longer considered part of the thumbnail's hover area.
This causes a lot of flickering in the large image area as the viewer moves their mouse around the thumbnails as the large image disappears when pointing to the padded areas.
Strangely enough this only happens in IE7, as it seems to work fine in Firefox. Can you suggest anything to correct this quirky behaviour for IE7?

Kind regards.
(20.07.2010, 12:29)

Courtney:-
Hi Stu,

Wonderful. Very helpful. I was wondering if there is a way to move the larger image to the right side of the screen? I have been reading through the code and trying a few things, but nothing seems to work the way I want. I still want the thumbnails to stay where they are, but I want the expanded larger image to justify to the right edge of the screen. Any advice?
(29.12.2010, 04:09)

matt:-
is it just me? i can't find the download anywhere... looked everywhere...! nice demo though
(17.12.2011, 20:17)

falcon:-
great gallery, your a very generous guy! just a quick question works beautifuly but the text doesnt reapear, photos do but not text , any ideas how i can solve this?

thanks
(15.02.2012, 10:51)

Stu:-
This demo?
Which browser?
(15.02.2012, 10:58)

falcon:-
the dog gallery, ie. 9 & firfox.

the text seems to be in the top left corner underneath the photo.

thanks for getting back to me so fast
(15.02.2012, 11:00)

Stu:-
My demo works perfectly in both these browsers.
(15.02.2012, 11:16)

falcon:-
I understand that, if possible what parts of the code would affect the text under the photo as it appears when images in a list but once i hide images i can not get the text to reapear.

any ideas? if not thanks anyway
(15.02.2012, 11:25)

Stu:-
Check that you are using a FULL standards compliant doctype as the first line of your code.
(15.02.2012, 11:29)

Falcon:-
i believe i am : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> wich is the dreamweaver default one, i tried a few others to no avail i guess its just a quirk, aprriciate your help tho :)
(15.02.2012, 11:40)

Falcon:-
haha problem solved, ihad changed the width of hover box thinking this would reduce the image down but alas all i did was delete space for the text what a fool i am! Thanks for taking the time to help me stu :)
(15.02.2012, 12:13)

Jeff:-
Hi,
1) Many thanks for sharing
2) Have looked at the page source and the 'A Photograph Gallery' gallery is kewl.
I have a single question ... when the page opens, is it possible to have the gallery display a large picture by default rather than having to click on thumbnail 1 ?
(31.08.2012, 15:21)

Remko:-
Hello Stu,
Used your script for my website. In my editor it works fine. However, when i test it in a browser, the hoover is not visible in the created div on the left, but right next to the thumbnail. It seems ituses the thumbnail as the relative container. How can i solve this?
(06.01.2013, 14:40)



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