Results 1 to 8 of 8

Thread: popup image viewer - large images appear in wrong place

  1. #1
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default popup image viewer - large images appear in wrong place

    I am using the CSS popup image viewer - I am using the code from here http://www.dynamicdrive.com/style/cs...-image-viewer/
    this is the exact code I am using in my css file

    Code:
    <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: 0px;
    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;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 300px;
    left: 60px; /*position where enlarged image should offset horizontally */
    
    }
    
    </style>
    The popup images appear at the top left of the page, and I would like them to appear at the same level as the thumbnail image - so if I have many thumbnails displayed down the page, the main image should display level with the thumbnail.
    I hope I explained this correctly!

    Can anyone help?
    Thank you so much for your time.

  2. #2
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    top: 300px;
    left: 60px; /*position where enlarged image should offset horizontally */

    this is the area you want to work with. I've used this code before

    maybe top:30 would be better but i'm not to sure about changing the hight it displays at.
    I don't think that is an off set.

    you could add position:relative to the last class and then set top:1 px.

    I haven't tried that but it may work; but I don't think it will work in all browsers.

  3. #3
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your suggestions, but no good I'm afraid.

    I can adjust the top and left pixel values, but this just changes the position of the large image in relation to the top of the page.
    If I add position: relative to the last class, then the page goes haywire - doesn't display correctly at all.

    I need the large image to display relative to the thunmbnail - rather than to the top of the page.

  4. #4
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    adding a position to the last class sould make it relative to the thumb nail. when you say the page go haywire where does the large image end up.
    i'm also thinking. should be relative.
    it's just a hunch I'll see what I can do

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

  5. #5
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    this was so stupid here is the working code.
    Code:
    <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: 0px;
    left: 0px;
    /*border: 1px dashed gray;*/
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    
    border-width: 0;
    padding: 2px;
    
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
     
    visibility: visible;
    top: 2px;
    left: 2px;
    
     /*position where enlarged image should offset horizontally */
    
    }
    </style>
    just use this it wasn't as hard.

  6. The Following User Says Thank You to riptide For This Useful Post:

    janeymac (07-31-2008)

  7. #6
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your reply - Unfortunately it didn't work though.
    I uploaded the new code into the css file & this is the result http://www.fencesunlimited.net/customwoodfences.php

    Any ideas as to why this is?
    When I look at the example code here http://www.dynamicdrive.com/style/cs...-image-viewer/ the large images appear relative to the thumbnail, but mine are still appearing at the top of the page.
    any help would be greatly appreciated!
    Thank you

  8. #7
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default A little bit further

    So I have tried playing with the CSS some more and now the large images are displaying relative to the thumbnails, but they are not displaying on the page correctly.
    this is the CSS file I am using
    Code:
    <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: 0px;
    left: 0px;
    /*border: 1px dashed gray;*/
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    
    border-width: 0;
    padding: 2px;
    
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    position: relative; 
    z-index: 60;
    visibility: visible;
    top: 2px;
    left: 2px;
    
     /*position where enlarged image should offset horizontally */
    
    }
    </style>
    and this is the result
    http://http://www.fencesunlimited.ne...woodfences.php

    any help anyone can give would be greatly appreciated.
    Thank you!

  9. #8
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default the answer

    found the answer - just in case it helps someone else...

    this is the code for the css file that worked. The large image is now relative to the thumbnail (not the top of the page) and the large images now display correctly.

    Code:
    /* CSS Document */
    
    <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: transparent;
    padding: 0px;
    left: 0px;
    /*border: 1px dashed gray;*/
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    right: 2px;
    
     /*position where enlarged image should offset horizontally */
    
    }
    </style>
    the corrected page http://http://www.fencesunlimited.ne...woodfences.php

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
  •