AJAX-ZOOM - high-resolution animations

This is a 360 object spin example of an animation where, unlike for the other 360 view examples, the horizontal gallery is not disabled. Ordinarily, the gallery would show thumbnails of all 360 frames, what in most cases does not make any sense. However, with the zoomCueFrames parameter that is a filter setting in this 360 view, the gallery contains only a few selected thumbnails. When the user clicks on a thumbnail, the animation spins to this particular frame.

This particular 360 view is especially interesting because the 360 photographer uses a filmmaking technique for a flying camera effect rather than a regular 360-degree photography for a watch. Using appropriate equipment or putting many efforts into 360-degree photography, this type of animations is possible and indeed lovely looking for any other kind of a product.

Also in this example, we use the $.axZmEmbedResponsive plugin to define the aspect ratio for the parent container of the viewer. The plugin prevents that the viewer is taller than the inner height of the browser window. It reduces the height of the parent container if it does not fit into the viewport and keeps the aspect ratio if it does.

Alternatives

In example35.php, you can create a similar gallery but with much more options such as defining the zoom level and coordinates for each frame, instant generation of the thumbnails and adding descriptions for each cropped thumbnail gallery image.

JavaScript & CSS files in Head

<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="../axZm/plugins/jquery-2.2.4.min.js"></script>

<!--  AJAX-ZOOM javascript -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link type="text/css" href="../axZm/axZm.css" rel="stylesheet" />

<!-- Helper plugin to deal with embed-responsive class -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.embedResponsive.js"></script>

<style type="text/css">
	/* copy of bootstraps embed-responsive and embed-responsive-item CSS classes
		if bootstrap or simmilar is included you could use the native classes (without az_) */
	.az_embed-responsive {
		box-sizing: border-box;
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow: hidden;
	}

	.az_embed-responsive-item {
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	@media (max-width: 640px) {
		#axZm_spinSliderParent {
			display: none;
		}
	}
</style>
		

HTML markup

<!-- Responsive wrapper which uses embed-responsive Bootstrap CSS class -->
<div id="ajaxZoomContainerParent" class="az_embed-responsive">
	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="azParentContainer" class="az_embed-responsive-item">
		Loading, please wait...
	</div>
</div>
<!-- When spinSlider is enabled you can put it outside of the player in a container (spinSliderParent opntion) -->
<div id="axZm_spinSliderParent"></div>
		

Javascript

Comments (0)

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

Add Comment