Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with self contained document #1

Open
Pierre9344 opened this issue Jul 18, 2022 · 4 comments
Open

Problem with self contained document #1

Pierre9344 opened this issue Jul 18, 2022 · 4 comments

Comments

@Pierre9344
Copy link

Hello,

I was looking for a way to zoom on graph in quarto html output and I tried you extension today. Globally, it work well but there is a problem with self included website.

The extension doesn't seem to identify the self-contained option and while the graph can be see correctly in the document, if we click on it, the lightbox open without showing it. Also, I tried to open my picture in another windows but I it only show the message next: "Firefox ne peut trouver le fichier à l’adresse /E:/QUARTO/_site/samples_files/figure-html/unnamed-chunk-3-1.png".

I resolved it bysetting the self-contained to false option but if possible, I hope this will be corrected in a future version.

Thank you for your help.

@jthomasmock
Copy link

Saw another user (Josh Duncan) ran into this problem as well.

I circumvented by using web-hosted images rather than local.

@jhchou
Copy link

jhchou commented Oct 5, 2022

Just ran into this problem as well, but found this thread. Agree that it would be nice to be able to have a self-contained option, for ease of sharing to VERY non-technical users.

@hafen
Copy link

hafen commented Oct 25, 2022

Here's a hacky solution for now. Not sure if it will work in every case and there could be an easier way.

Create a file, _lightbox_selfcontained.html with the following contents:

<script>
window.onload = () => {
  lightboxQuarto.on('open', () => {
    // find the base64 for the current image
    var gall = lightboxQuarto.elements[0].gallery;
    var b64 = document.querySelector(`[data-gallery='${gall}']`).firstChild.src;
    // set the src of the lightbox img to the base64 encoded image
    lightboxQuarto.activeSlide.getElementsByClassName('gslide-image')[0].firstChild.src = b64;
  });
};
</script>

Then update your _quarto.yml:

format:
  html:
    self-contained: true
    include-in-header: _lightbox_selfcontained.html
    # additional html yaml...

@13-circles
Copy link

Thanks for this.

Just a heads up: while it works just fine with single pictures, it doesn't handle galleries.
No matter on which picture I click, I always get the first one of the gallery. Cycling through then only shows the captions, but no picture (except for the one I clicked on, as well as for the first in the library).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants