Click to View Image in Popup

[Shackelford-Arden]

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 😄

[nekromoff]

Maybe standardized lightbox that's easy to add as JS

[jonathanadams]

+1

[kayvanaarssen]

Would love to see this feature

[alexanderhofstaetter]

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

[kayvanaarssen]

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

[kayvanaarssen]

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

[ssddanbrown]

@kayvanaarssen No news on this feature.

[nekromoff]

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]

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

[lenusch]

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?

[Gum97]

+1
Has this issue been resolved yet?

[tcatlas]

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

[at-ng]

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}});

[helson22]

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!

[Man-in-Black]

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?

[at-ng]

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/

[Man-in-Black]

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

[mschoon85]

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

[Limerick-gh]

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?

[ssddanbrown]

@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

[Limerick-gh]

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.

[mschoon85]

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

[Limerick-gh]

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!

[Mikrz]

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

[at-ng]

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

#464 (comment)
#464 (comment)
For both pages it would be
/\/shelves\/[^\/]+\/edit|\/books\/[^\/]+\/edit/

[szabeszg]

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

[tcatlas]

It also appears to break the tag sorting.

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

[virtadpt]

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