bidshoogl.blogg.se - Mouseover to zoom or click to see larger imagetype z timmy

#Mouseover to zoom or click to see larger imagetype z timmy full
#Mouseover to zoom or click to see larger imagetype z timmy code

- main AJAX-ZOOM javascript file which loads AJAX-ZOOM to display high resolution image when the user clicks on the lens ĭepending on AJAX-ZOOM configuration AJAX-ZOOM loads some other stoff dynamically, so you do not have to worry about it.

In the same directory so your changes do not get overwritten when you or somebody else will be updating AJAX-ZOOM later.

#Mouseover to zoom or click to see larger imagetype z timmy code

If you would like to change something in the source code of please copy it renamed

- function to build all needed html and call other plugins which simplifies integration.

The options below refer to $.mouseOverZoomInit(options) which acts like a proxy to the other plugins. Several different plugins are used in this mouseover zoom tool.ĭepending on the configuration not all of them are needed but they all If you want to show 360 first set images360firstToLoad to true "img" - your master image is needed anyway to open AJAX-ZOOM on clickġ: "zoom" - big mouseover image, "preview" - preview image and "thumb" - image for the gallery. Alternatively you can link to your static images with these keys: htaccess or other http access restrictions. You can also protect the directory with. Your master image can be as big as you want, it never loads into cache Objecct containing absolte paths to the master images, optional with titles. GalleryDivID: "az_mouseOverZoomGallery", // DIV id of the gallery zoomTest/axZm/ĭivID: "az_mouseOverZoomContainer", // DIV for mouseover zoom Summing up, the entire code for the animation is given below.AxZmPath: "auto", // Path to AJAX-ZOOM, e.g. This will become more clear when you will yourself try changing the numbers according the dimensions of your images and preview div. Also, some numbers is multiplied to posX and posY so that we can see the entire preview image on mouse movement. Here, I took negative of posX and posY so that the preview image background moves in the direction opposite to the mouse movement.

The position of the background image of the preview div is given by the statement =(-posX*2.5)+"px "+(-posY*5.5)+"px". Similarly, posY stores the value of the Y coordinate. The statement var posX = event.offsetX assigns the value of the X coordinate of the mouse pointer's position relative to the image on which the mouse is moving to the var posX. Var img = document.getElementById("zoom2") Var img = document.getElementById("zoom1") Var pre = document.getElementById("preview") The width and height of the preview div is less than that of its background image, so the background image does not cover the entire div completely and it gives the feel as if the image is magnified.

#Mouseover to zoom or click to see larger imagetype z timmy full

Since I did not give any such constraint of dimension on the background image of the preview div, it is taking its full width and height here. This is because I set the width and height of the image 100px and 250 px respectively, but its actual dimensions are much greater. Same is applicable for the second image.īut then how is the image getting enlarged in the preview div? So, whenever you hover over the first image, the preview div will become visible with the first image as its background. If the condition is found true, then the first image is set as the background image of the preview div. The condition $('#zoom1').is(':hover') is checking if the mouse is hovering over the first image (having id 'zoom1').

In rest all the cases, it will be hidden. So, whenever the mouse is moving on the images, the preview div will be visible. In the zoomIn function, the visibility of 'pre' is set to visible. I returned the div with id 'preview' to a variable pre and made its visibility hidden. Since I want to zoom in the images as the mouse moves over them and zoom out as the mouse leaves the images, I linked the two functions with the onmousemove and onmouseout events respectively.Ĭoming to the JavaScript part, let's start with the zoomOut function. These functions are defined in Javascript.

Step 1įirstly, I defined two functions ' zoomIn' and ' zoomOut' to define the operations to zoom in and zoom out the object (in this case images) respectively. This part has the key code which is responsible for the preview. margin-left: auto and margin-right: auto aligns this div at the center of its parent's width. The background-repeat: no-repeat property ensures that the image it will be previewing (which will be made its background image in JavaScript) is not getting repeated. CSSįor the CSS code, let's talk about each element separately.įirst talking about the preview div, it is given some dimension, border and margin. Both the images are given the same width and height. The HTML is plain in which the row is divided into two columns, the first one containing the two images whose preview we want to see and the second one containing the div with id 'preview' which will show the preview.