目錄
直接把下面這一整段貼到你的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客製化網頁設計,複製貼上就搞定的程式碼大全