CSS Popup Image Viewer Modification

[javrana]

Hello all,

I would like to modify the CSS originally created here:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

Here are my three questions/modifications:

1) How would you edit the styles if you wanted the enlarged picture to appear to the left of the image? I've tried toying with it some, and can get the enlarged image to appear more to the left of the image, but all it does is stretch the enlarged image from the far right to the far left.
2) Is it possible to edit it so that the enlarged image will disappear as soon as you move off the thumbnail. Right now, the large image stays on the screen as long as the mouse is on the thumbnail or anywhere on the expanded image.
3) Is there a way to make your webpage length expand if the large image drops below the page? I have a thumbnail that is close to the bottom of the page. Currently, if it is expanded the image goes below the current length, and it is hidden from view. It would be nice if the page length could lengthen when the image is there, and shrink when it is not. Or, instead of the image enlarging below the thumbnail, if it would expand upwards, that would work too. Thanks in advance.

[Medyman]

How would you edit the styles if you wanted the enlarged picture to appear to the left of the image? I've tried toying with it some, and can get the enlarged image to appear more to the left of the image, but all it does is stretch the enlarged image from the far right to the far left.

Make the highlighted changes (red are styles that should be deleted);


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

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

}



Is it possible to edit it so that the enlarged image will disappear as soon as you move off the thumbnail. Right now, the large image stays on the screen as long as the mouse is on the thumbnail or anywhere on the expanded image.

You have two options. The one that I recommend if you want this to happen is to not overlap the thumbnail and the enlarged image. You might still want to add the below style as assurance.

The second option is to add the following style. It will not work in IE6. If the thumbnail and large image overlap and you mouse over the overlapped area, you will get a flickering effect.


span:hover {
visibility:hidden!important;
}



Is there a way to make your webpage length expand if the large image drops below the page? I have a thumbnail that is close to the bottom of the page. Currently, if it is expanded the image goes below the current length, and it is hidden from view. It would be nice if the page length could lengthen when the image is there, and shrink when it is not. Or, instead of the image enlarging below the thumbnail, if it would expand upwards, that would work too.

You'll need to employ some JavaScript for that. Check in the JS forum for further advice on how to go about doing that.

[javrana]

Thanks, this got me exactly what I needed.