Results 1 to 3 of 3

Thread: Need Help Please with Pop-up Image viewer

  1. #1
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Need Help Please with Pop-up Image viewer

    I need some help with the CSS Pop-up Image Viewer. This one:

    http://www.dynamicdrive.com/style/cs...-image-viewer/

    I have installed the pop-up viewer code into one of my webpages. I put everything where it was supposed to go, and when I preview the page in IE using Dreamweaver 8 it looks fine. However now that I have uploaded my index file, images folder etc, the Thumbnails will not show up for me at all. All I get is the empty boxes with the red X in them. I have gone into my Internet options and made sure that I can view images, and when I mouseover the empty thumbnail spot the larger pictures show up, but not being able to see the thumbnails is driving me crazy. Please, someone help me. I would appreciate any help and all replies, I have been trying everything I can think of for 3 days now. Here are the 2 pieces of coding I have in the page. First the code for the page Head:

    <!-- Source: Dynamic Drive CSS Library -->
    <!-- URL: http://www.dynamicdrive.com/style/ -->

    <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: #999999;
    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;
    }

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

    }

    </style>

    Here is the HTML code:

    <a class="thumbnail" href="#thumb"><img src="images/tnkirasnow.jpg" width="100px" height="66px" border="0" /><span><img src="images/kirasnow.jpg" /><br />
    My Puppy.</span></a>

    <a class="thumbnail" href="#thumb"><img src="images/tnsunset.jpg" width="100px" height="66px" border="0" /><span><img src="images/sunset.jpg" /><br />
    Sunset spectacular</span></a>

    <br />
    <br />

    Here is the page where it is supposed to be working:

    http://www.michaelgrigby.com/business/index.html


    Can some please help me, I would be eternally in your debt. Thank you.

    MR

  2. #2
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bump. Please, does anyone have any thoughts or idea's on this?

  3. #3
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Got the answer

    Thanks to John for an answer that worked perfectly. All is well

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
  •