Click to View Image in Popup #398

New Issue

Open

opened 2026-02-04 19:26:49 +03:00 by OVERLORD · 30 comments

OVERLORD commented 2026-02-04 19:26:49 +03:00

Owner

Copy Link

Originally created by @Shackelford-Arden on GitHub (Aug 8, 2017).

Desired Feature:

I'd prefer to have it where images that are potentially too small to view just on the page that you can click on the image and it pops up on the same page.

Current Behavior:

Right now the images just open up in a new tab.

It works, but I'd think it'd be nice to have image show up within the same tab. Particularly helpful if one has many tabs open 😄

Originally created by @Shackelford-Arden on GitHub (Aug 8, 2017). Desired Feature: I'd prefer to have it where images that are potentially too small to view just on the page that you can click on the image and it pops up on the same page. Current Behavior: Right now the images just open up in a new tab. It works, but I'd think it'd be nice to have image show up within the same tab. Particularly helpful if one has many tabs open :smile:

OVERLORD added the 🛠️ Enhancement label 2026-02-04 19:26:49 +03:00

OVERLORD commented 2026-02-04 19:26:59 +03:00

Author

Owner

Copy Link

@nekromoff commented on GitHub (Sep 6, 2017):

Maybe standardized lightbox that's easy to add as JS

@nekromoff commented on GitHub (Sep 6, 2017): Maybe standardized lightbox that's easy to add as JS

OVERLORD commented 2026-02-04 19:27:06 +03:00

Author

Owner

Copy Link

@jonathanadams commented on GitHub (Dec 7, 2017):

+1

@jonathanadams commented on GitHub (Dec 7, 2017): +1

OVERLORD commented 2026-02-04 19:27:15 +03:00

Author

Owner

Copy Link

@kayvanaarssen commented on GitHub (Mar 23, 2020):

Would love to see this feature

@kayvanaarssen commented on GitHub (Mar 23, 2020): Would love to see this feature

OVERLORD commented 2026-02-04 19:27:31 +03:00

Author

Owner

Copy Link

@alexanderhofstaetter commented on GitHub (May 6, 2020):

i would also love to see this feature - it is a little bit annoying having the image URL open in a new tab always ...

@alexanderhofstaetter commented on GitHub (May 6, 2020): i would also love to see this feature - it is a little bit annoying having the image URL open in a new tab always ...

OVERLORD commented 2026-02-04 19:27:35 +03:00

Author

Owner

Copy Link

@kayvanaarssen commented on GitHub (Nov 19, 2020):

Any news on this feature, it would be nice to get the Images bigger on Click. And not open in a new page 👍

@kayvanaarssen commented on GitHub (Nov 19, 2020): Any news on this feature, it would be nice to get the Images bigger on Click. And not open in a new page 👍

OVERLORD commented 2026-02-04 19:27:42 +03:00

Author

Owner

Copy Link

@kayvanaarssen commented on GitHub (Aug 18, 2021):

@ssddanbrown Any news on this feature, would be very nice to get a pop-up for the bigger image.

Maybe something like Confluence has, it has the option to include the image in different sizes in the "Page / Content"

@kayvanaarssen commented on GitHub (Aug 18, 2021): @ssddanbrown Any news on this feature, would be very nice to get a pop-up for the bigger image. Maybe something like Confluence has, it has the option to include the image in different sizes in the "Page / Content" 

OVERLORD commented 2026-02-04 19:27:54 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Aug 19, 2021):

@kayvanaarssen No news on this feature.

@ssddanbrown commented on GitHub (Aug 19, 2021): @kayvanaarssen No news on this feature.

OVERLORD commented 2026-02-04 19:28:09 +03:00

Author

Owner

Copy Link

@nekromoff commented on GitHub (Aug 20, 2021):

This could be solved via pure CSS3 added to the settings "custom head" field. I might do some testing and try to come up with a zero config CSS ligthbox.

@nekromoff commented on GitHub (Aug 20, 2021): This could be solved via pure CSS3 added to the settings "custom head" field. I might do some testing and try to come up with a zero config CSS ligthbox.

OVERLORD commented 2026-02-04 19:28:17 +03:00

Author

Owner

Copy Link

