Please note that by passing example=someNumber to AJAX-ZOOM over jQuery.openAjaxZoomInFancyBox() some default settings from "/axZm/"Īre overridden in "/axZm/zoomConfigCustom.inc. If you need to define your own parameters. There are some other ways of embedding and passing this information to AJAX-ZOOM (see other examples),īut the main parameters (zoomData, zoomDir, 3dDir, zoomFile and zoomID) remain unchanged on default. Generated with other programing languages such as ASP.NET Specifically for ASP.NET you can run AJAX-ZOOMīy the way - this example can serve as tutorial on defining the content to load into AJAX-ZOOM player! The second and third methods do not require PHP - only JavaScript and are very good suitable for frontends This string is then passed as value of "zoomData" parameter to AJAX-ZOOM.Īs you can see the process requires PHP to be executed in your actual application. The first one compresses a PHP array with images into a string. The following three methods cause the same result - open a set of images in "fullscreen lightbox". The download package contains all necessary files. ) you will need Fancybox JavaScriptĪnd AJAX-ZOOM main JavaScript file (/axZm/) to include into the head section of the page.įor some methods retrieving the images (CSV) our slightly modified version of Fancybox is required (look for explanation below). Images that appear wider than the text around them are a cool design technique. The good thing is that, since you are using a relative unit, the image will be fluid in any device smaller than 500px. So you will be able to see the complete image on a smaller size screen. Which can be found in the head section of this document.īesides jQuery core library (e.g. Therefore, you can define a max-width property for the image and set it to 100, which shrinks the image of 500px to the space of 360px. In order to call AJAX-ZOOM with Fancybox in such a way we have created a single function (jQuery.openAjaxZoomInFancyBox) The sizes of the Fancybox and AJAX-ZOOM player inside are determined by the window size.īy changing the browser window size (orientation change on iOS) all sizes are instantly adjusted (try it). Responsive design is not a single technology but a set of techniques that allow web pages to serve the needs of both mobile and desktop users. In this example AJAX-ZOOM is loaded into the maximized lighbox (Fancybox).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |