mkdocs-glightbox icon indicating copy to clipboard operation
mkdocs-glightbox copied to clipboard

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

Open thesuperzapper opened this issue 2 years ago • 3 comments

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.

thesuperzapper avatar Nov 30 '23 23:11 thesuperzapper

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.

blueswen avatar Dec 30 '23 10:12 blueswen

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!

Lexachoc avatar Feb 16 '24 06:02 Lexachoc