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


    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">
    <!--- 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>
          <div class="modal-body">
            <img src="">
    <script type="text/javascript">
        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'));

    Related Posts

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

    Related Posts


    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. Required fields are marked *