@nekromoff commented on GitHub (Aug 20, 2021):

Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings:

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet">
<script>
window.onload = function() {
  var images=document.querySelectorAll("main a img");
  for (image of images) {
    new Luminous(image.parentElement);
  }
}
</script>

You might want to download the code and link it locally, if you don't trust random CDN.

Remember, this is just a proof of concept...

@nekromoff commented on GitHub (Aug 20, 2021): Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings: ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet"> <script> window.onload = function() { var images=document.querySelectorAll("main a img"); for (image of images) { new Luminous(image.parentElement); } } </script> ``` You might want to download the code and link it locally, if you don't trust random CDN. Remember, this is just a proof of concept...

OVERLORD commented 2026-02-04 19:28:25 +03:00

Author

Owner

Copy Link

@lenusch commented on GitHub (Mar 18, 2022):

Cool Popup works. Can i overgive a attribut in the Images, to group them? That if i open one IMage, i can use arrows for next Image?

@lenusch commented on GitHub (Mar 18, 2022): Cool Popup works. Can i overgive a attribut in the Images, to group them? That if i open one IMage, i can use arrows for next Image?

OVERLORD commented 2026-02-04 19:28:30 +03:00

Author

Owner

Copy Link

@Gum97 commented on GitHub (Feb 13, 2023):

+1
Has this issue been resolved yet?

@Gum97 commented on GitHub (Feb 13, 2023): +1 Has this issue been resolved yet?

OVERLORD commented 2026-02-04 19:28:46 +03:00

Author

Owner

Copy Link

@tcatlas commented on GitHub (Feb 17, 2023):

@nekromoff

Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings:

....

You might want to download the code and link it locally, if you don't trust random CDN.

Remember, this is just a proof of concept...

This is great, and solves the problem in the intermediary, however, I would love to see this feature expanded upon to add the ability to zoom to scroll and also arrows to quickly navigate between images on the page.

@tcatlas commented on GitHub (Feb 17, 2023): @nekromoff > Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings: > > .... > > You might want to download the code and link it locally, if you don't trust random CDN. > > Remember, this is just a proof of concept... This is great, and solves the problem in the intermediary, however, I would love to see this feature expanded upon to add the ability to zoom to scroll and also arrows to quickly navigate between images on the page.

OVERLORD commented 2026-02-04 19:28:52 +03:00

Author

Owner

Copy Link

@at-ng commented on GitHub (Apr 24, 2023):

Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings:

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet">
<script>
window.onload = function() {
  var images=document.querySelectorAll("main a img");
  for (image of images) {
    new Luminous(image.parentElement);
  }
}
</script>

You might want to download the code and link it locally, if you don't trust random CDN.

Remember, this is just a proof of concept...

If you change the script to

window.onload = function() {
  for (image of document.querySelectorAll("main img")) {
    new Luminous(image, {sourceAttribute:"src"});
  }
}

Then it seems to work for diagrams as well (they do not have a clickable link at all). If you want a hand instead of a pointer when moving the mouse over the diagram images then you can add this line after:

document.querySelectorAll("main img").forEach((elem) => {elem.style.cursor = 'pointer'})

To prevent the header from being placed on top of the image you can change it to:

  for (image of document.querySelectorAll("main img")) {
    new Luminous(image, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}});
  }

Cool Popup works. Can i overgive a attribut in the Images, to group them? That if i open one IMage, i can use arrows for next Image?

To get a gallery (arrows to switch image) instead you can replace the for {} loop with

new LuminousGallery(document.querySelectorAll("main img"), {}, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}});

