PDA

View Full Version : Need Help Please with Pop-up Image viewer



mrigby
06-12-2006, 05:24 PM
I need some help with the CSS Pop-up Image Viewer. This one:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-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. :confused: 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

mrigby
06-13-2006, 11:49 AM
Bump. Please, does anyone have any thoughts or idea's on this?

mrigby
06-13-2006, 12:07 PM
Thanks to John for an answer that worked perfectly. All is well:D