example18.php HOME Examples overview Download Ask a question
example20.php

AJAX-ZOOM - high resolution animations

In this 360° animation the internal horizontal gallery is turned on. Normally it would show all the available frames/images of the animation. But as you can see not all of the frames are displayed. They are filtered by "zoomCueFrames" parameter which is passed to AJAX-ZOOM along with other data (see Javascript code below).

Loading, please wait...

Alternatives

In example35.php you can create a similar gallery but with much more options like zoom level, instant generation of the thumbnails and add descriptions for each crop.

JavaScript & CSS files in Head


<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.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.