@at-ng commented on GitHub (Apr 24, 2023): > Sorry for spamming this. I have used Luminous library in the end. Paste this into your custom head code under settings: > > ``` > <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"></script> > <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet"> > <script> > window.onload = function() { > var images=document.querySelectorAll("main a img"); > for (image of images) { > new Luminous(image.parentElement); > } > } > </script> > ``` > > You might want to download the code and link it locally, if you don't trust random CDN. > > Remember, this is just a proof of concept... If you change the script to ``` window.onload = function() { for (image of document.querySelectorAll("main img")) { new Luminous(image, {sourceAttribute:"src"}); } } ``` Then it seems to work for diagrams as well (they do not have a clickable link at all). If you want a hand instead of a pointer when moving the mouse over the diagram images then you can add this line after: ``` document.querySelectorAll("main img").forEach((elem) => {elem.style.cursor = 'pointer'}) ``` To prevent the header from being placed on top of the image you can change it to: ``` for (image of document.querySelectorAll("main img")) { new Luminous(image, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}}); } ``` > Cool Popup works. Can i overgive a attribut in the Images, to group them? That if i open one IMage, i can use arrows for next Image? To get a gallery (arrows to switch image) instead you can replace the `for {}` loop with ``` new LuminousGallery(document.querySelectorAll("main img"), {}, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}}); ```

OVERLORD commented 2026-02-04 19:29:08 +03:00

Author

Owner

Copy Link

@helson22 commented on GitHub (Sep 28, 2023):

This is a simple and working solution.

But I have one Problem: every image with an anchor on it is processed by the code above. I have images that I don't want to show in a lightbox because the link in the anchor goes external.

How can I achieve this?

Thank you in advance!

@helson22 commented on GitHub (Sep 28, 2023): This is a simple and working solution. But I have one Problem: every image with an anchor on it is processed by the code above. I have images that I don't want to show in a lightbox because the link in the anchor goes external. How can I achieve this? Thank you in advance!

OVERLORD commented 2026-02-04 19:29:17 +03:00

Author

Owner

Copy Link

@Man-in-Black commented on GitHub (Oct 5, 2023):

I've starting to use this script, but if I activate it I am not able to sort the books via drag and drop.
Is there a way around it?

@Man-in-Black commented on GitHub (Oct 5, 2023): I've starting to use this script, but if I activate it I am not able to sort the books via drag and drop. Is there a way around it?

OVERLORD commented 2026-02-04 19:29:23 +03:00

Author

Owner

Copy Link

@at-ng commented on GitHub (Oct 5, 2023):

As a workaround you could change it to

<!-- Add popup for images (and diagrams) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet">
<script>
window.onload = function() {
  if(document.location.toString().match('disableImagePopup')) return;
  let lgs = document.createElement('script');
  lgs.onload = function () {
    new LuminousGallery(document.querySelectorAll("main img"),{arrowNavigation: true},{sourceAttribute:"src",closeWithEscape: true,onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}});
    document.querySelectorAll("main img").forEach((elem) => {elem.style.cursor = 'pointer'})
  };
  lgs.src = "https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js";
  document.head.appendChild(lgs)
};
</script>

Then when you add ?disableImagePopup to the end of an url the script will not load. Not sure why the issue happens, guess there is some kind of collision between that page and Luminous. Another option is to disable it on that page specifically, to do that replace 'disableImagePopup' (including '') with /\/shelves\/[^\/]+\/edit/

@at-ng commented on GitHub (Oct 5, 2023): As a workaround you could change it to ``` <!-- Add popup for images (and diagrams) --> <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous-basic.min.css" rel="stylesheet"> <script> window.onload = function() { if(document.location.toString().match('disableImagePopup')) return; let lgs = document.createElement('script'); lgs.onload = function () { new LuminousGallery(document.querySelectorAll("main img"),{arrowNavigation: true},{sourceAttribute:"src",closeWithEscape: true,onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}}); document.querySelectorAll("main img").forEach((elem) => {elem.style.cursor = 'pointer'}) }; lgs.src = "https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.5/luminous.min.js"; document.head.appendChild(lgs) }; </script> ``` Then when you add ?disableImagePopup to the end of an url the script will not load. Not sure why the issue happens, guess there is some kind of collision between that page and Luminous. Another option is to disable it on that page specifically, to do that replace `'disableImagePopup'` (including '') with `/\/shelves\/[^\/]+\/edit/`

OVERLORD commented 2026-02-04 19:29:26 +03:00

Author

Owner

Copy Link

@Man-in-Black commented on GitHub (Oct 6, 2023):

Thanks a lot, that fixed the issue.
But I replaced the 'disableImagePopup' with /\/shelves\/[^\/]+\/edit/ and now it works perfect.

