加载标准概览的缩略图，在模式显示中显示更大的图像

Question

我确实搜索了很多以找到问题的好答案，但不幸的是，我没有找到问题的正确解决方案。我在Wordpress网站上加载了一个照片页面。缩略图加载在概览中，以避免加载时间过长。单击图像时，它会显示在模式显示中，但缩略图仍会加载。当点击图像时，如何将图像的"大"版本加载到模态屏幕中？它是在php中完成的，还是我可以在我的Javascript中添加一些东西，将缩略图切换为该图像的"大"版本？

这是我的php/html/

if( have_posts() ) {
while ( have_posts() ) {
the_post();
echo "<h1 class='archive'>" . get_the_title() . "</h1>";
echo "<div class='row'>";
if(is_post_type_archive('pottenbakken')) {
$album = get_field('album-mug');
} elseif(is_post_type_archive('schilderen')) {
$album = get_field('album-paint');
} elseif(is_post_type_archive('fotoalbums')) {
$album = get_field('album-main');
} else {
echo "Helaas, er zijn in dit album nog geen foto's gevonden.";
}
if(!empty($album)) {
foreach($album as $foto) {
echo "<img class='Img' src='" . $foto['sizes']['thumbnail'] . "' />";
echo "<img style='display:none;' id='ImgFull' src='" . $foto['sizes']['large'] . "' />";
}
}
echo "</div>";
}

}

echo"；

这是我放在页脚中的模式html(并且工作正常(

<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01" >
<div id="caption"></div>
</div>

这是我的Javascript：

$('.Img').click(function(){
var modal = document.getElementById('myModal');
var img = this;
var modalImg = document.getElementById("img01");
modal.style.display = "block";
modalImg.src = this.src;
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
});

我希望它是清楚的。(这是我的第一个问题(

Answer 1

在此期间，在一些曾经是我导师的人的帮助下，我似乎回答了自己的问题。

Html/PhP:

if( have_posts() ) {
while ( have_posts() ) {
the_post();
echo "<h1 class='archive'>" . get_the_title() . "</h1>";
echo "<div class='row'>";
if(is_post_type_archive('pottenbakken')) {
$album = get_field('album-mug');
} elseif(is_post_type_archive('schilderen')) {
$album = get_field('album-paint');
} elseif(is_post_type_archive('fotoalbums')) {
$album = get_field('album-main');
} else {
echo "Helaas, er zijn in dit album nog geen foto's gevonden.";
}
if(!empty($album)) {
foreach($album as $foto) {
echo "<div class='images'>";
echo "<img class='thumbnail' src='" . $foto['sizes']['thumbnail'] . "' />";
echo "<img style='display:none;' class='imgFull' src='" . $foto['sizes']['large'] . "' />";
echo "</div>";
}
}
echo "</div>";
}}

CSS：

<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01" >
<div id="caption"></div></div>

这就是我正在使用的Javascript：

$('.thumbnail').click(function(){
var modal = document.getElementById('myModal');
var thumbnail = $(this);
var large = $(this).siblings();
var largeSrc = large.attr('src');
var modalImg = document.getElementById("img01");
modal.style.display = "block";
modalImg.src = largeSrc;
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
});

不知道这是否是通过回答我自己的问题来结束帖子的正确方式，或者我只是需要更新主帖子，但我只想让大家知道我找到的解决方案。此案已结案。