Support enlarge Image in Modal when user Click

[PeterChen1997]

Summary

I think current image in markdown only show the image, but sometimes the image is too small. I want to click it to open the origin image in modal(like notion), but it isn't support.

Background & Motivation

It can be useful for user to deploy a blog.

Goals

A nice framework!

Example

[ElianCodes]

I don't think this is required behaviour by the Astro framework itself. Markdown is just compiled down to HTML structure, in that sense, this is normal behaviour.

It could be a solution to use MDX or a framework / component and hookup a plugin that takes care of this, or add an eventListener to achieve this.

[PeterChen1997]

Thanks for reply~ Is there a plugin that I can learn from it?

[codingmickey]

@PeterChen1997 did you find any? :D

[PeterChen1997]

nope I wrote one for myself
https://github.com/PeterChen1997/Astro-Home/blob/303d246474507eec71f44a5fc8e1984c5e769756/src/components/Content.astro#L65

[stereobooster]

related withastro/starlight#1220

[petrovicz]

You can use PhotoSwipe for that.
Take a look at my example repo or read my blog post about adding it to an existing project.

Generally, this is for a whole image gallery, but it has an option to just open for one single image at a time.
It's a well known library with many features.

You can use the built-in image optimization and it works with ViewTransitions as well.