extension.html

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{#each data}}
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a id="imagePath" href="{{path}}" itemprop="contentUrl" title="{{path}}" >
        <img id="imageSrc" src={{thumbnail}} itemprop="thumbnail">
    </a>
    <figcaption itemprop="caption description">
        <label>{{title}}</label>
        <div class="row gallery-tags">
            {{#each tags}}
            <button class="btn btn-sm tagButton fileTagsTile tagButton-xs" tag="{{this}}" filepath="{{filepath}}">{{this}}</button>
            {{/each}}
        </div>
    </figcaption>
  </figure>
  {{else}}
  <p class="massage-p" data-i18n="ns.perspectives:directoryDoesNotContainAnyImages">Directory does not contain any images.</p>
  {{/each}}
</div>
<div id="imageSwiperShowAllFileContainer">
  <button class="btn btn-primary" id="imageSwiperShowAllFilesButton" data-i18n="ns.perspectives:showAllFiles"></button>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe.
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <button id="imageSwipperTagButton" class="pswp__button" title="Tag" style="background-image: none;"><i style="color: white; padding-top: 5px;" class="fa fa-tag fa-2x"></i></button>
                <button id="imageSwipperRenameButton" class="pswp__button" title="Tag" style="background-image: none;"><i style="color: white; padding-top: 5px;" class="fa fa-edit fa-2x"></i></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<div class="btn-group dropup extMainMenu">
  <button type="button" class="btn dropdown-toggle roundButton perspectiveMainMenuButton" data-toggle="dropdown" id="{{id}}MainDropUp">
    <i class="fa fa-ellipsis-v fa-2x"></i>
  </button>
  <ul class="dropdown-menu pull-right mainDropUpMenu">
    <li class="dropdown-header">
      <button class="close">&times;</button>&nbsp;
    </li>
    <li class="divider"></li>
    <li>
        <div id="themeStyle">
            <i class="fa fa-paint-brush fa-lg fa-fw"></i>&nbsp;
            <div class="btn-group" data-toggle="buttons">
                <a id="whiteBackgroundColor"><label class="btn btn-secondary" data-i18n="[title]ns.perspectives:changeBackgroundColor">&nbsp;</label></a>
                <a id="blackBackgroundColor"><label class="btn btn-black" data-i18n="[title]ns.perspectives:changeBackgroundColor">&nbsp;</label></a>
                <a id="sepiaBackgroundColor"><label class="btn btn-sepia" data-i18n="[title]ns.perspectives:changeBackgroundColor">&nbsp;</label></a>
            </div>
        </div>
    </li>
    <li class="divider"></li>
    <li><a id="aboutButton" data-toggle="modal" data-target="#aboutExtensionModalImageSwiper">
      <i class="fa fa-comment fa-lg fa-fw"></i>&nbsp;<span data-i18n="ns.perspectives:about">About</span>
    </a></li>
  </ul>
</div>
<div class="modal fullScreenMobile" id="aboutExtensionModalImageSwiper" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" id="closeAboutExtensionModal" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
        <h4 class="modal-title" data-i18n="ns.perspectives:aboutTitle">About ImageSwiper</h4>
      </div>
      <div class="modal-body markdown-content"></div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><i class="fa fa-check fa-lg"></i>
        </button>
      </div>
    </div>
  </div>
</div>