@Man-in-Black commented on GitHub (Oct 6, 2023): Thanks a lot, that fixed the issue. But I replaced the `'disableImagePopup'` with `/\/shelves\/[^\/]+\/edit/` and now it works perfect.

OVERLORD commented 2026-02-04 19:29:43 +03:00

Author

Owner

Copy Link

@mschoon85 commented on GitHub (Jan 4, 2024):

With the release of version 23.12, I encountered an issue where the image would display behind the page upon clicking on it. This was resolved thanks to the response from at-ng on April 24, 2023. My code now looks like this (including the latest version of lightbox):

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet">
<script>
window.onload = function() {
  var images = document.querySelectorAll("main a img");
   for (image of document.querySelectorAll("main img")) {
    new Luminous(image, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}});
  }
}
</script>

Kind Regards,

Michel

@mschoon85 commented on GitHub (Jan 4, 2024): With the release of version 23.12, I encountered an issue where the image would display behind the page upon clicking on it. This was resolved thanks to the response from at-ng on April 24, 2023. My code now looks like this (including the latest version of lightbox): ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet"> <script> window.onload = function() { var images = document.querySelectorAll("main a img"); for (image of document.querySelectorAll("main img")) { new Luminous(image, {sourceAttribute:"src",onOpen:() => {document.querySelector('.lum-lightbox').style.zIndex = 999}}); } } </script> ``` Kind Regards, Michel

OVERLORD commented 2026-02-04 19:29:53 +03:00

Author

Owner

Copy Link

@Limerick-gh commented on GitHub (Feb 22, 2024):

This is exactly I was looking for. Honestly, I'd say this should be part of the core product. But if we can get it with a customization I am also fine with this.

@mschoon85, I tried your code and it's working in general. But if there are multiple images on a page, it just works well for the first one I click. If click afterwards on a different image, it does open in the background.
Do you experience the same?

@Limerick-gh commented on GitHub (Feb 22, 2024): This is exactly I was looking for. Honestly, I'd say this should be part of the core product. But if we can get it with a customization I am also fine with this. @mschoon85, I tried your code and it's working in general. But if there are multiple images on a page, it just works well for the first one I click. If click afterwards on a different image, it does open in the background. Do you experience the same?

OVERLORD commented 2026-02-04 19:29:58 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Feb 23, 2024):

@Limerick-gh here's my tweak on this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet">
<style>.lum-lightbox.lum-open {z-index: 999;}</style>
<script type="module">
  const images = document.querySelectorAll(".page-content a > img");
  for (const image of images) {
    new Luminous(image.parentElement);
  }
</script>

Note: This differs slightly in that it will show the image linked to rather than the thumbnail image shown on the page

@ssddanbrown commented on GitHub (Feb 23, 2024): @Limerick-gh here's my tweak on this: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet"> <style>.lum-lightbox.lum-open {z-index: 999;}</style> <script type="module"> const images = document.querySelectorAll(".page-content a > img"); for (const image of images) { new Luminous(image.parentElement); } </script> ``` _Note: This differs slightly in that it will show the image linked to rather than the thumbnail image shown on the page_

OVERLORD commented 2026-02-04 19:30:06 +03:00

Author

Owner

Copy Link

@Limerick-gh commented on GitHub (Feb 23, 2024):

This works great @ssddanbrown!
I just recognized that it does work for uploaded images perfectly. But if images are pasted into bookstack from clipboard, it doesn't. Probably because these images are missing the <a> element.

@Limerick-gh commented on GitHub (Feb 23, 2024): This works great @ssddanbrown! I just recognized that it does work for uploaded images perfectly. But if images are pasted into bookstack from clipboard, it doesn't. Probably because these images are missing the `<a>` element.

OVERLORD commented 2026-02-04 19:30:14 +03:00

Author

Owner

Copy Link

@mschoon85 commented on GitHub (Feb 23, 2024):

@ssddanbrown Your code functions flawlessly! Thank you! @Limerick-gh, on my end, it operates smoothly for both uploaded and clipboard-pasted images.

@mschoon85 commented on GitHub (Feb 23, 2024): @ssddanbrown Your code functions flawlessly! Thank you! @Limerick-gh, on my end, it operates smoothly for both uploaded and clipboard-pasted images.

