3/18/2023 0 Comments Javascript image viewer![]() With some tweaks, you can add images changing functionality not just to the UI element but also, e.g. Such kind of switching works only if the images are the same size. The $.fn.axZm.zoomSwitchQuick API offers a way to switch between a set of two or more images quickly and without losing the zoom state. Some of our customers use it for before / after comparison. This design is winning when the user needs to see the entire image in large and inspect the high-resolution images in detail with deep zoom. Same as in example16, the "image map" resides outside of the image viewer but has the same size as the image viewer. You can view this cross-media capability of the extension in example29. The first image of a 360 view is the thumbnail in the gallery.Īlternatively, there is an option to list exact paths to the folders with 360 / 3D images and even display plain images together with 360 images in one gallery. ![]() When the first 360 view preloads, the extension displays all other 360 or 3D views in a sliding thumbnails gallery. In this example, the plugin loads all 360 views from the specified top folder with subfolders. However, the code is open and as a developer, you are able to add your custom options and functionality. To control the extension you can use various options, as you would do it with any other jQuery plugin. This makes handling and implementation a lot easier. We have put all JavaScript code, which loads the viewer and 360 galleries, into one $.axZm360Gallery extension. It has the same code basis as in the main example15. In the documentation, you will find additional information about all API methods present in this example code.Ĭlean (without unnecessary code) example of the AJAX-ZOOM 360° product viewer and 360 / 3D objects thumbnails gallery. You can store this data within your application or do something different with it.įor instance, you can send it via PostMessage to a different client.Īs a developer, you will be able to start adapting them fast. ![]() The output is updated when the data changes. In this example, the data object prints in the "virtual console" as JSON. This works in the zoomed and not zoomed states.Īdditionally, you can define a title and a description for these markers.Īll data such as coordinates of the hotspots and the text is present in external JavaScript object, which keeps track on all changes. You can tag images with interactive markers (hotspots) using $.fn.axZm.createNewHotspot API method by clicking on a spot at the AJAX-ZOOM viewer. Therefore, it makes only sense for developers! This is a demonstration of the AJAX-ZOOM API methods that deal with hotspots. With the help of which there is no need to bother with codes at all.ĪJAX-ZOOM is compatible with all major browsers, supports IE9, and works great on touch devices, including iOS, Android, and Windows! There you can find detailed articles about specific AJAX-ZOOM components and features, tutorials around AJAX-ZOOM integration, modifications, and configuration,Īs well as texts on topics such as 360-object photography.įor some shopping cart software systems such as PrestaShop Please contact the support and provide a description of what you are missing.Īlso, you may want to visit the blog section. If you feel that there should be a feature that you are looking for but cannot find, However, it does not include the same high-resolution images as you see online, but you can easily replace the dummy images with yours. The AJAX-ZOOM ZIP package you can download for free and test within your development environment contains nearly all these examples. You can use these codes to integrate AJAX-ZOOM into your application, CMS, an e-commerce solution as is, or take them as a basis for further development of your custom application. Below are short descriptions and links to several AJAX-ZOOM examples that show its features and integration possibilities.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |