Have anyone tried implementing CSS only lightbox to Dynalist

Image viewing experience inside Dynalist has always been sub-par for me comparing to other markdown enabled notebooks, so I’ve been trying to work out some improvement at least for myself in the custom CSS. Given the outline nature of Dynalist there is usually very small space for a image to really shine inside Dynalist among all other very tight, text information, and opening a new browser tab when you click on the image is really annoying, so I wonder if someone has already taken a stab at creating lightbox inside custom CSS?

This example below is really nice but I’m not sure if you can implement it inside Dynalist, I mean how to actually hack and give two images different class?

Let me know what you think, thank you!

1 Like

You can find various image CSS here https://www.google.com/search?q=dynalist+node-displayed-image

This is the one I use:

/* shrink images to 50 pixels */

.node-displayed-image {
    max-width: 50px;
    max-height: 50px;
}

/* hover mouse on image to enlarge it */

.node-displayed-image:hover { 
    max-width: 100%;
    max-height: 100%;  }

edit: oh haha didnt mean to reply to an old thread. Suggested Topics had it at the top!