PDA

View Full Version : 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/csslibrary/item/css-popup-image-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.

<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)


<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



div.text{
width: 100%;
}


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

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