Mkdocs-material: bootstrap lightbox plugin?

[atulc]

This isn't _really_ an issue, but a feature request: is there any way that mkdocs-material can easily support the mkdocs-lightbox recipe? I'm looking for some simple yaml configuration guidance on doing this but just don't know how - thanks in advance.

See: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Recipes#lightbox-add-on-using-theme_dir

[squidfunk]

From the README:

The CSS and JavaScript files have been copied from version 4.0.2 of Lightbox for Bootstrap (as MkDocs uses Bootsrap version 3).

Material doesn't include jQuery and Bootstrap and the lightbox plugin has those as a dependency. However, you could include jQuery and Bootstrap as extra_js and follow the tutorial as outlined.

A lightbox integration is one thing I have on my roadmap for the future, but I don't know when I will find the time. I don't know of any good zero-dependency, cross-browser, responsive lightbox implementation. If you can recommend one, it would make things a lot easier. However, I cannot say when this will be ready, I'm sorry.

[subodhpareek18]

@squidfunk hi could you please checkout these two libraries. Written in pure javascript with zero deps.
https://github.com/feimosi/baguetteBox.js
https://github.com/sachinchoolur/lightgallery.js

I personally prefer the second one, as it looks faster, cleaner, has more features and more in line with material design.

[squidfunk]

The second one looks pretty interesting. How is a lightbox expected to be working? Automatically attach to all images in the content area?

[subodhpareek18]

Did a little bit of research on this and I'd say it actually really depends on what you're looking to implement. Lightbox generally just means a:

link1
JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

link2
This one has a specific implementation of a lightbox as an image gallery

link3
Here is the original library that coined the term and element lightbox. It has an example of individual images that zoom up as well as a image gallery of 4 images.

link4
Here is a more modern implementation in medium.com, of a single image that zooms up.

And obviously the most common lightbox-ish element would be a feed in social networking sites like facebook, twitter. And even apps like slack, skype. And they either target a single image, or a whole album if relevant images are present together.

So I think it's entirely up to you on what to implement. My suggestion would be of a configurable lightbox that can either target all images on a given page as a gallery, or only one at a time.

extras:
    lightbox:
         gallery: true

Though if you were only going to implement only one I'd go with the gallery. As one can always close the the gallery at a given stage if they want to only view one image. But doing the opposite i.e. viewing multiple images speedily when you have close one and scroll and click on the next is quite cumbersome.

---

And yes 2nd one looks really good to me as well, on both desktop and mobile devices. Could probably modify the CSS a bit to give it a tint of primary color or some accent.

@squidfunk

[facelessuser]

Automatically attach to all images in the content area?

I don't know if this would be practical in most settings. Maybe it is just me, but I wouldn't want to group all images in a page in a lightbox. I would prefer to manually put the images under some kind of lightbox div if I wanted them in a lightbox. Individual is fine, but I generally think groups would be better to be explicitly specified by surrounding in a div with a special class. This is obviously an opinionated preference. Others might disagree.

[squidfunk]

I think the best way is to leave it up to the user which lightbox integration to use. Integration is always done using JavaScript and stylesheets only, so it's as easy as including the desired lightbox implementation as extra_js and extra_css and initialize it in some custom application code.

However, we could add a page to the Material docs called Recipes or something similar were such things are explained. Feel free to write a guide for integrating a lightbox implementation (the one we decided would make the most sense) and submit a PR.

[squidfunk]

Closing this, as there will almost probably no out-of-the-box lightbox integration due to the reasons stated. However, feel free to PR a recipe on how to set one up.

[mementum]

I know the topic is closed, but it is possible to integrate a lightbox plugin with material.

There is a (broken today) markdown extension with instructions at: https://github.com/g-provost/lightgallery-markdown

The fix was trivial, but until the submitted pull-request is accepted (if ever) the following repository holds a working version of the extension (for markdown 3.1). Follow the instructions and enjoy

• https://github.com/mementum/lightgallery-markdown

[squidfunk]

Still no plans and/or time on my hands to do it. There are probably too many different use cases to pull off a reasonable single integration covering them all, so we‘ll better leave it up to the user. Integrating custom JS and CSS is easy enough.

[mementum]

The contribution to the topic was not meant as an integration request (I would have created a complete pull-request for it)

Google gave this as one of the potential answers to my query, but it took some extra searching to find (and fix) something.

Hopefully someone ending up here with a similar search query will be able to mix your superb Material theme and the lightgallery extension, which I have already done.

In any case, thanks for this superb theme.

[squidfunk]

Ah sorry, I misread your message. Thanks for the update. Always great to update issues when new information is available for all those Googlers.

[mementum]

Note.

I know the topic is closed, but it is possible to integrate a lightbox plugin with material.

There is a (broken today) markdown extension with instructions at: https://github.com/g-provost/lightgallery-markdown

The fix was trivial, but until the submitted pull-request is accepted (if ever) the following repository holds a working version of the extension (for markdown 3.1). Follow the instructions and enjoy

• https://github.com/mementum/lightgallery-markdown

The pull-request was added, so using the main repository should be the way to go now.