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

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

Outline

    Original Post

    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



    Related Posts

    Aron

    A data scientist working in a retail company, with experience in web design and marketing. Recently dives into cryptocurrency and quantitative investing.

    facebook telegram

    Leave a Reply

    • Required fields are market * .
    • Your email address will not be published.
    • Please ensure your email address is correct, then you will get a notification once a new comment reply.

    Your email address will not be published.