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