Log in

View Full Version : CSS Popup Image Viewer - CSS Help


kristell
03-11-2008, 10:09 AM
Hi everyone.

I have found your forum through searching for a script... so this is what want to do

I want a photo gallery page that when you hover your mouse, the picture enlarges. I found the script

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P230/

this is exactly what I want to do.

But I have never worked with css before

so do I need to do both the css and the html?

if I put thumbnails on the page will the css automatically pick that up?

can you please give me some simple instruction.

I work mainly with frontpage and have built some limited web sites - just simple stuff.

thank you
codeexploiter
03-11-2008, 10:40 AM
Yes you need both HTML and CSS in order to make this work. As far the HTML is concerned you have to change the HTML in a manner that it works for your purpose, but can treat the default HTML as a demo one.
kristell
03-11-2008, 11:37 AM
ok - well most of that has gone whoosh over my head!

I will need to make a css page? with the code on it exactly as it is.

Then the html I put on my web page and just the 'photo' details

is that right?

Can I use a ready made css page and add the code to it to save me the hassle?

Where can I find ready made css pages?? (for an easy life)
boogyman
03-11-2008, 01:08 PM
Please read our Posting Policies (http://dynamicdrive.com/forums/showthread.php?t=24866)
kristell
03-11-2008, 01:55 PM
I'm sorry - I apologise most sincerely - I thought the forum was for asking questions - silly me!! I will go back to being ignorant - it was bliss.
boogyman
03-11-2008, 03:36 PM
this forum is for asking questions, but a title of "total newby" is not enticing for someone to look at it and try to help you.
kristell
03-11-2008, 05:44 PM
I did try to change it but it wouldn't let me - I could only change the message not the title - can somebody do that?
rangana
03-12-2008, 05:50 AM
I'll compile the codes for you. All you need to do is change the image source on the codes highlighted below.

This will keep you going:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>
</head>
<body>
<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>
<br/>
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
</body>
</html>


See if it helps ;)
kristell
03-15-2008, 09:28 AM
That is exactly what I was looking for - am very grateful - will go and try it out now.
kristell
03-15-2008, 11:03 AM
It's working well so far - can you tell me though I would be able to have the thumbnails going across the page and then down rather than all on the left hand side. I have tried this but then the pop up's go missing!!

Thanksx