framework7.angular
Version:
Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs
39 lines (37 loc) • 2.04 kB
HTML
<div data-page="photo-browser" class="page" ng-controller="PhotoBrowser">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
<div class="center">Photo Browser</div>
<div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
<ul>
<li>Swiper between photos</li>
<li>Multi-gestures support for zooming</li>
<li>Toggle zoom by double tap on photo</li>
<li>Single click on photo to toggle Exposition mode</li>
</ul>
<p>Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:</p>
<div class="row">
<div class="col-33"><a href="#" class="button button-raised ks-pb-standalone">Standalone</a></div>
<div class="col-33"><a href="#" class="button button-raised ks-pb-popup">Popup</a></div>
<div class="col-33"><a href="#" class="button button-raised ks-pb-page">Page</a></div>
</div>
</div>
<div class="content-block">
<p>For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
<div class="row">
<div class="col-50"><a href="#" class="button button-raised ks-pb-standalone-dark">Standalone</a></div>
<div class="col-50"><a href="#" class="button button-raised ks-pb-popup-dark">Popup</a></div>
</div>
</div>
<div class="content-block">
<p>Photo Browser also supports lazy loading for passed images:</p>
<p><a href="#" class="button button-raised ks-pb-lazy">Lazy Loading Images</a></p>
</div>
</div>
</div>