search

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

support `#only-dark` and `#only-light` feature of mkdocs material #26

Open thesuperzapper opened 7 months ago

thesuperzapper commented 7 months ago

This is a very cool plugin!

There is only one problem I am facing, when a page uses the #only-light or #only-dark feature of Mkdocs, the gallery has blank images (for the images which are hidden based on the theme).

For example, if you include the following markdown on a page:

![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)

If you are currently in light-mode, the gallery will contain 2 images, with the dark-mode one showing as blank.

blueswen commented 6 months ago

I am afraid that I can't implement this. Since only-light and only-dark feature is implemented by CSS selector, and glightbox doesn't support dynamically add or remove images from slide.

If this lightbox effect affects your dynamic image based on the theme, you can add the class off-glb to images to disable them with the lightbox effect but keep others with it. The demo and details are both on documents.

Lexachoc commented 4 months ago

I have also found this problem and I'm surprised that I found a solution for that, right in the document https://blueswen.github.io/mkdocs-glightbox/gallery/gallery/

So instead of 

![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)
...
![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)

Add the data-gallery attribute 

![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light){data-gallery="light"}
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark){data-gallery="dark"}
...
![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light){data-gallery="light"}
![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark){data-gallery="dark"}

or any name to separate them into different galleries (in here I use light and dark. So when you are in light mode, only the images with the attribute data-gallery="light" are displayed in the lightbox and vice versa.

This works perfectly!