CSS Popup Image Viewer

**scumble** · 11-17-2007, 10:34 PM

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...age-viewer/P90

3) Describe problem: How do I adapt this to my website? (please use terms such as 'take out this bit' and 'put in this', cos I don't understand computerspeak. Many thanks,
Scumble.

**Jas** · 11-17-2007, 11:39 PM

If you mean installing the script:

Put this in the Head section on your page -- you'll see a <head> and </head> tag in your source code, put it right before the </head> tag.

Code:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.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: 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>

Now put this somewhere in the body where you want it, modifying the URLs. (in bold/red)

Code:

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

If you mean modifying the script, it depends on what you want to do.

**scumble** · 11-18-2007, 10:57 AM

If I create a full-size version of my picture, and I call it 'apple.jpg', and a small version called 'apple_small.jpg', what do I do next? I don't understand what I am meant to do with the '#thumb' thing in the piece of script for the body?

**scumble** · 11-18-2007, 02:50 PM

Hi Jas. Thanks for your help. I think I've cracked it. It seems that the popup pictures need to be in a separate folder (in the original script this appears as 'media/'. I have called it 'pics/'. I've also changed the line around the popup from a dashed gray line to a solid black line.
However I now have a slightly different problem. When the popup picture opens, the writing underneath it now appear vertically, like this

one
two
three
four
five

Can you help again?

Scumble.

**Jas** · 11-20-2007, 07:35 PM

try adding something like this to your CSS

Code:

div.text{
width: 100%;
}

and use something like this for your body (I added breaks so you could see it better):

Code:

<a class="thumbnail" href="#thumb">
<img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" />
<span><img src="media/tree.jpg" /><br />
<div class="text">A picture</div>
</span></a>

I haven't had a chance to try it, but it may work. (don't pull your hair out if it doesn't-- just let me know) If it doesn't work, I'll see what I can do when I get home later.

Thread: CSS Popup Image Viewer

Thread Tools

Search Thread

CSS Popup Image Viewer

Bookmarks

Bookmarks

Posting Permissions