OVERLORD commented 2026-02-04 19:30:22 +03:00

Author

Owner

Copy Link

@Limerick-gh commented on GitHub (Feb 23, 2024):

Can confirm, that it does work with simple copy paste as well.
Not sure how the other 'old' images have been inserted on the page.. But if I do this for new images it does work as expected. Awesome! 🎉
Thank you so much @ssddanbrown! for this great application and your support!

@Limerick-gh commented on GitHub (Feb 23, 2024): Can confirm, that it does work with simple copy paste as well. Not sure how the other 'old' images have been inserted on the page.. But if I do this for new images it does work as expected. Awesome! 🎉 Thank you so much @ssddanbrown! for this great application and your support!

OVERLORD commented 2026-02-04 19:30:27 +03:00

Author

Owner

Copy Link

@Mikrz commented on GitHub (Apr 11, 2024):

@ssddanbrown

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet">
<style>.lum-lightbox.lum-open {z-index: 999;}</style>
<script type="module">
  const images = document.querySelectorAll(".page-content a > img");
  for (const image of images) {
    new Luminous(image.parentElement);
  }
</script>

Just wanted to let you know, it appears that Luminous Lightbox's module conflicts with Bookstacks drag & drop sorting of pages. Instead of the drag & drop working, it just highlights text as if there was no drag & drop functionality at all, at least on v23.12.2 as I have not yet had time to upgrade to the latest version.

@Mikrz commented on GitHub (Apr 11, 2024): @ssddanbrown > ``` > <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> > <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet"> > <style>.lum-lightbox.lum-open {z-index: 999;}</style> > <script type="module"> > const images = document.querySelectorAll(".page-content a > img"); > for (const image of images) { > new Luminous(image.parentElement); > } > </script> > ``` Just wanted to let you know, it appears that Luminous Lightbox's module conflicts with Bookstacks drag & drop sorting of pages. Instead of the drag & drop working, it just highlights text as if there was no drag & drop functionality at all, at least on v23.12.2 as I have not yet had time to upgrade to the latest version.

OVERLORD commented 2026-02-04 19:30:35 +03:00

Author

Owner

Copy Link

@at-ng commented on GitHub (Apr 12, 2024):

@ssddanbrown

<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet">
<style>.lum-lightbox.lum-open {z-index: 999;}</style>
<script type="module">
  const images = document.querySelectorAll(".page-content a > img");
  for (const image of images) {
    new Luminous(image.parentElement);
  }
</script>

Just wanted to let you know, it appears that Luminous Lightbox's module conflicts with Bookstacks drag & drop sorting of pages. Instead of the drag & drop working, it just highlights text as if there was no drag & drop functionality at all, at least on v23.12.2 as I have not yet had time to upgrade to the latest version.

https://github.com/BookStackApp/BookStack/issues/464#issuecomment-1748753283
https://github.com/BookStackApp/BookStack/issues/464#issuecomment-1748826707
For both pages it would be
/\/shelves\/[^\/]+\/edit|\/books\/[^\/]+\/edit/

@at-ng commented on GitHub (Apr 12, 2024): > @ssddanbrown > > > ``` > > <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> > > <link href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css" rel="stylesheet"> > > <style>.lum-lightbox.lum-open {z-index: 999;}</style> > > <script type="module"> > > const images = document.querySelectorAll(".page-content a > img"); > > for (const image of images) { > > new Luminous(image.parentElement); > > } > > </script> > > ``` > > Just wanted to let you know, it appears that Luminous Lightbox's module conflicts with Bookstacks drag & drop sorting of pages. Instead of the drag & drop working, it just highlights text as if there was no drag & drop functionality at all, at least on v23.12.2 as I have not yet had time to upgrade to the latest version. https://github.com/BookStackApp/BookStack/issues/464#issuecomment-1748753283 https://github.com/BookStackApp/BookStack/issues/464#issuecomment-1748826707 For both pages it would be `/\/shelves\/[^\/]+\/edit|\/books\/[^\/]+\/edit/`

OVERLORD commented 2026-02-04 19:30:44 +03:00

Author

Owner

Copy Link

@szabeszg commented on GitHub (Apr 12, 2024):

Can't we just have it as an option in the core?

