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>";

  }

}

回显“”；

这是我放置在页脚中的模式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";
              }

  });

Dunno，如果这是一种通过回答我自己的问题来结束帖子的正确方法，或者我只是需要更新主要帖子，但我只想让我知道找到的解决方案。此案已结案。

加载标准概述的缩略图，以模式显示更大的图像

1 个答案: