Display Zoomed-In Image In Popup When Clicking Thumbnail For WordPress

You can paste the code below to your footer.php, then I think it will work fine.

By default of WordPress, each image in articles preload every size version automatically, then store the links in the srcset attribute. What we need is to fetch the srcset, and display in popup.

<!--- Bootstrap Modal Button --->
<button id="post_img_zoom_btn" type="hidden" data-toggle="modal" data-target="#post_img_zoom_container">
  BUTTON
</button>
<!--- Bootstrap Modal --->
<div class="modal fade" id="post_zoomed_img_container" tabindex="-1" role="dialog" aria-labelledby="post_img_zoom_containerTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($){
    var zoom_img = $('#post_zoomed_img_container .modal-body img');
    $('article img').click(function(){
        zoom_img.attr('src', $(this).attr('src'));
        zoom_img.attr('srcset', $(this).attr('srcset'));
        $('#post_img_zoom_btn').click();
  });
</script>

Related Posts

The Complete WordPress Customization Tutorial – Just Copy And Paste And Work

---