以模态显示来自Wordpress帖子的图像

Question

我一直在寻找谷歌而无法找到教程。我希望当用户点击wordpress帖子中的图像时，会打开一个模态并显示完整大小的图像。我没有关于如何制作模态的问题，我不知道如何获取图像并将其放入模态中。我不想使用插件，我想知道它是如何工作的。如果你有一个很好的教程如何做到这一点，或者如果你想解释它，请做！ 谢谢！

Answer 1

您可以在openModal（）之前创建一个JS onclick函数，该函数将当前帖子信息作为参数提交：

index.php文件

if ( have_posts() ) : while ( have_posts() ) : the_post();
  if ( has_post_thumbnail() ) :
    $thumbnailBgImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');

  <!-- THUMBNAIL SECTION -->
  <div class="post" onclick="openModal('<?php echo $thumbnailBgImg[0] ?>', '<?php the_title(); ?>', '<?php echo $post->ID ?>', '<?php echo the_content() ?>')" >
    <div class="post-thumbnail" id="post-thumbnail" style="background-image: url('<?php echo $thumbnailBgImg[0]; ?>');"></div>
    <div class="post-content">
      <h3 id="thumbnail-h3"><?php the_title(); ?></h3>
      <p id="thumbnail-p"><?php the_content(); ?></p>
    </div>
  </div>

  <!-- MODAL SECTION -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <div class="modal-box">
      <img class="modal-content" id="modal-img">
    </div>
    <div id="caption">
      <div class="caption-text">
        <h3></h3>
        <p></p>
      </div>
      <a></a>
    </div>
  </div>

 endif; endwhile;
endif;

script.js文件

// MODAL IMAGE
function openModal(URL, TITLE, ID, CAPTION){
  var modal = document.getElementById('myModal')
  var modalImg = document.getElementById("modal-img")
  var caption = document.getElementById("caption")
  var captionH3 = caption.getElementsByTagName('h3')[0]
  var captionA = caption.getElementsByTagName('a')[0]
  var captionB = caption.getElementsByTagName('p')[0]
  var span = document.getElementsByClassName("close")[0]

  var newTitle = encodeURIComponent(TITLE.trim())
  modal.style.display = "flex"
  captionH3.innerHTML = TITLE
  modalImg.src = URL
  captionB.innerHTML = CAPTION

  captionA.href = "mailto:josefineklundmail@gmail.com?Subject=" + newTitle
  captionA.innerHTML = "Contact me"

  span.onclick = function() {
    modal.style.display = "none"
  }
}

我的结果：

希望有所帮助＆lt; 3