blueswen / mkdocs-glightbox

A MkDocs plugin supports image lightbox (zoom effect) with GLightbox.
https://blueswen.github.io/mkdocs-glightbox/
MIT License
115 stars 14 forks source link

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

Open haimari opened 1 year ago

haimari commented 1 year ago

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 commented 1 year ago

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.