Question

以下php脚本用于从数据库中检索3个图像和一些其他数据。

<style type='text/css'>
    #headers,
    .row{
        width:auto;
        float:left;
        clear:both;
        display:block;
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-size:0.7rem;
    }
    #headers > div{
        background:black;
        color:white;
    }
    #headers > div,
    .row > div {
        display:inline-block;
        border:1px dotted black;
        clear:none;
        float:left;
        margin:0;
        box-sizing:border-box;
        width:120px;
        height:50px;

    }

    .w100{width:100px;}

</style>


<?php
    require("includes/db.php");

    $sql="SELECT * FROM `order` ";
    $result=mysqli_query($db,$sql);
echo "<head>";
echo '<link rel="stylesheet" href="views.css">';
echo "</head>";

    echo"
    <div id='headers'>
        <div>Order No.</div>
        <div>NIC no</div>
        <div>Delivery/Pickup</div>
        <div>Address</div>
        <div>Expect time</div>
        <div>Telephone</div>
        <div>Email</div>
        <div class='w100'>Prescription-1</div>
        <div class='w100'>Prescription-2</div>
        <div class='w100'>Prescriptions-3</div>
    </div>";



    while( $row=mysqli_fetch_array( $result ) ){

        echo"
        <div class='row'>
            <div>{$row['OrderNo.']}</div>
            <div>{$row['NIC']}</div>
            <div>{$row['DP']}</div>
            <div>{$row['Address']}</div>
            <div>{$row['DPTime']}</div>'
            <div>{$row['Telephone']}</div>
            <div>{$row['Email']}</div>
            <div class='column'>

                    <img src='{$row['Image1']}' height='50' width='120' onclick='openModal();currentSlide(1)' class='hover-shadow cursor'/>

            </div>
            <div class='column'>

                    <img src='{$row['Image2']}' height='50' width='120' onclick='openModal();currentSlide(2)' class='hover-shadow cursor'/>

            </div>
            <div class='column'>

                    <img src='{$row['Image3']}' height='50' width='120' onclick='openModal();currentSlide(3)' class='hover-shadow cursor'/>

            </div>
        </div>";
    }

echo '<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 3</div>
     <img src=" '.$row['Image1'].' "  style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 3</div>
      <img src="' .$row['Image2']. '"  style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 3</div>
     <img src=" '.$row['Image3'].' "  style="width:100%">
    </div>


    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src=" '.$row['Image1'].' " style="width:100%" onclick="currentSlide(1)" alt="Prescription-1">
    </div>
    <div class="column">
      <img class="demo cursor" src=" '.$row['Image2'].' " style="width:100%" onclick="currentSlide(2)" alt="Prescription-2">
    </div>
    <div class="column">
      <img class="demo cursor" src=" '.$row['Image3'].' " style="width:100%" onclick="currentSlide(3)" alt="Prescription-3">
    </div>

  </div>
</div>';
echo '<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>';
?>

我试图在参考w3school教程（灯箱模型教程）的灯箱模型中显示检索到的图像！但是虽然出现了方框但却看不到图像！我怎么能纠正它？

在灯箱模型中显示一组图像

0 个答案: