show php/mysql grabbed images in jquery dialog
Question
UPDATE: solution found and updated in posted code
as it currently stands i have the images stored in a directory on my system which i am hosting an iis server on (this server is a lcoalserver but im coding to have it work on the public web too). any way i am able to grab these images fine and output them in the correct spot using the code here -
<?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>";}
?>
However i want to know if theres a way so when i click an image on the page, it opens a jquery dialog, and displays said image in the dialog. I have the dialog appearing fine, but had no luck making the image appear.
<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>
any help would be appreciated, thanks
1 answers
solution1
0 ACCPTED 2019-12-18 03:19:50
Try my sample code below.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.