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

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

Open
thesuperzapper opened this issue Nov 30, 2023 · 3 comments · May be fixed by #53
Open

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

thesuperzapper opened this issue Nov 30, 2023 · 3 comments · May be fixed by #53

Comments

@thesuperzapper
Copy link

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
Copy link
Owner

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
Copy link

Lexachoc commented Feb 16, 2024

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!

@Xiaokang2022
Copy link
Contributor

@Lexachoc

Manually adding this attribute to every image element is very cumbersome for cases with a large number of images, so I've submitted a PR based on your ideas that might help with this. #49

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

Successfully merging a pull request may close this issue.

4 participants