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

Gallery is not loaded in browser after adding plugin and dependencies #15

Open
haimari opened this issue Mar 26, 2023 · 1 comment
Open

Comments

@haimari
Copy link

haimari commented Mar 26, 2023

Hello, tried to add the plugin and create a gallery, but it does not seem to work.
Even though when inspecting browser I see the JS loads

image

Dockerfile

FROM squidfunk/mkdocs-material

COPY requirements.txt .

RUN apk add --no-cache gcc musl-dev

RUN pip install -r requirements.txt

Python requirements.txt

mkdocs==1.4.2
mkdocs-awesome-pages-plugin==2.2.1
mkdocs-git-revision-date-localized-plugin==0.5.2
mkdocs-material==5.2.2
mkdocs-material-extensions==1.0
mkdocs-minify-plugin==0.3.0
jinja2==3.0.3
beautifulsoup4>=4.11.1
mkdocs-glightbox

mkdocs.conf

plugins:
  - search
  - awesome-pages
  - minify:
      minify_html: true
  - glightbox:
      touchNavigation: true
      loop: false
      effect: zoom
      slide_effect: slide
      width: 100%
      height: auto
      zoomable: false
      draggable: false
      skip_classes:
        - custom-skip-class-name
      auto_caption: false
      caption_position: bottom

Extra(mkdocs.yml)

extra_javascript:
  - javascripts/glightbox.min.js


extra_css:
  - stylesheets/extra.css
  - stylesheets/glightbox.min.css

The image code in mkdocs the page

![Taipei, Taiwan. Credit: Yuyu Liu](/img/jump.jpg){data-gallery="taipei"}

![Taipei, Taiwan. Credit: Yuyu Liu](/img/pit.jpg){data-gallery="taipei"}

Website to inspect the issue (the last two images in the page)

https://www.rc-drive.com/

@blueswen
Copy link
Owner

Your site has some javascript issues with the error Uncaught ReferenceError: document$ is not defined. Could you provide your code or minimal reproducible code?

Besides, when you are using mkdocs-glightbox, you don't have to include glightbox js and CSS by yourself, the plugin will do it for you.

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

2 participants