Enlarged Photo too large

[yorksom]

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...-image-viewer/

3) Describe problem: When I use this script the enlarged photo is too large to be seen on the screen.

I am making a website regarding a tanker convoy which almost got annihilated, in W.W 2. and wish to put some photos up of the ships that were sunk (7 our of the 9)

Apologies for asking but will be 72 shortly and the old grey cells do not function as well as they used to.

Thanks for any help and best wishes for the forthcoming festive period

David

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[yorksom]

Hallo - sorry to be a pain in the butt but the webpage is not up yet - I am still writing the webpage. I will attach the webpage which I am building.

Hopefully I have attached it

I do appreciate your time in looking at the problem

Regards

David

[jscheuer1]

No attachment I see. Um, the best thing would be to edit your images in an image editing program like Photoshop or The GIMP. Resize them to the size you want.

Other than that you could attempt to have the browser resize them via css. That wastes disk space on the server and your and your user's bandwidth but can usually be done.

With this script I'd try by setting max-width and max-height style for the larger images, something like (additions highlighted):

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
max-width: 450px;
max-height: 375px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

Set the above values (red) as desired.

[yorksom]

Hallo - thanks for your help I have decied to use someting completely diferent and it works well - appreciate you taking the time to help.

Best wishes to you and everyone for 2012