Css Zero Showcase

Previews

Pages

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%= link_to asset_path("cover.jpg"), class: "inline-flex", data: { action: "lightbox#show:prevent", lightbox_url_value: asset_path("cover.jpg?disposition=attachment") } do %>
  <%= image_tag "cover.jpg", size: 300, alt: "Cover for the book", class: "book__cover margin-block-none center" %>
<% end %>
<!-- BEGIN: This dialog will be reused, put it somewhere in your layout.html.erb -->
<dialog class="lightbox" aria-label="Image Viewer (Press escape to close)" data-lightbox-target="dialog" data-action="close->lightbox#reset">
  <img src="" class="lightbox__image" data-lightbox-target="zoomedImage" />
  <button type="button" class="btn btn--icon lightbox__close" data-action="lightbox#close">
    <span class="icon icon--x" style="--icon-size: 1.5rem" aria-hidden="true"></span>
    <span class="sr-only">Close image viewer</span>
  </button>
  <a href="" class="btn btn--icon lightbox__download" data-lightbox-target="download" download>
    <span class="icon icon--download" style="--icon-size: 1.5rem" aria-hidden="true"></span>
    <span class="sr-only">Download file</span>
  </a>
  <button type="button" class="btn btn--icon lightbox__share" data-controller="web-share" data-action="web-share#share" data-web-share-file-value="" data-lightbox-target="share">
    <span class="icon icon--share" style="--icon-size: 1.5rem" aria-hidden="true"></span>
    <span class="sr-only">Share file</span>
  </button>
</dialog>
<!-- END -->