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

WordPress – 點擊文章中的圖片時,用Popup彈出式視窗顯示大圖

目錄

    原始文章

    WordPress – 點擊文章中的圖片時,用Popup彈出式視窗顯示大圖


    直接把下面這一整段貼到你的footer.php中就可以使用了。

    在WordPress預設的設定中,文章中的圖片會自動以適合的尺寸載入,並在srcset屬性中儲存所有尺寸的連結。我們要做的事情就是把srcset抓出來,並顯示在彈出式視窗的img中。

    <!--- 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>

    推薦文章

    WordPress客製化網頁設計,複製貼上就搞定的程式碼大全



    推薦文章

    Aron

    搭載商業思維的資料科學家,工業設計系畢業,曾任職知名品牌行銷企劃。下班後寫機器學習模型,寫網站,也寫文章。興趣是把Side Project當成創業題目來玩,把人生當成遊戲破關。

    facebook telegram

    發佈留言

    • * 表示必填欄位
    • 您填寫的電子郵件不會被公開
    • 請確認您的電子郵件正確無誤,當您的留言收到新的回覆時,我們會寄送通知信件給您

    發佈留言必須填寫的電子郵件地址不會公開。