example18.phpHOMEOverview (index.php)Buy / DownloadAsk a question
example20.php
You may also want to visit the original page of this example to get more background information, read a detailed description, and test these examples with real images.

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

Load other examples in slider