example3.php HOME Examples overview Download Ask a question
example5.php

AJAX-ZOOM - embedded implementation

Ver. 5.0.6+ This example has been rewritten. It now uses bootstrap navbar to display folders with images. Click on the folders will load new images into the gallery with high resolution images. All JavaScript is wrapped into one function - jQuery.azExample4(options); Feel free to adapt it.

The main API functions utilized in this example are $.fn.axZm.load and $.fn.axZm.loadAjaxSet;

Loading, please wait...

JavaScript & CSS files in Head


<!-- Bootstrap is needed for this example -->
<link rel="stylesheet" href="example_files/bootstrap/css/bootstrap.min.css" type="text/css">

<!-- jQuery core, needed if not already present. -->
<script src="../axZm/plugins/jquery-2.2.4.js"></script>

<!-- bootstrap.js, needed if not already present. -->
<script src="example_files/bootstrap/js/bootstrap.min.js"></script>

<!-- AJAX-ZOOM core, needed! -->
<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- js for this example (example4.php) -->
<script type="text/javascript" src="../axZm/extensions/axZmExamples/jquery.axZm.azExample4.js"></script>
						

Additional CSS for styling

HTML markup in body


<!-- Container where AJAX-ZOOM will be loaded into -->
<div class="embed-responsive" id="axZmPlayerContainerParent">
	<div id="axZmPlayerContainer" class="embed-responsive-item">
		Loading, please wait...
	</div>
</div>

<nav class="navbar navbar-default" id="axZmNavbarNav">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-target="#axZmNavbarDiv" data-toggle="collapse" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand">Folders</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="axZmNavbarDiv">
			<!-- id - "axZmNavbarContainer" is passed to the plugin -->
			<ul class="nav navbar-nav" id="axZmNavbarContainer">
				<li><a>Loading, please wait...</a></li>
				<!--
				<li class="active"><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				-->
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>
						

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.