Results 1 to 3 of 3

Thread: CSS popup image viewer

  1. #1
    Join Date
    May 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS popup image viewer

    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&nbsp;&nbsp;(585)000-0000
    <img src="images/trans.gif" width="400" height="1">

    </font>

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




    </body>
    </html>
    Last edited by ddadmin; 10-25-2006 at 10:49 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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/dynamici...box2/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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •