Enhance your WordPress site with image zoom functionality. Add a hidden button and modal to your footer.php. The script fetches the srcset attribute, displaying all image sizes in a popup when clicked. Easily implement this feature with the provided code snippet.
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
