Help to tweak image thumbnail viewer please!

[stephie]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:
I've added the above script to my page http://www.stephanieboon.co.uk/html/portfolio_pages/blackalbum.htm
and although it's working well there are a couple of minor irritations that I'd like to be able to fix... on some of the views there's a white line around a couple of sides (as though the image doesn't fit the space properly) and one of the images is transparent in the bottom half (the one with 'class' in the image)! I'm new to css and scripting so don't know where to begin to look to fix the problem - any help gratefully accepted. I've checked it in IE and Firefox and the problem seems to be in both.

Also I've customised the css a bit so that the background colour and font match the rest of the website, but I'd like to see what the title looks like in white font (rather than the standard black) and don't seem to be able to find where to alter this - any ideas?!

Thanks for reading! Stephie:confused:

[jscheuer1]

That one image (class) is messed up. It looks like it may be corrupted. Navigate to it by itself and you will see what I mean:

http://www.stephanieboon.co.uk/images/exhibitions/black_album/page20lg.jpg

Similarly, the white lines are a part of those other images. If they are viewed against a black (or any dark) background, you can see them. You can crop those white lines off in an image program. Once you have your images looking the way you want locally, upload them to the server again.

For the font color of the 'title' I think you mean this (changes/additions red in thumbnailviewer.css):



#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #313131;
color:white;
}

[stephie]

That one image (class) is messed up. It looks like it may be corrupted. Navigate to it by itself and you will see what I mean:

http://www.stephanieboon.co.uk/images/exhibitions/black_album/page20lg.jpg

Similarly, the white lines are a part of those other images. If they are viewed against a black (or any dark) background, you can see them. You can crop those white lines off in an image program. Once you have your images looking the way you want locally, upload them to the server again.

For the font color of the 'title' I think you mean this (changes/additions red in thumbnailviewer.css):



#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #313131;
color:white;
}

Many thanks John - don't know why I didn't think to check the images for white edges first...sometimes we just need to be reminded of the obvious I guess!!

Thank you also for the code - I tried it out and it worked just fine, except that I made a design decision to keep the font a dark colour! Very useful for future use though. Can you recommend anywhere on-line to learn some basic css - I generally do it through Dreamweaver, rather than writing the stylesheets manually, but I think I'm at the stage where learning a bit more about it might be useful!

Again, many thanks for your help - DD is a great site: I've learnt so much since I found you!! :D

[jscheuer1]

http://www.w3schools.com/

is good for learning many web publishing techniques, including css.

A good css reference is:

http://www.blooberry.com/indexdot/css/propindex/all.htm

[stephie]

Many thanks for your time John, much appreciated!

[boxxertrumps]

looks nice. good job.