Results 1 to 6 of 6

Thread: CSS Smart Image Enlarger - centre enlarged iMAGE

  1. #1
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Smart Image Enlarger - centre enlarged iMAGE

    1) Script Title: CSS Smart Image Enlarger

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...mage_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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default I think this could help get you started in the right direction

    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
    Last edited by ajfmrf; 03-25-2011 at 03:34 AM. Reason: wrong wording

  4. #4
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;
    }

  5. #5
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default hmmmm

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •