example35_gallery.php HOME Examples overview Download Ask a question
example36.php

Responsive cropped thumbs gallery with zoomTo or 360 spinTo and zoomTo

Highlights
Loading, please wait...

    The data for the above example with cropped thumbs gallery (product tour) has been generated with AJAX-ZOOM crop editor (example35.php)

    If AJAX-ZOOM "responsive" parent container is resized with javascript by e.g. click on a button (not browser resizing) which changes the size with css directly or adds a different CSS class to it, then you should call jQuery.fn.axZm.resizeStart(3000); when it starts resizing and jQuery.fn.axZm.resizeStart(1); when it definitely ends. No need to do this if your responsive layout is resized by window resize or orinetation change events, AJAX-ZOOM will do it instantly then.

    JavaScript and CSS in head

    Show / Hide Code
    
    <!-- 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 -->
    <link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
    <script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
    
    <!-- Include axZm.thumbSlider -->
    <link rel="stylesheet" type="text/css" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
    <script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
    
    <!-- Include jquery.axZm.imageCropLoad.js -->
    <script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageCropLoad.js"></script>
    
    <!-- A small function to add title button which will expend to full description -->
    <link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.expButton.css"></link>
    <script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
    			

    CSS

    Show / Hide Code

    HTML markup

    Show / Hide Code
    
    <!-- Responsive container using, padding bottom defines the aspect ratio 
    	padding bottom could be refined with @media queries as an idea... -->
    <div class="az_embed-responsive" id="playerOuterWrap">
    	<div class="az_embed-responsive-item">
    		<!-- playerWrap has padding to the right for the slider -->
    		<div id="playerWrap">
    			<!-- container where AJAX-ZOOM will be loaded into-->
    			<div id="azParentContainer" style="">
    				<!-- Content inside target will be removed -->
    				<div style="padding: 20px">Loading, please wait...</div>
    			</div>
    			<!-- Thumb slider with croped images -->
    			<div id="cropSliderWrap">
    				<div id="cropSlider">
    					<ul></ul>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    			

    Javascript

    Show / Hide Code