example35_fromclick.php HOME Overview (index.php) Buy / Download Ask a question

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>


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 class="col-md-3 col-md-pull-9">
		<!-- Cropped thumbs -->
		<div id="azThumbsCropArea" style="position: relative; margin-top: 20px;">


Show / Hide Code
Load other examples in slider