AJAX-ZOOM - embedded implementation.
Automatically get a list of folders, create a navigation bar and on click load images from these folders into the AJAX-ZOOM viewer.
This is an 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 an integral part of the viewer.
This example also demonstrates the $.fn.axZm.loadAjaxSet AJAX-ZOOM API method.
With this method, you can replace images that are already loaded into the viewer.
You can find all JavaScript that builds this composition and provides the functionality in the jquery.axZm.azExample4.js file.
It has a few options documented at the bottom of this page.
Feel free to adapt it.
<!-- 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
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.
Nice zoom image concept that i have been looking for . keep going.