https://www.carolineboileau.com/themes/white-two-column/js/resizeImage.js

1/*Keyboard navigation*/
2$(document.documentElement).keyup(function (event) {
3  // handle cursor keys
4  if (event.keyCode == 37) {
5    // go left
6
7	    if ($("a.previousimage").length ) {
8	    //If link exists Do something
9			window.location.href = $("a.previousimage").attr('href');
10	    }
11  } else if (event.keyCode == 39) {
12    // go right
13	    if ($("a.nextimage").length ) {
14	    //If link exists Do something
15			window.location.href = $("a.nextimage").attr('href');
16	    }
17
18
19  }
20});
21
22
23
24
25
26
27
28/* global vars */
29var shareButtonsWidth = 60;
30
31/*
32when the user resizes the browser window,
33the size of the picture being viewed is recalculated;
34 */
35$(window).bind('resize', function() {
36    var $picture = $('#image').find('img');
37    resize($picture);
38    //Set other divs to the same size as image
39    var $resizeAmount = $picture.width();
40    if ($resizeAmount < 300)
41    {
42		$resizeAmount = 300;
43    }
44    $('#image_text').width($resizeAmount);
45    $('#image_text p.image_title').width($resizeAmount-shareButtonsWidth);
46    $('#image_text p.image_description').width($resizeAmount-shareButtonsWidth);
47    $('#image').width($resizeAmount);
48
49
50});
51
52$(document).ready(function() {
53    var $picture = $('#image').find('img');
54
55
56

57    //Load the image into a non-DOM image
58    //This solves a problem with caching. In this case the tmpImg will be either downloaded or loaded from cache
59    //Once it is loaded, it will trigger the appropriate commands
60    //This is better than: $($picture).load(function(){  //Resize the image specified above is loaded };
61    //Because the latter does not work if loading from cache
62    var tmpImg = new Image() ;
63    tmpImg.src = $picture.attr('src') + '?' + Math.random(); //added + '?' + Math.random() fixes IE bug
64    tmpImg.onload = function() {
65        // Run onload code.
66
67      resize($picture);
68
69	    var $resizeAmount = $picture.width();
70	    if ($resizeAmount < 300)
71	    {
72			     $resizeAmount = 300;
73	    }
74
75      if ($resizeAmount > 0)
76	    {
77        $('#image_text').width($resizeAmount);
78        $('#image_text p.image_title').width($resizeAmount-shareButtonsWidth);
79        $('#image_text p.image_description').width($resizeAmount-shareButtonsWidth);
80        $('#image').width($resizeAmount);
81         //Show the container holding the image to prevent flashing
82        $('#image').css({visibility:"visible",opacity:0}).animate({opacity:1}, 300); //Cannot use $('#image').show(); in this case, because then #image_text returns a null height property.
83      }
84
85
86    } ;
87
88
89 });
90
91
92
93
94
95 /*
96                resizes an image given the window size,
97                considering the margin values
98                 */
99                function resize($image){
100	                var textDescriptHeight;
101	                //use set minimum incase people type a novel!
102	                if ($('#image_text').height() < 90)
103	                {
104		                if ($('#image_text').height() < 50) {
105	                		textDescriptHeight = 50;
106	                	} else {
107		                	textDescriptHeight = $('#image_text').height();
108	                	}
109	                } else {
110		                textDescriptHeight = 90;
111	                }
112                    var windowH      = $(window).height()-(textDescriptHeight+115); //add the height of the header plus the height of the footer to the heigh of the text under the image
113                    var windowW      = $(window).width()-($('#menu').width()+70);
114                    var theImage     = new Image();
115                    theImage.src     = $image.attr("src");
116                    var imgwidth     = theImage.width;
117                    var imgheight    = theImage.height;
118
119		            //catch bug. Keep running until image is loaded into DOM
120		            if (imgwidth == 0 || imgheight == 0)
121		            {
122			            setTimeout(function() { resize($image);  }, 1000);
123		            }
124
125                    //set a minimum resize size, otherwise it can become negative with the subtraction in "var windowH" above
126                    if (windowH < 100){
127	                	windowH = 100;
128                    }
129                    if (windowW < 100){
130	                	windowW = 100;
131                    }
132                    //set a maximum size for the width, this is the same as div CONTENT SPAN 19, which is 750px
133                    if (windowW > 740){
134	                	windowW = 740;
135                    }
136
137
138                    if((imgwidth > windowW)||(imgheight > windowH)){
139                        if(imgwidth > imgheight){
140                            var newwidth = windowW;
141                            var ratio = imgwidth / windowW;
142                            var newheight = imgheight / ratio;
143                            theImage.height = newheight;
144                            theImage.width= newwidth;
145                            if(newheight>windowH){
146                                var newnewheight = windowH;
147                                var newratio = newheight/windowH;
148                                var newnewwidth =newwidth/newratio;
149                                theImage.width = newnewwidth;
150                                theImage.height= newnewheight;
151                            }
152                        }
153                        else{
154                            var newheight = windowH;
155                            var ratio = imgheight / windowH;
156                            var newwidth = imgwidth / ratio;
157                            theImage.height = newheight;
158                            theImage.width= newwidth;
159                            if(newwidth>windowW){
160                                var newnewwidth = windowW;
161                                var newratio = newwidth/windowW;
162                                var newnewheight =newheight/newratio;
163                                theImage.height = newnewheight;
164                                theImage.width= newnewwidth;
165                            }
166                        }
167                    }
168                    $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
169
170                    $('#image').css({visibility:"visible",opacity:1});
171                    //Print for testing
172                    //$('.image_title').html('windowW '+windowW+' x imageWidth'+theImage.width);
173                }