Support for Image Lightboxes

[martnst]

Hi there,
we are currently using MDwiki which looks very very similar to MKDocs, but would like to change to MKDocs as it seems to be a more active project and seems to have more features.

Unfortunately it seems that MKDocs does not have a lightboxes built in as MDwiki does, see here. As we have screenshots in our docs it is crucial to us that the reader can bringt them fullscreen to see all details while still having the images aligned nicely in the text per default.

Is there any theme that supports lightboxes or plan to include it in a future version?

[waylan]

I haven't checked, but perhaps a third party theme offers such support. Check the wiki for a list.

I see no reason why we would include that specifically in the default theme. However, themes can certainly be modified. In fact, in the next release (0.16) there will be much more support for theme customization (see a preview). Until then, there is always the exta_css and extra_javascript config settings for you to provide your own styling and JavaScript for your lightboxes. You just need to write your HTML then. Of course, Markdown accepts and passes through raw HTML, or you could create (or find an existing) Markdown Extension to generate the HTML from some simple Markdown markup. And later, when the Plugin API becomes available (see #206), then this could possibly be all wrapped up in a plugin.

[waylan]

I just occurred to me that there are a collection of bootstrap themes in mkdocs/mkdocs-bootstrap. And with a quick search, a Bootsrap Lightbox plugin exists. You might be able to get that working with less effort.

[waylan]

Also, the default theme (mkdocs) and all the themes in mkdocs/mkdocs-bootswatch are built with bootswatch, which is a bootstrap wrapper.

[waylan]

@martnst I thought that adding a lightbox would make for an excellent simple example of how to use the new theme_dir features in the upcoming version 0.16 of MkDocs. I just threw together a simple project which implements a lightbox at waylan/mkdocs-theme_dir-example.

@d0ugal if you are interested, we can move that example repo to the mkdocs organization if you want. I just don't have the permissions to create repos (which is fine, just pointing out that you will need to do it). Not sure if we want to wait for 0.16 to be released first though. When it is, we can add links in the README to the updated docs.

[waylan]

And if that repo gets moved to the mkdocs account, we can add a link to it from the docs. I think it really helps complete the theme customization docs.

[marcelstoer]

I just threw together a simple project which implements a lightbox at waylan/mkdocs-theme_dir-example.

What a fantastic tutorial, thanks!

[m-kuhn]

For those without a compatible theme, I just published a fancybox based extension https://github.com/opengisch/fancyboxmd

[nook24]

I created a lightbox plugin which can be used with all themes https://github.com/it-novum/mkdocs-featherlight

[pawamoy]

Nice! I spent several hours trying to do this (or a similar zoom feature) with pure javascript/css a few months ago, and eventually dropped it. It was hard to make it work for images within tabs, which seem to be positioned at 0,0 (absolute) for some reason. I'll give a try to your plugin 🙂