Width of the preview image or 'auto' (depending on parent container size - "divID", see above) this is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly.
Preload all preview and mouseover images, possible values: false, true, 'oneByOne' In case "zoom", "preview" and "thumb" are not defined, AJAX-ZOOM will generate these images out of "img" instantly on-the-fly
"img" - your master image is needed anyway to open AJAX-ZOOM on click this image can be in a directory with restricted access over http htaccess or other http access restrictions.Īlternatively you can link to your static images with these keys: Your master image "img" can be as big as you want, it never loads into cache Object containing absolte paths to the master images, optional with titles. $.axZmThumbSlider parametrs if "galleryAxZmThumbSlider" is enabled Use $.axZmThumbSlider on gallery thumbnails or not
'auto' might not always work so if you experience any difficultiesĭIV (container) id of the gallery, set to false to disable gallery "galleryAxZmThumbSliderParam" the suboption "mouseWheelScrollBy" is used - needed if in "galleryAxZmThumbSlider" option is set to true and in.spin.js - needed if "spinner" option is set to true.This is the replacement for previously used jcarousel (jQuery plugin for sliding thumbs which has got too old) - needed if "galleryAxZmThumbSlider" option is set to true.- needed if "ajaxZoomOpenMode" option is set to 'colorbox'.- needed if "ajaxZoomOpenMode" option is set to 'fancyboxFullscreen'.jquery.fancybox-1.3.4.js - needed if "ajaxZoomOpenMode" option is set to 'fancyboxFullscreen' or 'fancybox'.- 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.- 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 "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: "mouseOverZoomGallery", // DIV id of the gallery zoomTest/axZm/ĭivID: "mouseOverZoomContainer", // DIV for mouseover zoom Open example32_clean.php to see the html without anything else around.ĪJAX-ZOOM mouseover zoom click fullscreen zoomĪxZmPath: "auto", // Path to AJAX-ZOOM, e.g. (see "images" option below) to point to some static (already scaled) images. with htaccess.Īlternatively to AJAX-ZOOM PHP based image server the paths to these flyout "preview" images can be hardset
Utilizes image tiles technology, so the entire master image never loads into browsers cache andĬan be even protected from direct access over http e.g. pixels.įor a 21 megapixels master image these are around 5-7% of the actual resolution and size.īy clicking on the lens the user can explore the entire image with AJAX-ZOOM, which The size of the flyout image can be set to e.g. On default only the high resolution "master images" (source images) need to be defined.Īll thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server". The previously used "jCarousel" has been completly removed from this example. It is highly configurable, skinable, responsive and touch friendly The one you see here is one of AJAX-ZOOM extensions too. The sliding thumbnail gallery below the mousehover image is optional. text to the right) so beeing responsive.Īnd it works on touch devices like iOS and Android. To browsers window size or some other element (e.g. In addition the size of the flyout window for simple mousehover effect can instantly fit When the user clicks on the lensĪJAX-ZOOM with real high resolution tiled view opens at several modes, try it: Offers more than it lookes like at first. Despite looking similar to other mouseover zoom scripts this AJAX-ZOOM mousehover extension