在模态中显示 WordPress 帖子中的图像

Question

我一直在谷歌上寻找，但找不到教程。我希望当用户单击 WordPress 帖子中的图像时，模式会打开并显示全尺寸的图像。我对如何制作模态没有问题，我只是不确定如何获取图像并将其放入模态中。我不想使用插件，我想了解它是如何工作的。如果您有关于如何执行此操作的良好教程，或者您想解释它，请这样做！谢谢！

Answer 1

您可以创建一个 JS onclick 函数，例如 openModal()，它将当前的帖子信息作为参数提交：

索引.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;

脚本.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"
  }
}

我的结果：

希望有帮助 <3