wordpress程式教學_用Popup彈出式視窗顯示大圖

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

Content Protection by DMCA.com
A
Aron

Leave a Reply

Your email address will not be published. Required fields are marked *