gllry Documentation

Simple image gllry

Use the .gllry-* classes


      <div class="gllry">
        <img src="https://picsum.photos/id/1015/640/480" class="gllry-thumb" tabindex="-1">
          <div class="gllry-full">
          <img src="https://picsum.photos/id/1015/1920/1080">
        </div>
      </div>

Overlay

Use the .gllry-overlay class instead to add a background overlay


      <div class="gllry-overlay">
        <img src="https://picsum.photos/id/1074/640/480" class="gllry-thumb" tabindex="-1">
        <div class="gllry-full">
          <img src="https://picsum.photos/id/1074/1920/1080">
        </div>
      </div>

Traversable

Set tabindex to greater than -1 to traverse through gallery with tab


      <div class="gllry">
        <img src="https://picsum.photos/id/24/640/480" class="gllry-thumb" tabindex="101">
        <div class="gllry-full">
          <img src="https://picsum.photos/id/24/1920/1080">
        </div>
      </div>

Prevent gllry from closing

To prevent .gllry-full from closing, when the content is clicked, add tabindex="-1".
Also add button.gllry-close inside to increase usability.


      <div class="gllry">
        <img src="https://picsum.photos/id/299/640/480" class="gllry-thumb" tabindex="-1">
        <div class="gllry-full" tabindex="-1">
          <img src="https://picsum.photos/id/299/1920/1080">
          <button class="gllry-close">&times;</button>
        </div>
      </div>

Figures with captions

Use <figure> instead of plain <img>


      <div class="gllry">
        <img src="https://picsum.photos/id/287/640/480" class="gllry-thumb" tabindex="-1">
        <div class="gllry-full">
          <figure>
            <img src="https://picsum.photos/id/287/1920/1080">
            <figcaption>Lorem ipsum</figcaption>
          </figure>
        </div>
      </div>