photo-browser.html

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">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="pages navbar-through">
  <div data-page="photo-browser" class="page">
    <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 ks-pb-standalone">Standalone</a></div>
          <div class="col-33"><a href="#" class="button ks-pb-popup">Popup</a></div>
          <div class="col-33"><a href="#" class="button 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 ks-pb-standalone-dark">Standalone</a></div>
          <div class="col-50"><a href="#" class="button 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 ks-pb-lazy">Lazy Loading Images</a></p>
      </div>
    </div>
  </div>
</div>