PDA

View Full Version : CSS Smart Image Enlarger - centre enlarged iMAGE



therook
03-24-2011, 10:29 PM
1) Script Title: CSS Smart Image Enlarger

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

3) Describe problem:

When hovering over the thumb image the enlarged image is positioned relevant to the thumb. I have place 5 images into 5 columns within a row of a table but would like the enlarged image to always appear central in the page not relevent to the thumb

azoomer
03-24-2011, 10:37 PM
Maybe one of these scripts would fit your needs
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

ajfmrf
03-25-2011, 03:33 AM
http://web-user.net/1test/3/5.html

I made three images in one column and set the larger image to be right of the thumbnails pretty close to them.

You can add images and align them as you wish.

Bud

therook
03-25-2011, 07:00 AM
Thanks for pointing me in the right direct, I have used style http://www.dynamicdrive.com/style/cs...image-gallery/ which looks a look better, BUT I do have another issue.

The 1st row works fine, but the enlarged image when on the 2nd row appears over the top of the row, rather the below it meaning that you have to move off all the images for it to disappear to select the next thumb.

see http://bestofbritishma.co.uk/BOB2/gallery.html

The only solution I can think of is to create multiple css styles and set the top different everytime

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

therook
03-25-2011, 07:17 AM
sorry wrong link its
http://bestofbritishma.co.uk/BOB2/Gallery.html

ajfmrf
03-25-2011, 05:27 PM
I just looked and it worked perfectly for me.I use firefox 3.6.16

The image below the one with the championship banners is not showing but all of the images show below the thumbs.

Bud