bundles/FoxHabbit/BasisBundle/Resources/views/Layout/includes/photoswipe.html.twig line 1

Open in your IDE?
  1. <!-- Root element of PhotoSwipe. Must have class pswp. -->
  2. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" data-open-button-class="btn btn-secondary btn-swipe btn-icon text-white" data-open-button-inner-html="<i class='lorch-icon lorch-icon-fullscreen'></i>">
  4.     <!-- Background of PhotoSwipe.
  5.         It's a separate element as animating opacity is faster than rgba(). -->
  6.     <div class="pswp__bg"></div>
  8.     <!-- Slides wrapper with overflow:hidden. -->
  9.     <div class="pswp__scroll-wrap">
  11.         <!-- Container that holds slides.
  12.             PhotoSwipe keeps only 3 of them in the DOM to save memory.
  13.             Don't modify these 3 pswp__item elements, data is added later on. -->
  14.         <div class="pswp__container">
  15.             <div class="pswp__item"></div>
  16.             <div class="pswp__item"></div>
  17.             <div class="pswp__item"></div>
  18.         </div>
  20.         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  21.         <div class="pswp__ui pswp__ui--hidden">
  23.             <div class="pswp__top-bar">
  25.                 <!--  Controls are self-explanatory. Order can be changed. -->
  27.                 <div class="pswp__counter"></div>
  29.                 <button class="pswp__button pswp__button--close btn btn-secondary btn-swipe btn-icon text-white" title="{{ 'Photoswipe: Close (Esc)'|trans }}"><i class="lorch-icon lorch-icon-close-outline"></i></button>
  31.                 <button class="pswp__button pswp__button--share btn btn-secondary btn-swipe btn-icon text-white" title="{{ 'Photoswipe: Share'|trans }}"><i class="lorch-icon lorch-icon-share"></i></button>
  33.                 <button class="pswp__button pswp__button--fs btn btn-secondary btn-swip btn-icone text-white" title="{{ 'Photoswipe: Toggle fullscreen'|trans }}"><i class="lorch-icon lorch-icon-fullscreen"></i></button>
  35.                 <button class="pswp__button pswp__button--zoom btn btn-secondary btn-swipe btn-icon text-white" title="{{ 'Photoswipe: Zoom in/out'|trans }}"><i class="lorch-icon lorch-icon-search"></i></button>
  37.                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
  38.                 <!-- element will get class pswp__preloader-active when preloader is running -->
  39.                 <div class="pswp__preloader">
  40.                     <div class="pswp__preloader__icn">
  41.                     <div class="pswp__preloader__cut">
  42.                         <div class="pswp__preloader__donut"></div>
  43.                     </div>
  44.                     </div>
  45.                 </div>
  46.             </div>
  48.             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  49.                 <div class="pswp__share-tooltip"></div>
  50.             </div>
  52.             <button class="pswp__button pswp__button--arrow--left btn btn-secondary btn-swipe btn-icon btn-lg text-white" title="{{ 'Photoswipe: Previous (arrow left)'|trans }}">
  53.                 <i class="lorch-icon lorch-icon-arrow-big-left"></i>
  54.             </button>
  56.             <button class="pswp__button pswp__button--arrow--right btn btn-secondary btn-swipe btn-icon btn-lg text-white" title="{{ 'Photoswipe: Next (arrow right)'|trans }}">
  57.                 <i class="lorch-icon lorch-icon-arrow-big-right"></i>
  58.             </button>
  60.             <div class="pswp__caption">
  61.                 <div class="pswp__caption__center"></div>
  62.             </div>
  64.         </div>
  66.     </div>
  68. </div>