时间戳

首页 > 解决方案 > 在 jquery 对话框中显示 php/mysql 抓取的图像

javascript - 在 jquery 对话框中显示 php/mysql 抓取的图像

问题描述

更新：在发布的代码中找到并更新了解决方案

就目前而言，我将图像存储在我的系统上的一个目录中，我在该目录上托管了一个 iis 服务器（该服务器是一个 lcoalserver，但我正在编码使其也可以在公共网络上工作）。任何方式我都能够很好地抓取这些图像并使用此处的代码将它们输出到正确的位置 -

<?php
$profileQuery = "SELECT * FROM photos WHERE uploadEmail ='".$_SESSION['friendEmail']."' ORDER BY uploadDate DESC;";
$profileResult = mysqli_query($connect,$profileQuery);
while($rowSize = $profileResult->fetch_assoc()){    
echo "<tr><td><img class='img' id='".$rowSize['id']."' src='".$rowSize['filepath']."' title='Upload Date: ".$rowSize['uploadDate']."' height='250' alt='File Name: ".$rowSize['filepath']." Upload Date: ".$rowSize['uploadDate']."'></td></tr>";}
?>

但是我想知道是否有一种方法，所以当我单击页面上的图像时，它会打开一个 jquery 对话框，并在对话框中显示所述图像。我的对话框看起来很好，但没有让图像出现。

<div id="modal" style="display: none;">
<p>i am test data</p><!--this shows up in dialog-->
<img id="insertImage"></img>
<!--<?php 
echo "
<script>
document.getElementById('".$rowSize['id']."');
</script>
"
?>--><!--this php code made the site throw an error 500(edit: php code removed))-->
<form>
<input type='button' style='width:100%;' name='close' class='ibtni' value='Close!' id='close'/>
</form>
</div>
<script>
$(document).ready(function(){
$(function() {
$('#modal').dialog({
autoOpen: false,
modal: true,
title: "Image",
draggable: false,
resizable: false,
closeOnEscape: false,
dialogClass: "noclose"
});
$('.img').click(function() {
$("#insertImage").attr("src",this.src);//makes picture load in image placeholder in the div
$('#modal').dialog('open');
});
});
$('#close').click(function() {
$('#modal').dialog('close');
});
});
</script>

任何帮助将不胜感激，谢谢

标签： javascriptphpjqueryhtmlmysql

解决方案

试试我下面的示例代码。

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <image class="img"
               style="height: 100px; width: 100px"
               src="https://cdn.theatlantic.com/assets/media/img/mt/2017/10/Pict1_Ursinia_calendulifolia/lead_720_405.jpg?mod=1533691909">
        </image>


        <image class="img"
               style="height: 100px; width: 100px"
               src="https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
        </image>

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <image id="insertImage"></image>
                </div>

            </div>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
      $('.img').click(function() {
        $("#insertImage").attr("src",this.src);
        $("#myModal").modal('show');
      });
    </script>
    </body>
</html>

推荐阅读