example3.php HOME Examples overview Download Ask a question / privacy policy / imprint
example5.php

AJAX-ZOOM - embedded implementation. Automatically get a list of folders, create a navigation bar and on click load images from these folders into AJAX-ZOOM viewer.

Embedded zoom viewer with internal thumbnails gallery. It has a navigation bar below the viewer to load different images from several folders. The navigation bar uses bootstrap "navbar" CSS construct and it is not integral part of the viewer. This example also demonstrates $.fn.axZm.loadAjaxSet AJAX-ZOOM API method. With this method, you can replace images already loaded into the viewer. All JavaScript is wrapped into one jQuery.azExample4 function. Feel free to adapt it.

Loading, please wait...

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

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 (1)

Deepak Singh 2018-03-09 07:56:05
Deepak Singh Nice zoom image concept that i have been looking for . keep going.

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.
Load other examples in slider