Feature request: add "lightbox" for images

[heinrich-ulbricht]

So far I was not able to find information that the following is possible:

• a page contains an image
• the image should be displayed with width 600px
• when the user selects the image it is shown at its original size (e.g. 1200px)

Some sites do this as lightbox, some sites open the original image in a new tab. Both would be fine with me. But the user should initially see the smaller image and optionally should be able to get the larger image.

Currently, using the imgproc shortcode I only have the choice to either resize the image to the smaller size (making details indistinguishable for the user) or to show the very large original image in the first place.

[jmichelgarcia]

I currently use Lightbox in a hacky JS way, so it would be nice to have official support for this feature.

[H20220009]

Hi, is this issue still open? I want to work on this issue; please assign me to this.

[chalin]

Hi @H20220009: as we mentioned elsewhere, we don't assign issues in this project. If you would like to contribute, please follow our guidelines.

[fekete-robert]

Just ran into this as I need this feature to one of my projects. A minimal (and minimally tested) solution that seems to work for me is adding the following to your layouts/partials/hooks/body-end.html file:

<!-- Lightbox-like zoomable images using https://biati-digital.github.io/glightbox/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<script>
  const lightbox = GLightbox({
    selector: '.td-content * img',
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});
</script>

Note that the selector in the example now automatically makes any img tag zoomable within the main content of the page, which might have some unwanted side-effects. (glightbox is a vanilla-js solution, other similar libraries that are based on bootstrap might be a better choice)

[huanlin]

Just FYI, here is a demo and how I implement this feature: https://huanlin.cc/blog/2023/08/24/docsy-image-zoom-in/