CSS popup image viewer [Archive] - Dynamic Drive Forums

designkitt

10-08-2006, 10:48 PM

Hello, I am using the image pop up viewer and need help with positioning the enlarged image that pops up. I would like this larger image to pop up as much in the center of the page as possible. Played around with the horizontal and vertical attributes but have not been able to make this work. Here's the original 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>

Here is the url to the page I used it on and the html

http://www.kittelbergerdesign.com/donnasacrylics.html

<!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;
padding: 5px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: 50px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:5px;
}

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

}

a:link
{color:#000000;text-decoration:none;background-color:transparent;font-size: 9pt; font-family: sans-serif}
a:visited
{color:#000000;text-decoration:none;background-color:transparent;font-size: 9pt; font-family: sans-serif}
a:hover
{color:#000033;text-decoration:underline;background-color:transparen
t;font-size: 9pt; font-family: sans-serif}
a:active
{color:#000033;text-decoration:none;background-color:transparent;font-size: 9pt; font-family: sans-serif}

h1 {font-weight: lighter;
font-size: 8pt;
font-family: verdana, sans-serif;
color:#000000; }

h2 {font-weight: lighter;
font-size: 8pt;
font-family: verdana, sans-serif;
color:#ffffff; }

h3 {font-weight: bold;
font-size: 10pt;
font-family: verdana, sans-serif;
color:#000000; }

</style>

</head>
<body bgcolor="#ffffff">

<table border="0" height="30" width="760" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
<tr>
<td colspan="38" align="center">
<img src="images/headerpano.jpg" width="760" height="107" border="0" align="center">
</td>
</tr>

<tr>
<td colspan="38" bgcolor="#cccccc" height="30" align="center width="760">

<table border="0" height="30" width="760" cellpadding="0" cellspacing="0">

<tr>
<td colspan="6" width="120" align="center">
<h1>
painted glass

</td>

<td colspan="6" width="120" align="center">
<h1>

acrylic paintings

</td>

<td colspan="6" width="120" align="center">
<h1>
painted furniture

</td>

<td colspan="6" width="120" align="center">
<a href="http://www.ribbonrehab.com" border="0" target="blank">
ribbon rehab
</a>
</td>

<td colspan="6" width="120" align="center">
<a href="http://www.piersonrealtors.com/agent.php?id=24698&site=1" border="0" target="blank">
real estate

</a>

</td>

<td colspan="6" width="120" align="center">
<a href="donnaslogodesigns.html" border="0">
logo design
</a>

</td>
</tr>
</table>
</td>
</tr>

<table border="0" width="760" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center">

<tr>

<td colspan="1">
<img src="images/trans.gif" width="20" height="1">
</td>

<td colspan="3">

<a href="donnarainesindex.html" border="0">
home
</a>
</td>

<td colspan="30" align="center">

<img src="images/logodesignheading.jpg" width="430" height="78" align="center">

</td>

<td colspan="3" align="left">
<a href="mailto:glasspony4@yahoo.com" border="0">
contact
</a>

</td>

<td colspan="1">
<img src="images/trans.gif" width="20" height="1">
</td>
</tr>

<tr>
<td colspan="38" width="760" align="center" bgcolor="#000000">

<br>
<font face="verdana" size="2" color="#ffffff">
<blockquote>
<b>Most of my paintings are bold & colorful portraits of horses on canvas done by commission. I work from photographs you provide but I especially like to work from photos I have taken.
</B>
</font>
</blockquote>
</td>
</tr>

<tr>
<td colspan="38" align="center" bgcolor="#000000">

<table border="0" width="760" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">

<tr>
<td colspan="8" align="right">
<a class="thumbnail" href="#thumb"><img src="images/acrylic1.jpg" width="131px" height="175px"" border="0" /><span><img src="images/acrylic1lg.jpg" / align="right"><br />"Dobby", 2005, 24" X 30" Acrylic Painting on canvas, SOLD</span></a>

</td>

<td colspan="10" align="right">

<a class="thumbnail" href="#thumb"><img src="images/acrylic2.jpg" width="198px" height="162px"" border="0" /><span><img src="images/acrylic2lg.jpg" / align="right"><br />"Wuz & Little Bit", 2005, Acrylic Painting on canvas, 24" X 30", SOLD </span></a>

</td>

<td colspan="10" align="right">

<a class="thumbnail" href="#thumb"><img src="images/acrylic3.jpg" width="104px" height="134px"" border="0" /><span><img src="images/acrylic3lg.jpg" / align="right"><br />"Young Fox", 2005, 11" X 14", Acrylic Painting on canvas, framed original available</span></a>

</td>

<td colspan="2" align="center">
<a class="thumbnail" href="#thumb"><img src="images/acrylic4.jpg" width="115px" height="134px"" border="0" /><span><img src="images/acrylic4lg.jpg" / align="right"><br />"Young Hound", 2005, 11" X 14", Acrylic Painting on canvas, framed Original available</span></a>

</td>

</tr>

<tr>

<td colspan="8" align="right">

<a class="thumbnail" href="#thumb"><img src="images/acrylic5.jpg" width="126px" height="173px"" border="0" /><span><img src="images/acrylic5lg.jpg" / align="right"><br />"Farley", 2005 w/side saddle, 24" X 30, Acrylic Painting on canvas, SOLD</span></a>

</td>

<td colspan="15" align="right" valign="bottom">

<br>

<a class="thumbnail" href="#thumb"><img src="images/acrylic6.jpg" width="231px" height="296px"" border="0" /><span><img src="images/acrylic6lg.jpg" / align="right"><br />"Tory", 2006, 18"X 24", Acrylic Painting on canvas, SOLD</span></a>

</td>

<td colspan="15" align="center">

<a class="thumbnail" href="#thumb"><img src="images/acrylic7.jpg" width="161px" height="128px"" border="0" /><span><img src="images/acrylic7lg.jpg" / align="right"><br /> "SHT, Jump Judges", 2006, Acrylic Painting on canvas, Framed original 135 dollars</span></a>

<br>

<img src="images/trans.gif" width="100" height="1">
<br>

<a class="thumbnail" href="#thumb"><img src="images/acrylic11.jpg" width="221px" height="141px"" border="0" /><span><img src="images/acrylic11lg.jpg" / align="right"><br />"Family Hunting", 2006, 12" X 18", Acrylic Painting on canvas, Framed original 400 dollars (hand painted frame)</span></a>

</td>

</tr>

<tr>

<td colspan="8" align="right">

<a class="thumbnail" href="#thumb"><img src="images/acrylic8.jpg" width="128px" height="167px"" border="0" /><span><img src="images/acrylic8lg.jpg" / align="right"><br />"Appy Foal", 2005, Acrylic Painting on canvas, 11" X 14", framed original available</span></a>

</td>

<td colspan="10" align="right">

<a class="thumbnail" href="#thumb"><img src="images/acrylic9.jpg" width="199px" height="94px"" border="0" /><span><img src="images/acrylic9lg.jpg" / align="right"><br />"3 Pairs of Boots", 2006, Acrylic Painting on canvas, 6" X 12", Framed original 135 dollars</span></a>

</td>

<td colspan="14" align="center">

<a class="thumbnail" href="#thumb"><img src="images/acrylic10.jpg" width="279px" height="94px"" border="0" /><span><img src="images/acrylic10lg.jpg" / align="right"><br />"5 Pairs of Boots", 2006, 8" x 24", Acrylic Painting on canvas,
Unframed 300 dollars</span></a>

</td>

</tr>

</table>
</td>
</tr>

<tr>
<td colspan="38" bgcolor="#2a4319" height="30" align="center">

<table border="0" height="30" width="760" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7" width="140" height="30" align="center">

<a href="donnarainesindex.html" border="0">
home
</a>

</td>

<td colspan="7" width="140" height="30" align="center">
<a href="donnaaboutme.html" border="0">
about donna
</a>
</td>

<td colspan="7" width="140" height="30" align="center">
<h2>
upcoming events

</td>

<td colspan="7" width="140" height="30" align="center">

<h2>
related links

</td>

<td colspan="7" width="140" height="30" align="center">
<h2>
contact

</td>
</tr>

<tr>
<td colspan="38" align="center" bgcolor="#ffffff">
<font fact="verdana" font size="1" color="black">
Donna Raines  (585)000-0000
<img src="images/trans.gif" width="400" height="1">

</font>

</td>
</tr>
</table>

</body>
</html>

jscheuer1

10-14-2006, 08:58 AM

Due to the fact that your page must scroll vertically on most user's screens and that users may have much wider or narrower windows than you are designing for, javascript should probably be employed. A fairly good script for this is:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

and also:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Also, keep in mind that since window sizes will vary greatly, it is best to not use up so much screen real estate for any effect of this sort.

Although it has its drawbacks (especially if poorly executed), a pop up window script might be a good fit considering the size of your pop ups. If you go that route, allow a non-javascript fall back like a link to the image or a page with the image and text.

designkitt

10-17-2006, 12:07 PM

John, thank you for your help with this. I ended up creating a separate page that enlarged the pic and included text.

Now I have another site where the images require some text description and would really like a script such as image thumbnail viewer II vs. lightbox viewer, that supports text with the pic. The images need to enlarge to approx. 3" x 4". Do you know of any script that could do this?

THANKS!