example35_clean_horizontal.php HOME Examples overview Download Ask a question
example35_responsive.php

Cropped thumbs gallery without slider and free layout

Previous examples use "thumb slider", this one does not. The thumbnails can be loaded anywhere.

Loading, please wait...

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

<!-- This example uses bootstrap CSS classes -->
<div class="row">
	<div class="col-md-9 col-md-push-3">
		<!-- 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" style="padding-bottom: 68%;">
			<div class="az_embed-responsive-item" id="azParentContainer">
				<!-- Content inside target will be removed -->
				<div style="padding: 20px">Loading, please wait...</div>
			</div>
		</div>
	</div>
	<div class="col-md-3 col-md-pull-9">
		<!-- Cropped thumbs -->
		<div id="azThumbsCropArea" style="position: relative; margin-top: 20px;">
		</div>
	</div>
</div>
					

Javascript

Show / Hide Code