Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #358620

    As is, the gallery preview image (which is clicked on to enter a lightroom gallery) on my Enfold website resizes according to the browser window width, but not the browser window height. Is it possible to have this gallery preview image resize according to the browser window’s height? ie/ if the window is large enough, the image displays full size, but if it is made shorter (just as is currently the case when it is made more narrow), it reduces in size so that the entire image can be displayed?

    Thanks.

    • This topic was modified 9 years, 4 months ago by AlexKK.
    #359398

    Hi,

    Try adding this at the very end of your theme / child theme functions.php file:

    function add_custom_script(){
    ?>
    <script>
    (function($){
        $(window).on("resize", function () {
            $('.avia-gallery-big-inner img').css('height', $(window).height()/1.8);
        }).resize();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Regards,
    Josue

    #360416

    Thanks Josue,
    This is what I ended up using :)

    <script>
    var ratio = 1.5;
    var factor = 0.75;
    var global_window_height = jQuery(window).height();

    function myfunction() {
    var window_height = jQuery(window).height();
    var container_width = parseFloat(jQuery(‘.entry-content’).css(‘width’));
    var new_height = factor * window_height;
    var new_width = new_height/ratio;
    if (new_width > container_width) {
    new_width = container_width;
    new_height = new_width*ratio;
    }
    jQuery(‘.avia-gallery-big-inner img’).css(‘height’, new_height);
    jQuery(‘.avia-gallery-big-inner img’).css(‘width’, new_width);
    }

    jQuery(window).on(‘resize’, myfunction);
    jQuery(window).on(‘load’,myfunction);
    </script>

    #360423

    Glad you managed to sort it out and thanks for sharing your solution.

    Regards,
    Josue

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.