@szabeszg commented on GitHub (Apr 12, 2024): Can't we just have it as an option in the core?

OVERLORD commented 2026-02-04 19:30:51 +03:00

Author

Owner

Copy Link

@tcatlas commented on GitHub (Apr 13, 2024):

It also appears to break the tag sorting.

I agree this should be a core feature, not a hack.

@tcatlas commented on GitHub (Apr 13, 2024): It also appears to break the tag sorting. I agree this should be a core feature, not a hack.

OVERLORD commented 2026-02-04 19:31:10 +03:00

Author

Owner

Copy Link

@virtadpt commented on GitHub (Apr 14, 2024):

I agree as well. This isn't just quality of life for UI, this is accessibility.

@virtadpt commented on GitHub (Apr 14, 2024): I agree as well. This isn't just quality of life for UI, this is accessibility.

OVERLORD commented 2026-02-04 19:31:16 +03:00

Author

Owner

Copy Link

@vmario89 commented on GitHub (Feb 11, 2025):

i modified the lightbox to only show if the parent tag of the image is really an image (at least by file ending check). Because in my case i have some images in BookStack which deal as buttons to open another web page. Now, with the previously pasted code from other used, the external url (not an image) is also going to be rendered as image lightbox, which surely fails. so i added that regex around

<script src="/luminous.min.js"></script>
<link href="/luminous-basic.min.css" rel="stylesheet">
<style>.lum-lightbox.lum-open {z-index: 999;}</style>
<script type="module">
  const images = document.querySelectorAll(".page-content a > img");
  const pattern = new RegExp('^https?:\\/\\/.+\\.(png|jpg|jpeg|bmp|gif|webp)$', 'i');
  for (const image of images) {
    if (pattern.test(image.parentElement.href)) {
      new Luminous(image.parentElement);
    }
  }
</script>

we could also do some check if the image.src == image.parentElement.href is the same url base + file ending to be more precise

@vmario89 commented on GitHub (Feb 11, 2025): i modified the lightbox to only show if the parent tag <a> of the image <img> is really an image (at least by file ending check). Because in my case i have some images in BookStack which deal as buttons to open another web page. Now, with the previously pasted code from other used, the external url (not an image) is also going to be rendered as image lightbox, which surely fails. so i added that regex around ``` <script src="/luminous.min.js"></script> <link href="/luminous-basic.min.css" rel="stylesheet"> <style>.lum-lightbox.lum-open {z-index: 999;}</style> <script type="module"> const images = document.querySelectorAll(".page-content a > img"); const pattern = new RegExp('^https?:\\/\\/.+\\.(png|jpg|jpeg|bmp|gif|webp)$', 'i'); for (const image of images) { if (pattern.test(image.parentElement.href)) { new Luminous(image.parentElement); } } </script> ``` we could also do some check if the image.src == image.parentElement.href is the same url base + file ending to be more precise

OVERLORD commented 2026-02-04 19:31:21 +03:00

Author

Owner

Copy Link

@aaronolsen commented on GitHub (Jul 29, 2025):

I used @vmario89 with BookStack v25.05.2 and this gives the lightbox effect and does not disrupt neither page sorting nor tag sorting. Thank you @vmario89!

@aaronolsen commented on GitHub (Jul 29, 2025): I used @vmario89 with BookStack v25.05.2 and this gives the lightbox effect and does not disrupt neither page sorting nor tag sorting. Thank you @vmario89!

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

l10n_development

further_theme_development

release

llm_only

vectors

v25-11

docker_env

drawio_rendering

user_permissions

ldap_host_failover

svg_image

prosemirror

captcha_example

fix/video-export

v25.12.3

v25.12.2

v25.12.1

v25.12

v25.11.6

v25.11.5

v25.11.4

v24.11.4

v25.11.3

v25.11.2

v25.11.1

v25.11

v25.07.3

v25.07.2

v25.07.1

v25.07

v25.05.2

v25.05.1

v25.05

v25.02.5

v25.02.4

v25.02.3

v25.02.2

v25.02.1

v25.02

v24.12.1

v24.12

v24.10.3

v24.10.2

v24.10.1

v24.10

v24.05.4

v24.05.3

v24.05.2

