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

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

php html image

Php 在灯箱模型中显示一组图像,php,html,image,lightbox,Php,Html,Image,Lightbox,下面的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-siz

下面的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>';
?>


#标题，
.行{
宽度：自动；
浮动：左；
明确：两者皆有；
显示：块；
保证金：0；
填充：0；
框大小：边框框；
字体大小：0.7rem；
}
#标题>div{
背景：黑色；
颜色：白色；
}
#标题>div，
.行>分区{
显示：内联块；
边框：1px点黑色；
明确：无；
浮动：左；
保证金：0；
框大小：边框框；
宽度：120px；
高度：50px；
}
.w100{宽度：100px；}