lazyload lightbox images
This commit is contained in:
parent
dbed7df6fd
commit
af3c8c8075
3 changed files with 11 additions and 3 deletions
|
@ -35,3 +35,8 @@
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
.lightbox span img {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -26,9 +26,11 @@
|
|||
/>
|
||||
</a>
|
||||
<a href="#images" class="lightbox" id={"image-#{image.id}"}>
|
||||
<span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
|
||||
<span>
|
||||
<img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} loading="lazy" />
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</article>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
@ -40,7 +40,7 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
<article>
|
||||
<a href={"#image-#{image.id}"}>
|
||||
<img
|
||||
class="rounded-lg w-28 "
|
||||
class="rounded-lg border border-theme-dim w-28"
|
||||
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
|
||||
/>
|
||||
</a>
|
||||
|
@ -56,7 +56,8 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
</p>
|
||||
|
||||
<a href="#images" class="lightbox" id={"image-#{image.id}"}>
|
||||
<span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
|
||||
<span>
|
||||
<img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} />
|
||||
</span>
|
||||
</a>
|
||||
</article>
|
||||
|
|
Loading…
Reference in a new issue