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 -->