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.
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
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>
Glad you managed to sort it out and thanks for sharing your solution.
Regards,
Josue