Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a class="inline-flex" data-action="lightbox#show:prevent" data-lightbox-url-value="/assets/cover-2df09c8d.jpg?disposition=attachment" href="/assets/cover-2df09c8d.jpg">
  <img alt="Cover for the book" class="book__cover margin-block-none center" src="/assets/cover-2df09c8d.jpg" width="300" height="300" />
</a>
<!-- 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 class="btn btn--icon lightbox__close" data-action="lightbox#close">
    <img aria-hidden="true" src="/assets/x-2fabf707.svg" />
    <span class="sr-only">Close image viewer</span>
  </button>
  <a href="" class="btn btn--icon lightbox__download" data-lightbox-target="download" download>
    <img aria-hidden="true" src="/assets/download-608a6c77.svg" />
    <span class="sr-only">Download file</span>
  </a>
  <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">
    <img aria-hidden="true" src="/assets/share-163488c0.svg" />
    <span class="sr-only">Share file</span>
  </button>
</dialog>
<!-- END -->
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 class="btn btn--icon lightbox__close" data-action="lightbox#close">
    <%= image_tag "x.svg", aria: { hidden: "true" } %>
    <span class="sr-only">Close image viewer</span>
  </button>
  <a href="" class="btn btn--icon lightbox__download" data-lightbox-target="download" download>
    <%= image_tag "download.svg", aria: { hidden: "true" } %>
    <span class="sr-only">Download file</span>
  </a>
  <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">
    <%= image_tag "share.svg", aria: { hidden: "true" } %>
    <span class="sr-only">Share file</span>
  </button>
</dialog>
<!-- END -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.lightbox {
  background-color: rgba(0, 0, 0, .8);
  block-size: 100dvh;
  max-block-size: unset;
  inline-size: 100dvw;
  max-inline-size: unset;
  padding: var(--size-4);
  &[open] {
    display: grid;
    place-items: center;
  }
}
.lightbox__close {
  align-self: start;
  grid-area: 1/1;
  justify-self: end;
}
.lightbox__download {
  align-self: end;
  grid-area: 1/1;
  justify-self: end;
}
.lightbox__share {
  align-self: start;
  grid-area: 1/1;
  justify-self: start;
}
.lightbox__image {
  grid-area: 1/1;
  max-inline-size: calc(100dvw - (var(--size-4) * 2));
  max-block-size:  calc(100dvh - (var(--size-4) * 2));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "dialog", "zoomedImage", "download", "share" ]
  show(event) {
    this.dialogTarget.showModal()
    this.#set(event.target.parentNode)
  }
  close() {
    this.dialogTarget.close()
  }
  reset() {
    this.zoomedImageTarget.src = ""
    this.downloadTarget.href = ""
    this.shareTarget.dataset.webShareFileValue = "";
  }
  #set(target) {
    this.zoomedImageTarget.src = target.href
    this.downloadTarget.href = target.dataset.lightboxUrlValue;
    this.shareTarget.dataset.webShareFileValue = target.dataset.lightboxUrlValue;
  }
}

Initialization

<body data-controller="lightbox">
  <%= yield %>
</body>