/* The web pages which incorporate the use of 'expanding' images are: eden.html, dales.html, lake.html, pennine.html and howgill.html. These pages are supplementary to the main site. The javascript to do this is magnify.js and global.js. Small photographs appear alongside the text in these web pages. Clicking on these will expand the image smoothly producing an enlargement. Some padding and a border are added once an image is full size, together with a caption and instruction on how to remove the enlarged image. When the mouse-cursor is moved off the enlargement to outside the border (or frame), the enlargement will return to its original thumbnail. The thumbnail image itself is not enlarged but remains on the web page. Two options can occur. 1), Full sized images are downloaded with the web page and thumbnail versions of them are then displayed. This is acceptible if the number of images on the page is low so that the download time is not too long. 2). The original image is of thumbnail size and is later replaced by downloading an enlargement of itself, when the thumbnail is clicked on. Because the download time of a full page, containing several large images, could be excessive, a system using thumbnail images is used to reduce the initial download time. Further download time will only occur, when any thumbnail is clicked on, initiating the download of the enlargement of the thumbnail. Obviously, the viewer has the option to forego looking at the enlargements and save time on further downloads if he/she wishes. In case 2, downloading each enlargement will take time and so an invisible image element, testImgElem, is created first. The src attribute with name equal to the image to be downloaded is assigned to this image element. If the 'image.onload' event is fired the test image could be deemed to have been downloaded. However, rather than just relying on this event, the height of the image is tested repeatedly by reading the image's offseHeight. These readings are only carried out, while the image height is below a set minimum value and while successive heights are not the same more than a certain number of times, (given by the value of 'equalHtsAllowed'). If a measurement exceeds the minimum height specified, the download in the background is deemed complete and the src is now assigned to the image, which is to be enlarged. The reason for taking height readings is due IE browsers sometimes failing to download all of an image. In such cases an incomplete image would be displayed. Failing this test means that an error message, 'Downloading the enlargement of of the thumbnail failed', is displayed instead. If the image.onerror event fires, then an image is probably missing or wrongly named, in which case the same error message is displayed. This is done by displaying an image having a blank background with this message on it. Other methods, which put a message over the thumbnail were abandoned, (The reason for this was timing and synchronisation problems with Mozilla Firefox and to a lesser extent with Internet Explorer, although the Opera browser operated perfectly. This meant that the messages did not appear in the order given by the coding, especially as some of the coding uses a 'do...while' loop and took a relatively long time to complete and so a blank image appeared before the 'downloading failed' message did. If the background of this image was made opaque, then the message was blocked out all together. A suggested method to correct the synchronisation problem by applying setTimeout, with time set to zero, to certain functions, was not proceeded with.) During the time the image is being downloaded, a message stating 'Loading Enlargement', is placed over the thumbnail. informing the user what is happening. This is removed as soon as the enlarged image is in the browser's cache. This is displayed at first as a small image, a copy of the thumbnail, but then grows until it reaches a predetermined size, with its centre close to the centre of the page.The enlargement process is done in small steps by changing the image's size (style.width and style.height) and the image's position (style.top and style.left) every few millisecs. The time for each step, 'tStep', and the total time of the enlargement process, 'magnifyTime', applies to all images and can be reset within the javascript code. The mean change in width, height, left position and top position are calculated. Initially the changes are made 1.5 times these values, when the image is small, and at each step they are reduced by a constant amount until the final change is 0.5 times the mean value, when the image is large. Doing this reduces the changes in area of successive images as they get larger, compared with keeping the steps constant. A minimum value of 'tStep' is about 8 (milliseconds). 'magnifyTime' may range from 500 to 1500. The smoothness of the transitions between successive images depends on a). having a reasonably high number of steps, (= magnifyTime/tStep), b). on the length and width of the final image, c). on the size of memory of the image being used in the expansion process and lastly d). on the browser used. In respect of smoothness, Internet Explorer and Opera are much better than Mozilla Firefox.. The shrinking process uses the same function, 'resize' as for enlarging, Whether enlargement or shrinking occurs is determined by the variable, 'direction', which is +1 for enlargement and -1 for shrinkage. Each image which may be enlarged has the class "inflatableImg". At the time that the script is loaded, the code places the notice, "Click to enlarge.", over all these images. (Changing the width of the window once the page has been loaded, will cause the notice to move in relation to the images but most people are unlikely to do this.) Because the font may merge into some of the thumbnail images and not be clearly visible, the colour of the font can be adjusted in the HTML markup. The colour chosen is stored in the 'name' attribute of the image. The 'id' attribute is used for the title caption on the enlargement. It must not contain apostrophes. (You could use a grave accent ` U+0060 instead.) The 'alt' attribute acts as normal, so, if the image is missing or javascript is off, the value of 'alt' appears, where the image should be. When an image is clicked on, the 'onclick' event is removed from all the images, so that it is impossible to instigate multiple enlargements at the same time. When an image reaches full size, a border is added and the function 'addLabels' uses DOM scripting to add an instruction above the image. This instruction tells the user how to shrink the enlarged image, which is done by taking the mouse cursor from inside to outside the border. Shrinking is activated by the 'onmouseout' event. The position of the instruction should fall on the image border but does tend to vary slightly, (depending on where the thumbnail is on the web page and on the screen). A caption, giving information on the subject of the photo, is also added below the image. As mentioned earlier, this is taken from the 'id' attribute of the image.At the start of the shrink process, the caption, the instruction, the padding and the border are all removed from the enlargement. When the shrinking process is finished, the 'copy' of the thumbnail is removed and the 'onclick' event replaced on all the images. The array loadRecord() keeps a record of the loading of each image. All values are set to -1 initially, indicating that each image is assumed not to have been down loaded. In the HTML mark-up, an image, not ending in '1.jpg' or '2.jpg' is specified as a large image and the thumbnail displayed on the page will be a reduced version of this large image. The browser's cache will already hold the large image, if the thumbnail is visible and so showing the enlargement can proceed immediately, when the thumbnail is clicked on. In this case, the value of loadRecord for these images is immediately set to +1. Images ending in '1.jpg' are thumbnail images and should be accompanied by a corresponding enlargement, ending in '2.jpg'. Thus, after a test is made showing that the thumbnail image has its src ending in '1.jpg', a larger version, (ending in '2.jpg') needs to be downloaded. When a successful attempt to download this larger image is made the value of loadRecord[imgNo] is set to +1 and a visible display of the actual image occurs. If the download is unsuccessful, then as stated previously, the notice stating that 'the downloading of the enlargement of the thumbnail failed', occurs and its loadRecord remains at -1. If a thumbnail, which has already been downloaded is clicked on again, its loadRecord will already be +1, indicating that it can be enlarged immediately, as the full size image will already be in the browser's cache, In this case the enlargement proceeds immediately without first trying to download an invisible image of itself. If the image clicked on has already had an unsuccesful attempt to download its enlargement, then loadRecord is still -1 and a further attempt to download the enlargement is made. Window geometry. Besides needing to know the size of the element in order to carry out the enlargement process, it is necessary, to know the size of the window, how much the window has been scrolled and how much padding the element has. Out of the browsers tested, IE is again the odd one out, as its methods for finding the last three properties differ from other browsers. This means extra object detection code has to be added for IE. The table below shows the differences, which had to be considered in the coding. Property Non IE browsers IE6+ browser with a !DOCTYPE IE5, IE6, IE7 without !DOCTYPE Window width window.innerWidth document.documentElement.clientWidth document.body.clientWidth Window height window.innerHeight document.documentElement.clientHeight document.body.clientHeight Window horizontal scroll window.pageXOffset document.documentElement..scrollLeft document.body.scrollLeft Window vertical scroll window.pageYOffset document.documentElement..scrollTop document.body.scrollTop Left padding of element windows.getComputedStyle(element,null).paddingLeft element.currentStyle.paddingLeft, for all IE browsers This is the cascaded style of the element taking into account, global style sheets, inline styles and HTML attributes. For padding on the other sides of the element, replace Left by Right, Top or Bottom. Later browsers of IE are made compatible with earlier versions by omitting the !DOCTYPE tag before the HTML tag at the start of the document. This is known as 'quirks mode' or 'buggy' mode as position and size attributes of the element work incorrectly by including the element's border and padding. In the strict or standards mode, with the !DOCTYPE tag, the CSS position and size attributes of the element work correctly. A note on mouse events. The design uses only one mouse event at a time - 'onclick' to trigger the enlargement process and 'onmouseout' to trigger the shrinking process. Because only one event handler is used for a particular event on a particular object at any one time, DOM 0 event handling techniques were used. i.e. when enlarging the image, the event handler is 'magnify', the event is 'onclick' and the object is 'img' and when shrinking the image, the event handler is 'setupShrink', the event 'onmouseout' while the object remains 'img'. The changing sequence of mouse events used in the enlarge/shrink process is as follows. After an image has had the mouse clicked on it, so starting its enlargement, all 'onclick' events assigned to images which can be enlarged, are then nullified. This is so that clicking on a second image does not start another enlarge/shrink process before with the first has finished. When a full size image is obtained, the event 'onmouseout' is added, which is assigned to the function 'setupShrink'. As soon as the cursor moves from within the image frame to outside it, to start the shrinking process, the 'onmouseout' event is nullified. Finally all 'onclick' events are restored when the shrink process is complete, allowing the cycle to start again with another image or even the same image. DOM 2 application Programming interface (API) not used. The addition and removal of events was originally designed with DOM 2 event handling techniques using 'document.addEventListener' and 'document.removeEventListener', a total of 2 lines.However, IE is the only browser that does not comply with the DOM level 2 event handling model, where an event (such as onclick, onmouseover etc.) is 'captured' by the event handler while providing details of when and where it occured. Instead IE supports event propogation by bubbling, where events bubble up the hierarchy in the IE model. This can lead to memory leaks and a serious loss in performance unless the 'cancelBubble' property of the Event object is set to true by a specially designed event handler. Initially a special event handling programme, of over 70 lines, was used to get round the problem but was dropped when it was found possible to use DOM 0.instead. This event handling programme has not been discarded and has been placed in 'global.js' even though it is not now used. Places in the script, 'magnify.js', where DOM 2 techniques and the IE 'hack' were called have been kept but shielded from being read by using comment characters. */ /*List of Geometry variables sizeInside.wWin, sizeInside.hWin, getPadding.lPad, getPadding.tPad, getPadding.rPad, getPadding.bPad, getElemPosition.x, getElemPosition.y, getElemSize.wElem, getElemSize.hElem getWindowOffset.horizontalScroll, getWindowOffset.verticalScroll' List of image elements used in the coding. imgElems is the array of image elements in the HTML mark-up with classname "inflatableImg". elem is an image element which has just been clicked on. tempImgElem is a hidden image element placed in top left corner of the document. This is assigned the src attribute of an enlargement that is to be displayed later, once the enlargemen has been downloaded. This is indicated by the height of tempImgElem meeting certain criteria. img is an image element which is assigned the src attribute of the thumbnail enlargement, which is enlarged and shrunk */ ///////////////INIT //////////////////////// function init(){ loadRecord = new Array(); imgId=new Array(); //Get all images with class "inflatableImg" imgElems = getElemsByClassName("inflatableImg", "img"); // The function getElemsByClassName is in global.js elemsL=imgElems.length; for( var i=0;imaxWinW){winW=maxWinW}; /* Get magnification to bring edge of image nearly to within 'basicgapW' or 'basicGapH' value from window edge, keeping aspect ratio unchanged.*/ var scaleX= (winW*0.95-2*(basicGapW))/initImgW; //By taking 0.95 of winW, the gap around the image is always greater than the value of basicGapW and increases the wider the screen. var scaleY= (winH*0.95-2*(basicGapH))/initImgH; var magnify; if(scaleX>scaleY){ magnify =scaleY; }else{ magnify = scaleX; } //Get width of new image when fully magnified finalImgW=parseInt(initImgW*magnify,10); finalImgH=parseInt(initImgH*magnify,10); } //eof setParameters ///////STARTMAG///////// function startMag(imgId,magnifyTime,tStep){ direction=1; //value of 'direction' used for magnification img=document.getElementById(imgId); /* Get no. of incremental steps in the image magnification process, where tStep (milliisecs) is time per enlargement step and magnifyTime (millisecs) is time to magnify image fully.*/ noSteps = magnifyTime/tStep; //Get top and left positions of magnified image assuming image is in centre of visible window finishLeft=parseInt(winW/2 -paddingW -borderW+ hScroll-(finalImgW/2),10); finishTop=parseInt(winH/2 + vScroll-(finalImgH/2),10) - paddingW - borderW; //Get incremental changes in left, top, width and height of replacement image maxShiftX=startLeft-finishLeft; maxShiftY=startTop-finishTop; meanDeltaX=(maxShiftX/noSteps)-0; meanDeltaY=(maxShiftY/noSteps)-0; increaseW=finalImgW-initImgW; increaseH=finalImgH-initImgH; deltaX=meanDeltaX*1.5; // start deltaX at 1.5 times the mean. leading to a final deltaX of 0.5 times the mean deltaY=meanDeltaY*1.5; incrementalDeltaX=(meanDeltaX/noSteps)-0; //after each step the change,deltaX, in startLeft is altered by incrementalDeltaX incrementalDeltaY=(meanDeltaY/noSteps)-0; //after each step the change, deltaY, in startTop is altered by incrementalDeltaY meanDeltaW=(increaseW/noSteps)-0; meanDeltaH =(increaseH/noSteps)-0; deltaW=meanDeltaW*1.5; deltaH=meanDeltaH*1.5; incrementalDeltaW=(meanDeltaW/noSteps)-0; //after each step, the change,deltaW, in imgW is altered by incrementalDelaW incrementalDeltaH=(meanDeltaH/noSteps)-0; //after each step, the change, deltaH, in imgH is altered by incrementalDeltaH //Make replacement image visible and expand it, using function resize() with direction=1 img.style.visibility="visible"; img.style.borderStyle="solid"; img.style.borderWidth="thin"; img.style.borderColor="#785018"; imgW=initImgW; imgH=initImgH; resize(imgId,direction,imgW,imgH,tStep); } //eof startMag /////////RESIZE //////////// function resize(imgId,direction,imgW,imgH,tStep){ //this function enlarges or shrinks the 'inflatable' image depending on the value of direction. //Get 'inflatable' image element img=document.getElementById(imgId); //Get left and top co-ordinates of replacement image for each size change deltaX-=incrementalDeltaX*direction-0; // reduce deltaX by incrementalDeltaX each step deltaY-=incrementalDeltaY*direction-0; // reduce deltaY by incrementalDeltaY each step startLeft-=deltaX*direction-0; startTop-=deltaY*direction-0; deltaW-=incrementalDeltaW*direction-0; // reduce deltaW by incrementalDeltaW each step deltaH-=incrementalDeltaH*direction-0; //reduce deltaH by incrementalDeltaH each step //Get width and height of 'inflatable' image for each size change imgW+=deltaW*direction-0; // Don't convert to integer as repeateded rounding builds up errors imgH+=deltaH*direction-0; // Don't convert to integer as repeateded rounding builds up errors //Update style values img.style.left=startLeft +"px"; img.style.top=startTop + "px"; img.style.width=imgW + "px"; img.style.height=imgH + "px"; //Ensure 'inflatable' image overlays existing text. img.style.zIndex =img.style.zIndex-0+1; //-0 ensures zIndex is a number. //Make 'inflatable' image visible img.style.visibility="visible"; //Continue resizing 'inflatable' image every tStep millisecs until it has reached final width or height by calling resize() recursively. if((imgW*direction