javascript - 如何使用 HTML 中的弹出式机制打开未知数量的图像
问题描述
我是创建网站的初学者，但我遇到了一个大问题。
我创建了一个超级基本的网站，人们可以在其中登录和上传图片。用户或客人可以使用过滤器搜索所有图像。
我想要实现的是在一个人使用过滤器查看我想要的图像之后，他能够单击任何图像并在类似窗口的弹出窗口中以全比例显示图像。
我已经尝试过 w3schools 的模态图像代码，但它仅适用于显示的第一张图像。所有图像都存储在一个 sql 表中。
这是目前仅显示图像的网页
<html>
<head>
<title>Search photo</title>
</head>
<body>
<?php
session_start();
if($_SESSION['username']!=NULL){
echo "Welcome ". $_SESSION['username'];
}
?>
<br>
<table>
<tr>
<td><a href="home.php">Home</a></td>
<td><a href="addphoto.php">Add new photo</a></td>
<td><a href="searchphoto.php">Search photo</a></td>
<td><a href="top5.php">Top 5</a></td>
<td><a href="contact.php">Contact us</a></td>
<?php
if($_SESSION['username']!=NULL){
echo "<td><a href='logout_p.php'>Logout</a></td>";
}else{
echo "<td><a href='registration.php'>Register</a></td>";
}
?>
</tr>
</table>
<br>
<form method="post" action="searchphoto.php">
Select image filter:
<select name="s_filter" required>
<option selected value="all">All
<option value="face">Faces
<option value="place">Places
<option value="car">Cars
<option value="other">Other
<option value="bestvote">Best average vote
<option value="worstvote">Worst average vote
<option value="text">Text
</select>
<input type="submit" name="search_submit" value="Search">
<br>
Fill this parameter if you chose Text: <input type="text" name="filter_text">
<br>
</form>
<?php
if(isset($_POST['search_submit'])){
$con = mysqli_connect("localhost","root","","site");
if(mysqli_connect_errno()){
echo "Fatal error";
die;
}
$filter = $_POST['s_filter'];
$query = mysqli_query($con, "SELECT * FROM images");
if($filter == "all"){
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "face"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "car"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "place"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "other"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "bestvote"){
$query = mysqli_query($con, "SELECT * FROM images ORDER BY avg_vote DESC");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "worstvote"){
$query = mysqli_query($con, "SELECT * FROM images ORDER BY avg_vote");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "text"){
$filter = $_POST['filter_text'];
$query = mysqli_query($con, "SELECT * FROM images WHERE INSTR(description, '{$filter}')");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}
mysqli_close($con);
}
?>
</body>
如果上面的代码令人困惑，请原谅我，但我刚刚开始创建网站。
解决方案
我已经对 w3schools 的图像模式进行了一些更改，这里是代码希望您可以相应地更改它
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px" onclick="callfunction(this)">
<img class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px" onclick="callfunction(this)">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
//var img = document.getElementById('myImg');
function callfunction(e){
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = e.src;
captionText.innerHTML = e.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
推荐阅读
- xml - 我的查询未显示 xml 的结果
- django - Django - 带有 FormMixin 和初始的 DetailView
- android - Firestore依赖错误颤动
- html - 保证金崩溃
- javascript - 使用 html、css 和 javascript 在简单菜单中冒泡
- html - 将屏幕尺寸更改为智能手机屏幕尺寸时，背景图像无法居中
- c# - 使用 ConcurrentQueue 监控任务链
- database - UnicodeDecodeError Sentiment140 Kaggle
- java - MongoDb Spring boot，找不到用户实体
- swift - 向前传递数据时 Swift 有趣的 NSExceptionError