Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Oct 2008
    Posts
    5
    Member #
    17519
    http://lucygradyinman.com/photography.php

    I am seriously about 4 days into trying to figure it out myself. Can anyone tell me why my site's thumbnail images don't show up? It works fine in Firefox 3 and Safari 3 on my mac. Please help. I dunno if this is needed but I will post my code below. 1st section is photography.php and second section is photography.html which is referenced in the php. This page nearly validates except for one instance, and I have no idea how to fix it. I cannot dl IE because I am on mac but I have been using browsershots.org and http://www.ipinfo.info/netrenderer/ and they do not display my thumbnail images. Any help would be greatly appreciated. I've put a lot of work into this site and am driving myself crazy. If I can figure it out for photography.php / .html , I can apply if for the rest of my pages as well. THANK YOU in advance, -Marcus

    PHP Code:
    PHOTOGRAPHY.PHP START
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Lucy Grady Inman:photography</title>
            <meta name="description" content="Lucy Inman Design Portfolio"/>
            <meta name="keywords" content="lucy, grady, inman, portfolio, design"/>
             <!--JS POPUP-->
             <script type="text/javascript" src="highslide/highslide.js"></script>
            <script type="text/javascript">
        hs.registerOverlay(
            {
                thumbnailId: null,
                overlayId: 'controlbar',
                position: 'top right',
                hideOnMouseOut: true
            }
        );
        hs.graphicsDir = 'highslide/graphics/';
        hs.outlineType = 'rounded-white';
            </script>
            
            <link href="style.css" rel="stylesheet" type="text/css" media="all" />
            <link rel="shortcut icon" href="favicon.ico"/>
            
            <!--IMAGE ROLLOVER JS-->
            <script type="text/javascript">
    var revert = new Array();
    var inames = new Array('design','pdf', 'extra', 'fao', 'photography', 'logos', 'contact', 'photographysplash', 'home', 'photo01', 'photo02', 'photo03', 'photo04', 'photo05', 'photo06', 'photo07', 'photo08', 'photo09', 'photo10', 'photo11', 'next');

    // Preload
    if (document.images) {
      var flipped = new Array();
      for(i=0; i < inames.length; i++) {
        flipped[i] = new Image();
        flipped[i].src = "images/"+inames[i]+"2.jpg";
      }
    }

    function over(num) {
      if(document.images) {
        revert[num] = document.images[inames[num]].src;
        document.images[inames[num]].src = flipped[num].src;
      }
    }
    function out(num) {
      if(document.images) document.images[inames[num]].src = revert[num];
    }
    </script>

            
    </head>

    <body>
    <div id="everything">
    <img src="images/buffer.jpg" alt="lgidesign"/>
    <a href="design.php"><img src="images/design.jpg" name="design" alt="design" onmouseover="over(0)" onmouseout="out(0)"/></a>
    <a href="lgidesign.pdf"><img src="images/pdf.jpg" name="pdf" alt="pdf" onmouseover="over(1)" onmouseout="out(1)"/></a>
    <a href="extra.php"><img src="images/extra.jpg" name="extra" alt="extra" onmouseover="over(2)" onmouseout="out(2)"/></a>
    <a href="http://jcmorrow.com/fao/faorebrand.html"><img src="images/fao.jpg" name="fao" alt="fao" onmouseover="over(3)" onmouseout="out(3)"/></a>
    <a href="photography.php"><img src="images/photography.jpg" name="photography" alt="photography" onmouseover="over(4)" onmouseout="out(4)"/></a>
    <a href="logos.php"><img src="images/logos.jpg" name="logos" alt="logos" onmouseover="over(5)" onmouseout="out(5)"/></a>
    <a href="contact.php"><img src="images/contact.jpg" name="contact" alt="contact" onmouseover="over(6)" onmouseout="out(6)"/></a>
    <img src="images/photographysplash.jpg" name="photographysplash" alt="photographysplash" onmouseover="over(7)" onmouseout="out(7)"/>
    <span id="index">
    <a href="index.php"><img src="images/home.jpg" name="home" alt="home" onmouseover="over(8)" onmouseout="out(8)"/></a>
    </span>
    <div id="gallery">
    <?php include ('photography.html');
    ?>
    </div>
    </div>
    </body>
    </html>

    PHOTOGRAPHY.HTML START
    <div id="fixed">
    <table summary="work" cellspacing="0" width="760">
    <tr><td colspan="10">
    <!--NESTING TABLE CONTAINER START ABOVE-->
    <table summary="work" cellspacing="13">
    <tr><td colspan="10"></td>
    <td>
    <a href="images/photo01.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo01thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo01" onmouseover="over(9)" onmouseout="out(9)"/></a>
    </td>

    <td>
    <a href="images/photo02.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo02thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo02" onmouseover="over(10)" onmouseout="out(10)"/></a>
    </td>

    <td>
    <a href="images/photo03.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo03thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo03" onmouseover="over(11)" onmouseout="out(11)"/></a>
    </td>

    <td>
    <a href="images/photo04.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo04thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo04" onmouseover="over(12)" onmouseout="out(12)"/></a>
    </td>

    <td>
    <a href="images/photo05.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo05thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo05" onmouseover="over(13)" onmouseout="out(13)"/></a>
    </td>

    <td>
    <a href="images/photo06.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo06thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo06" onmouseover="over(14)" onmouseout="out(14)"/></a>
    </td>

    <td>
    <a href="images/photo07.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo07thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo07" onmouseover="over(15)" onmouseout="out(15)"/></a>
    </td>

    <td>
    <a href="images/photo08.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo08thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo08" onmouseover="over(16)" onmouseout="out(16)"/></a>
    </td>

    <td>
    <a href="images/photo09.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo09thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo09" onmouseover="over(17)" onmouseout="out(17)"/></a>
    </td>

    <td>
    <a href="images/photo10.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo10thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo10" onmouseover="over(18)" onmouseout="out(18)"/></a>
    </td>

    <td>
    <a href="images/photo11.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/photo11thumb.jpg" alt="Photography by Lucy Grady Inman"
            title="Photography by Lucy Grady Inman" height="40" width="40" style="border-style:none" name="photo11" onmouseover="over(19)" onmouseout="out(19)"/></a>
    </td>

    <td>
    <a href="photography2.php"><img src="images/next.jpg" alt="Next Page" height="40" width="40" name="next" onmouseover="over(20)" onmouseout="out(20)"/></a>
    </td>
    </tr>
    </table>
    <!--NESTING TABLE CONTAINER END-->
    </td></tr></table>

    <div id="controlbar" class="highslide-overlay controlbar">
        <a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
        <a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
        <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
        <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
    </div>
    </div>

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2008
    Posts
    5
    Member #
    17519
    CSS, i forgot

    @charset "UTF-8";
    /* CSS Document */

    body
    {}

    #everything {
    width:1000px;
    height:570px;
    margin:30px auto 0px auto;
    }

    #index {position:absolute;
    float:left;
    margin:10px 0 0 -110px;
    z-index:1;
    }

    #gallery { position:absolute;
    float:left;
    margin:-50px 0 0 80px;
    z-index:1;
    }

    #fixed {position:absolute;
    width:1000px;
    height:80px;
    margin:0 0 0 0;
    padding:0;
    float:left;
    }

    margin:0px 0px 0px 0px;
    padding:0px 10px 0px 0px;
    }

    #textpanel {margin:200px 0 0 0;
    }

    #rightpanel {margin:39px 0 0 5px;
    }

    #footer {position: absolute;
    top: 455px;
    width:755px;

    margin:0 auto 0 auto;padding:0;
    text-align:center;
    }

    #navbar {
    position:absolute;
    width:130px;
    margin:0 0 0 870px;
    float:right;
    padding:0 10px 0 0px;
    line-height:1.3em;
    font-weight: bold;
    text-align:right;
    }

    img { border:0px; }

    img.center {
    display: block;
    margin:auto;
    padding:25px 0 5px 0;
    }

    h1 {line-height:1.4em;
    font-size:14px;
    margin-left:50px;
    margin-right:50px;
    }

    a {color:#999999;
    text-decoration:none;
    }

    a image {border:none;
    }

    a:hover {color:#999999; text-decoration: underline;}
    a:visited {}
    a:active {color:#FFFFFF; text-decoration:underline;}

    .smalltext {font-size:9px;
    }

    .bigtext {font-size:12px;
    line-height:20px;
    }

    .padding {padding:0 0 0 25px;
    }

    .indented1 {margin:0 0 0 1em;padding:0;
    }

    .color1 {color:#736F6E;
    }

    /*PRELOAD IMAGES*/
    .hiddenPic {display:none;}

    /*HIGHSLIDE NECESSARY CSS*/
    {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    }
    .highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    }
    .highslide-active-anchor img {
    visibility: hidden;
    }
    .highslide img {
    border: 2px solid gray;
    }
    .highslide:hover img {
    border: 2px solid white;
    }

    .highslide-wrapper {
    background: white;
    }
    .highslide-image {
    border: 2px solid white;
    }
    .highslide-image-blur {
    }
    .highslide-html-blur {
    }
    .highslide-html {
    background-color: white;
    }
    .highslide-html-content {
    position: absolute;
    display: none;
    }
    .highslide-caption {
    display: none;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    font-size: 9pt;
    border: 2px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
    }
    .highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: Helvetica Neue, sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;

    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    }
    a.highslide-credits,
    a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
    }
    a.highslide-credits:hover,
    a.highslide-credits:hover i {
    color: white;
    background-color: gray;
    }
    /* Styles for the popup */
    .highslide-wrapper {
    background-color: white;
    }
    .highslide-wrapper .highslide-html-content {
    width: 300px;
    padding: 5px;
    }
    .highslide-wrapper .highslide-header div {
    }
    .highslide-wrapper .highslide-header ul {
    margin: 0;
    padding: 0;
    text-align: right;
    }
    .highslide-wrapper .highslide-header ul li {
    display: inline;
    padding-left: 1em;
    }
    .highslide-wrapper .highslide-header ul li.highslide-previous,
    .highslide-wrapper .highslide-header ul li.highslide-next {
    display: none;
    }
    .highslide-wrapper .highslide-header a {
    font-weight: bold;
    color: gray;
    text-transform: uppercase;
    text-decoration: none;
    }
    .highslide-wrapper .highslide-header a:hover {
    color: black;
    }
    .highslide-wrapper .highslide-header .highslide-move a {
    cursor: move;
    }
    .highslide-wrapper .highslide-footer {
    height: 11px;
    }
    .highslide-wrapper .highslide-footer .highslide-resize {
    float: right;
    height: 11px;
    width: 11px;
    background: url(highslide/graphics/resize.gif);
    }
    .highslide-wrapper .highslide-body {
    }
    .highslide-move {
    cursor: move;
    }
    .highslide-resize {
    cursor: nw-resize;
    }
    .highslide-footer {
    display: none;
    }
    .highslide-move {
    cursor: move;
    }

    .highslide-overlay {
    display: none;
    }

    a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
    }


    /* Controlbar example */
    .controlbar {
    background: url(highslide/graphics/controlbar4.gif);
    width: 167px;
    height: 34px;
    }
    .controlbar a {
    display: block;
    float: left;
    /*margin: 0px 0 0 4px;*/
    height: 27px;
    }
    .controlbar a:hover {
    background-image: url(highslide/graphics/controlbar4-hover.gif);
    }
    .controlbar .previous {
    width: 50px;
    }
    .controlbar .next {
    width: 40px;
    background-position: -50px 0;
    }
    .controlbar .highslide-move {
    width: 40px;
    background-position: -90px 0;
    }
    .controlbar .close {
    width: 36px;
    background-position: -130px 0;
    }


    /* Necessary for functionality */
    .highslide-display-block {
    display: block;
    }
    .highslide-display-none {
    display: none;
    }

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Just for testing something, try changing this:

    <div id="gallery">
    <?php include ('photography.html');
    ?>
    </div>


    to this:

    <div id="testing">
    <?php include ('photography.html');
    ?>
    </div>


    ==========
    My thinking is that something in #gallery is sending
    the whole "PHP include" off the browser.

    By putting the word "testing" in there, it won't
    define any CSS.

    I can't test it, but you can.


  5. #4
    Junior Member
    Join Date
    Oct 2008
    Posts
    5
    Member #
    17519
    holy crap that idea nearly fixed it . Now at least, by using the IE7 screenshot renderer I can view the gallery on screen. The placement is a bit off from how firefox and safari render it (which is basically centered) but I can now view the row of thumbnails. I guess that bit of css was trash that I was using at first and then didn't need it. THANKS! Below is a pic of how it renders now in IE7. How I intended it was for the row to be centered beneath the photograph of the girl (a friend of mine). Any suggestions of tweaking this? I'm gonna play around with the #fixed and see what happens.

    thanks again.
    Quote Originally Posted by mlseim
    Just for testing something, try changing this:

    <div id="gallery">
    <?php include ('photography.html');
    ?>
    </div>


    to this:

    <div id="testing">
    <?php include ('photography.html');
    ?>
    </div>


    ==========
    My thinking is that something in #gallery is sending
    the whole "PHP include" off the browser.

    By putting the word "testing" in there, it won't
    define any CSS.

    I can't test it, but you can.

  6. #5
    Junior Member
    Join Date
    Oct 2008
    Posts
    5
    Member #
    17519
    sorry I couldn't post the IE7 image afterall... oh and I realized that what I thought was a fix messed up the firefox render (tho it improved the IE7 version a bit) I've now edited #gallery like you suggested, mlseim, but ended up nearly copying all its commands and placing them in the #fixed (that is at the top of the .html doc) in order to get back the results I had before.

    In the preview I receive now (IE7) the row of thumbnails is visible but not centered beneath the main photo, as it is in safari and firefox.

    thx for the help so far

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I'm not able to test in other browsers,
    but you now get the idea on some good troubleshooting hints.

    Commenting things out,
    Using a non-defined <div> to snuff out #div problems,
    Using Browsershots or similar to view with other browsers.

    Things can get really messy when using a lot of relative, absolute,
    margins, z-index, positioning methods. There is a lot of information
    online about problems IE has (box margin problems, etc).


    Keep at it.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com