Allow thumbnails links for IE10 and below

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

You’ve probably noticed that some features of Customizr are not well interpreted by some outdated versions of Internet Explorer. The beloved zoom effects on the thumbnails for the featured pages and posts lists, for example, are not supported by them.  Unfortunately, thumbnails links does not work either.

Add this snippet to your child theme functions.php  to work around this issue.

add_action('wp_footer', 'ie_thumbnails_links');
function ie_thumbnails_links(){
?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            !function ($){
                "use strict";
                
                $.ThumbsWithLinks = function() {
                     // grab all a .round-div 
                    var $round_divs = $("a").filter(".round-div");
                    // grab all wrapped thumbnails
                    var $images = $(".thumb-wrapper img");
                    
                    $images.each( function(i) { 
                        // let's wrap the thumb into the round-div link
                        $(this).wrap('<a href="' + $( $round_divs[i] ).attr('href') + '" title="' + $( $round_divs[i] ).attr('title') + '"></a>'); 
                        // let's remove now useless round-div
                        $($round_divs[i]).remove(); 
                    });
                }
            }(window.jQuery);
            
            // detect if the browser is IE
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf ( "MSIE " );

            if ( msie > 0 )
                // call our function for IE versions less than 11
                if ( parseInt( ua.substring ( msie+5, ua.indexOf (".", msie ) ) ) < 11 )
                    jQuery.ThumbsWithLinks();
        });
    </script>
<?php
}

 

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

Read How to customize the Customizr WordPress theme? if have never used a functions.php file in a child theme.

Leave a comment

Your email address will not be published. Required fields are marked *

5 thoughts on “Allow thumbnails links for IE10 and below”