The 3rd line is the actual resizing done by JavaScript’s built in resizeBy() function. We do the same with the initial browser height and the actual image height to ascertain the number of pixels by which we should resize the browser height in order to fit the picture. Then we subtract the initial browser width from the actual image width - the result is a number by which the browser width has to be resized. Because we have only one image on our page, and because the images collection is zero-based, the image is accessible with document.images - this way, we can get image’s width and height. Let’s have a good look at them: iWidth = - iWidth Īfter the page is fully loaded we can access the document’s image collection, thus gaining access to the image properties. The next 3 lines however, are the most important lines in this function. The first 2 lines of this function find the browser’s window width and height (depending on the browser). As you may already have guessed, the PicURL variable contains the relative URL of the picture that will be displayed in the popup.htm page.Īfter we have the PicURL variable, we can easily write the image into the document’s body using document.write: document.write( "" ) Īfter the page is completely loaded into the browser, the Load event is triggered and because we use onLoad event handler, the function FitPic() is called.
On the third line we assign true to the NS variable if the browser is Netscape, otherwise we assign false. On the second line we check if the second element of our temp array - arrTemp - has length greater than 0, and if this is true, we assign the value of this second array element to the picURL variable. The result of this split is held in the arrTemp array variable. The first thing that should grab our attention is the fact that we’re using Javascript code, which is directly executed while the page loads: var arrTemp=("?") įirst, we get the page URL string and split it by the " ?" character. Var NS = (navigator.appName="Netscape")?true:false Var picUrl = (arrTemp.length>0)?arrTemp:""
#Javascript resize image code
Now, take a look at the code of the popup.htm page: The trick is that we pass the image’s URL (relative to the image gallery Web page location) in the query string when the popup is created: window.open( "popup.htm?"+sPicURL, "", This function is really simple: the only thing it does is create a popup browser window, and load the popup.htm page in it. By clicking on any of the links on this page, you’ll call the PopupPic() function. We have a straightforward HTML page that contains a couple of links, and defines a simple Javascript function: PopupPic(). The script works in NS 4/5/6/7 and IE 4/5/6.įirst of all you’ll need one main HTML page that will contain links to the full-sized pictures in your gallery:
#Javascript resize image how to
It gives you a solution to a very common problem - how to resize a popup window to fit the image sizes displayed in it. const myZoom = WZoom.If you’re a Webmaster who has to deal with image galleries, then make a note of this clever script. Initialize the library on the picture or any HTML content you specify. Import the wheel-zoom.js library into the HTML web page. Resize the image using the mouse wheel + drag the scrollable image ( as well as any HTML content). Wheel zoom javascript, vanilla js wheel zoom, zoom image on mouse scroll jquery, zoom div on scroll, turn off ctrl scroll wheel zoom, image zoom plugin, mouse wheel zoom javascript Zoom wheel is a zoom and pan library for vanilla JavaScript that applies drag to move and the mouse wheel to enlarge the functionality of the image or any HTMLcontent material inside the container.
0 kommentar(er)
