0

我有一个图像数据库，我的网站正在使用一个小的 ajax 函数来戳服务器，检索图像列表并相应地格式化。

您可以在此处查看现场版本：http: //tbremer.com（现场链接为建筑和音乐会）。

我的两个问题如下：

  1. 数据（图像）未按我希望的方式格式化（水平显示）
  2. 当图像正确显示时，正文不会滚动。

现在来谈谈奇怪之处。第一次单击时，图像始终垂直显示，但如果再次单击相同的链接，图像格式正确、水平和所有 DIV 的大小都适当。

我将在下面发布代码。

HTML

<div id="contentWrapper">
    <div id="imageViewer"></div>
</div>

JAVASCRIPT

//___ Ajax call for images
function loadXMLDoc() {
    //___ Variables
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("imageViewer").innerHTML=xmlhttp.responseText;

            var div = document.getElementById("imageViewer");
            var newDivWidth = 0;
            var imageViewerDivWidth = 290;

            for (i=0;i<div.children.length;i++) {
                //console.log(div.children[i]);

                var imageWidth = $("#portImage"+i).width();
                newDivWidth = imageWidth + newDivWidth + 4;
                console.log(imageWidth+" px.");
                console.log(newDivWidth);
            }

            imageViewerDivWidth = imageViewerDivWidth + newDivWidth;
            $("#contentWrapper").width(imageViewerDivWidth);
            $("#imageViewer").css("width", imageViewerDivWidth);
            console.log("");
        }

    }
    console.log(portLink); //Display link clicked
    xmlhttp.open("GET","includes/displayimagesLive.php?portname="+portLink,true);
    xmlhttp.send();
}

PHP

<?php
require("connect.php");

#___ Get variables from navigation
$portname = $_GET['portname'];
$queryMain = "SELECT id, portfolioName, filename FROM portfolio WHERE portfolioName='".$portname."' AND filename IS NOT NULL";
$getPortSQL = mysql_query($queryMain);

#___ Display!
$i = 0;
while ($nt = mysql_fetch_array($getPortSQL)) {
        echo "<div id='portImage".$i."' class='portImage'>";
            echo "<img src='images/portfolio/$nt[portfolioName]/$nt[filename]' height='500px'>";
        echo "</div>";
    $i++;
}
unset($i);
?>

相对 CSS

/* Content Wrapper */
#contentWrapper {
    padding: 0px;
    margin: 0px;

    z-index: 0;

    border: 0px solid #600;
}

/* Image Viewer */

#imageViewer{
    position: fixed;
    left: 0px;
    top: 0px;

    padding: 0px;
    padding-left: 350px;
    margin: 0px;

    border: 0px solid #F0F;
}

.portImage {
    padding: 0;
    margin: 4px;

    border: 1px solid #000;

    float: left;
}
4

0 回答 0