Is it possible to make images expand on click?

[Andre601]

I would like to utilize the attribution list expansion to display images alongside text.

The issue I face is, that the images are often too large in one dimention (either width which makes them not next to the text or height which may change things like headers)
I could obviously adjust the size to make it fit, but this would give the disadvantage that the images would become quite small which makes reading text on them harder.

I was now wondering if I can use certain attributes to change the size of the image and to also make them expand into their full resolution (Show in a glowbox or what it is called) when you click on them.

[squidfunk]

There's currently no out-of-the-box lightbox gallery solution, but there are many issues where people shared their solutions. Attributes (like size) can be changed using the attribute list extension, which can also be used to align images. This extension can also be used to attach classnames to images to select them for displaying with a third party lightbox plugin.

[Andre601]

Do you have any solutions at hand?
I'm well aware about the attribution list extension and already explained my issue above about the alignment.

[squidfunk]

A quick search yields #1635. For more, I would also have to search the issue tracker, so no, I don't have a drop-in solution at-hand. Maybe somebody else can share his solution or you could search the issue tracker and share it, as I'm sure that in the past some were posted.

EDIT: I'm going to put an attribute-list based lightbox functionality on the roadmap for Insiders, as it was requested quite a few times.

[fveauvy]

I personally use lightgallery-markdown Markdown extension.

See for yourself :

Sans.titre.mov

[Andre601]

I assume this will go alongside the Material theme, or could there be complications?

[Andre601]

Also, to add to this am I not quite sure what name and/or version I should provide to get the extension itself, as the readme is incredibly vague about this particular part.

[fveauvy]

This extension works as intended with my use cases of the material theme.

I suggest you ask any questions regarding this extension to the dedicated repo.

[aparcar]

@squidfunk do you plan to integrate similar functionality directly to your mkdocs theme?

[squidfunk]

Currently no plans, but maybe some time in the future. The solution posted by @fveauvy already seems to work pretty well.

[aborruso]

@squidfunk in your site on click on the image, in example in this page, you have the image opened.

How to have this behaviour?

Thank you

[Andre601]

Did you actually check the response that is marked as an answer?

Also, consider checking g-provost/lightgallery-markdown#8

[squidfunk]

It's just an image, that is linked to itself, e.g.:

[![navigation.tabs enabled]][navigation.tabs enabled]

  [navigation.tabs enabled]: ../assets/screenshots/navigation-tabs.png

[aborruso]

thank you @squidfunk

[aborruso]

@Andre601 is it the solution that @squidfunk use in his site?

Thank you

[copdips]

It could be done by mkdocs-glightbox.

[keegoo]

already recommended by mkdocs-material itself in 2024.

https://squidfunk.github.io/mkdocs-material/reference/images/#lightbox