Styleguide

Lightbox

We use Magnific Popup for lightboxes. By writing HAML as illustrated below, you can create a lightbox image gallery, leveraging our MagnificPopup JavaScript component and without writing any JavaScript yourself.

Non-image Thumbnail

Click this question mark to discover what an image is:
%div{"data-ui-component" => "magnific-popup"}
  %div{"data-ui-component" => "magnific-popup-gallery"}
    Click this question mark to discover what an image is:
    %a.xs-inline-block{href: "/assets/integrations/harvest_instructions/create_key-a7ad10886aac381f0b6d23fd415076fe3c95f3e3da17d8eeeed6b12b6cc3b3ac.png", title: "Now you know what an image is!"}
      %i.fa.fa-question-circle.text-gray.xs-delta.xs-ml0
<div data-ui-component='magnific-popup'>
  <div data-ui-component='magnific-popup-gallery'>
    Click this question mark to discover what an image is:
    <a class='xs-inline-block' href='/assets/integrations/harvest_instructions/create_key-a7ad10886aac381f0b6d23fd415076fe3c95f3e3da17d8eeeed6b12b6cc3b3ac.png' title='Now you know what an image is!'>
      <i class='fa fa-question-circle text-gray xs-delta xs-ml0'></i>
    </a>
  </div>
</div>

Image Thumbnails

%div{"data-ui-component" => "magnific-popup"}
  %div{"data-ui-component" => "magnific-popup-gallery"}
    %a.xs-inline-block{href: "/assets/integrations/harvest_instructions/required_permission-4c52b557a914cde36d50b2377315e389d563e087248f1f46c1a2feb216a599d4.png", title: "This is a caption on the lightbox image"}
      %img{alt: "Alt text appears in lieu of the thumbnail if it fails to load", src: "/assets/integrations/harvest_instructions/required_permission_thumb-3630cccfd8461fbaed95af366e040bd83cdbac69e5b3507a9ae82a2f0df3c1a8.png"}/
    %a.xs-inline-block{href: "/assets/integrations/harvest_instructions/create_key-a7ad10886aac381f0b6d23fd415076fe3c95f3e3da17d8eeeed6b12b6cc3b3ac.png", title: "Another caption"}
      %img{alt: "Make separate thumbnails and full-size images if you want optimal performance", src: "/assets/integrations/harvest_instructions/create_key_thumb-ed6eb51963c02608b6d6eefad5cf9d85eb6d57de67ebc7d72eff55734b4861cb.png"}/
<div data-ui-component='magnific-popup'>
  <div data-ui-component='magnific-popup-gallery'>
    <a class='xs-inline-block' href='/assets/integrations/harvest_instructions/required_permission-4c52b557a914cde36d50b2377315e389d563e087248f1f46c1a2feb216a599d4.png' title='This is a caption on the lightbox image'>
      <img alt="Alt text appears in lieu of the thumbnail if it fails to load" src="/assets/integrations/harvest_instructions/required_permission_thumb-3630cccfd8461fbaed95af366e040bd83cdbac69e5b3507a9ae82a2f0df3c1a8.png" />
    </a>
    <a class='xs-inline-block' href='/assets/integrations/harvest_instructions/create_key-a7ad10886aac381f0b6d23fd415076fe3c95f3e3da17d8eeeed6b12b6cc3b3ac.png' title='Another caption'>
      <img alt="Make separate thumbnails and full-size images if you want optimal performance" src="/assets/integrations/harvest_instructions/create_key_thumb-ed6eb51963c02608b6d6eefad5cf9d85eb6d57de67ebc7d72eff55734b4861cb.png" />
    </a>
  </div>
</div>