v24.05.1

v24.05

v24.02.3

v24.02.2

v24.02.1

v24.02

v23.12.3

v23.12.2

v23.12.1

v23.12

v23.10.4

v23.10.3

v23.10.2

v23.10.1

v23.10

v23.08.3

v23.08.2

v23.08.1

v23.08

v23.06.2

v23.06.1

v23.06

v23.05.2

v23.05.1

v23.05

v23.02.3

v23.02.2

v23.02.1

v23.02

v23.01.1

v23.01

v22.11.1

v22.11

v22.10.2

v22.10.1

v22.10

v22.09.1

v22.09

v22.07.3

v22.07.2

v22.07.1

v22.07

v22.06.2

v22.06.1

v22.06

v22.04.2

v22.04.1

v22.04

v22.03.1

v22.03

v22.02.3

v22.02.2

v22.02.1

v22.02

v21.12.5

v21.12.4

v21.12.3

v21.12.2

v21.12.1

v21.12

v21.11.3

v21.11.2

v21.11.1

v21.11

v21.10.3

v21.10.2

v21.10.1

v21.10

v21.08.6

v21.08.5

v21.08.4

v21.08.3

v21.08.2

v21.08.1

v21.08

v21.05.4

v21.05.3

v21.05.2

v21.05.1

v21.05

v21.04.6

v21.04.5

v21.04.4

v21.04.3

v21.04.2

v21.04.1

v21.04

v0.31.8

v0.31.7

v0.31.6

v0.31.5

v0.31.4

v0.31.3

v0.31.2

v0.31.1

v0.31.0

v0.30.7

v0.30.6

v0.30.5

v0.30.4

v0.30.3

v0.30.2

v0.30.1

v0.30.0

v0.29.3

v0.29.2

v0.29.1

v0.29.0

v0.28.3

v0.28.2

v0.28.1

v0.28.0

v0.27.5

v0.27.4

v0.27.3

v0.27.2

v0.27.1

v0.27

v0.26.4

v0.26.3

v0.26.2

v0.26.1

v0.26.0

v0.25.5

v0.25.4

v0.25.3

v0.25.2

v0.25.1

v0.25.0

v0.24.3

v0.24.2

v0.24.1

v0.24.0

v0.23.2

v0.23.1

v0.23.0

v0.22.0

v0.21.0

v0.20.3

v0.20.2

v0.20.1

v0.20.0

v0.19.0

v0.18.5

v0.18.4

v0.18.3

v0.18.2

v0.18.1

v0.18.0

v0.17.4

v0.17.3

v0.17.2

v0.17.1

v0.17.0

v0.16.3

v0.16.2

v0.16.1

v0.16.0

v0.15.3

v0.15.2

v0.15.1

v0.15.0

v0.14.3

v0.14.2

v0.14.1

v0.14.0

v0.13.1

v0.13.0

v0.12.2

v0.12.1

v0.12.0

v0.11.2

v0.11.1

v0.11.0

v0.10.0

v0.9.3

v0.9.2

v0.9.1

v0.9.0

v0.8.2

v0.8.1

v0.8.0

v0.7.6

v0.7.5

v0.7.4

v0.7.3

0.7.2

v.0.7.1

v0.7.0

v0.6.3

v0.6.2

v0.6.1

v0.6.0

v0.5.0

Labels

Clear labels

🎨 Design

📖 Docs Update

🐛 Bug

🐛 Bug

:cat2:🐈 Possible duplicate

💿 Database

☕ Open to discussion

💻 Front-End

🐕 Support

🚪 Authentication

🌍 Translations

🔌 API Task

🏭 Back-End

⛲ Upstream

🔨 Feature Request

🛠️ Enhancement

🛠️ Enhancement

🛠️ Enhancement

❤️ Happy feedback

🔒 Security

🔍 Pending Validation

💆 UX

📝 WYSIWYG Editor

🌔 Out of scope

🔩 API Request

:octocat: Admin/Meta

🖌️ View Customization

❓ Question

🚀 Priority

🛡️ Blocked

🚚 Export System

♿ A11y

🔧 Maintenance

> Markdown Editor

No Label 🛠️ Enhancement

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

OVERLORD

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#398