previous exampleHome
next example

Minimalistic design, custom buttons, 3D/360 objects and plain 2D images in one custom gallery controlled with API

Loading, please wait...

It has been often asked how to manage 360/3D product spins and plain 2D images in one gallery. The vertical and horizontal galleries which are integrated into AJAX-ZOOM do not support it. However it is possible to make a custom HTML gallery with both - 360 and 2D images and control the player over API functions. In this example we have made a custom function jQuery.axZmSwitchImage() including some additional logic - when switching between regular 2D images and 360 object it is necessary (or more easy) to reload the player in the background. Thus the javascript function jQuery.axZmSwitchImage() handels the task. You will find the code in the source of this file. Edit, adjust the function as needed - it is commented.

Please note: some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 'spinAnd2D'){ So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php; However it is recommended to copy options you want to change from /axZm/zoomConfig.inc.php to /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 'spinAnd2D'){, so in case you want to update AJAX-ZOOM later you can overwrite everything except zoomConfigCustom.inc.php;

Of course this "gallery" can be used with only 2D images or only 3D. So in case you don't have a 360 photography for a product you can still use this example.

One of the example objects loaded into the player on www.ajax-zoom.com is a multilevel (multirow) 3D one. However it makes no difference to a regular 360° product spin with just one row.

The only difference between regular 360 spin and multirow is that original images are placed in subfolders of the target folder. E.g. the path passed to the folder is ajaxZoom.parameter = "example=17&3dDir=/pic/zoomVR/nike"; images of each row are placed in subfolders, e.g. /pic/zoomVR/nike/0, /pic/zoomVR/nike/15, /pic/zoomVR/nike/30, /pic/zoomVR/nike/45, /pic/zoomVR/nike/60, /pic/zoomVR/nike/75, /pic/zoomVR/nike/90; You do not need to define these subfolders anywhere. AJAX-ZOOM will instantly detect them and procede all the images in them.

Last but not least: there is no PHP needed to run it in your actual application. An other words you can use it e.g. with Phalanger in ASP.NET environment.

MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom