Responsive multimedia swipe gallery with 360° product spins, images with progressive zoom feature and videos, AJAX and IFRAME content

For a 360 or 3D web-view, the settings in this example are set the way that the user has only the possibility to spin at none zoomed state. Upon a click, the image or 360 will zoom to its original size. Another click at zoomed state causes the image to full zoom out again. Additionally, a zoom-out button appears when zoom on the image is applied.

The above-described behavior is actually typical for many none multi-resolution players, where the original heavy image is entirely loaded at 100% zoom. With AJAX-ZOOM viewer, however, the user does not have to wait until this large image is fully loaded. AJAX-ZOOM loads only that part of the zoomed image, which is visible on zoom, and the view gets sharp immediately without the user need to download several megabytes of unrequested data volume. On fast connections, the user will not even notice that this part of the image is downloading because the corresponding "image tiles" are loaded while zooming transition runs, and the tiles are faded in straightly after the zoom animation ends or even earlier while the animation runs.

This reasonably simple concept is mainly used for showing detailed maps online. Google maps use this, and actually, any maps service uses this, as it would be strange if you needed to download the entire world map to view your neighborhood, right? With AJAX-ZOOM, you can take advantage of this technology without really understanding it. Simply use this zoom magic in your online store or product's website and profit from this deep zoom enlargement without worrying about image sizes being too large for a web view. The same is true for mobile users; it simply makes no difference.

It might be worth mentioning at this place that AJAX-ZOOM can also load original images instead of image tiles on zoom. For this, you just need to activate the AJAX-ZOOM's simpleMode option. Moreover, you can set it the way that for low-resolution images, the original image loads on zoom, while for higher resolution images, the multi-scale tiles technology is applied. The resolution threshold is adjustable over the same simpleMode option.

Alternatives

Similar functionality with mixed content in one viewer (360/3D, video, and regular images) can also be achieved with this extension/example, where depending on the settings, you can enable mouseover zoom or swipe slider as a preview for your high-resolution images.

Integration and modification

This product view with multiple source types is handled by the AJAX-ZOOM's jQuery.axZm360Gallery extension. It does not have as many options as the mouseover zoom extension, with which you can achieve a similar look and behavior. The jQuery.axZm360Gallery extension's code, however, is not scrambled, written in a simple way, and a developer can extend it in case there is a need for any changes involving code modifications.

The data about the items AJAX-ZOOM has to load into this swipe gallery is provided to the galleryData option and may look like this:

			
galleryData: [
	['imageZoom', '/pic/zoom/animals/animals_014.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_013.jpg'],
	['image360', '/pic/zoom3d/Nike_Running'],
	['image360', '/pic/zoom3d/Teva'],
	['image360', '/pic/zoom3d/nike'],
	['imageZoom', '/pic/zoom/boutique/boutique_014.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'],
	['youtube', 'q57I1n4s5Hg'],
	['vimeo', '78673338'],
	['dailymotion', 'x144odn']
]
			
		

The gallery script preserves the order of the items from the galleryData option. Following are the possible media types within this extension, but as already mentioned, you can add your own if required.

• 'imageZoom' - path to the image without http:// and without domain
• 'image360' - path to the folder containing 360 or 3D images without http:// and without domain
• 'youtube' - video ID
• 'vimeo' - video ID
• 'dailymotion' - video ID
• 'ajax' - path to the file which should be loaded over AJAX request
• 'iframe' - path to the file which should be set as src of the iframe

Please find the complete documentation of the plugin options at the bottom of the underlying multimedia example.

As a programmer, you just need to retrieve the required data from the database or other sources, purify and adapt it according to specification and pass it as a JavaScript array to the extension via the galleryData option. That should not be a big deal if it is about plain images. Mostly, you will even find this data in template variables of your system. However, be aware that the image paths you will find may not be the paths you are really looking for. What you are looking for are the source images and not already resized, cached images. Please double-check that data as it is a common mistake when connecting AJAX-ZOOM to a system.

For 360 images, it depends on the level of integration and efforts you want to spend on this. Firstly, you somehow need to make these 360 images available to AJAX-ZOOM. The easiest solution is to upload them over FTP. Each 360-view into a separate folder. Name those folders, e.g., by ID or SKU of the product, to keep track of them. Now, in the frontend, you can check with a server-side script like PHP if the folder named by the ID or SKU of the product is present. If so, you can pass the path as a 360 item to the extension. This solution does not involve any database interactions and other procedures. Of course, you can go a step or more steps further and provide the administrators the possibility to upload the 360 images over the backend of your system or let them import the images, e.g., from a ZIP file or other sources associated with your workflow.

More about AJAX-ZOOM "jQuery.axZm360Gallery" extension

With the prevNextAllData option in this particular multimedia extension enabled, it is furthermore possible to switch between different types of data (video, 360 / 3D, plain images) over left/right buttons, which also works at fullscreen mode as it does work in the box view.

The jQuery.axZm360Gallery extension also supports "hotspots" (clickable markings/layers placed over an image) for the 360/3D views and plain gallery images. You can create hotspots via the hotspot editor, but there is also a possibility to construct them from alternative sources. Read more about hotspots here. Please note that despite looking complicated at first glance, you can easily integrate the editor into the backend of your system. Try it!

Currently, applying 360 product tours with jQuery.axZm360Gallery extension is not implemented. However, this extension supports product tours, and you should consider using it when you require uncomplicated and always a well-maintained solution for presenting 360 product tours together with plain images and videos in one media viewer.

Generally, we recommend looking through the many AJAX-ZOOM examples and select one whose functionality most fits your requirements, and start working with it. Please note that the behavior and layout are all changeable via extension options, general AJAX-ZOOM options, and CSS.