Image Lightbox for WriteFreely

WriteFreely is supposed to be lightweight and not cluttered with JavaScripts, but what do you think - shall we have image lightbox? It is very usable element that fits image size when in fullscreen and enables navigating through images found in post.

W3 provides quick tutorial about lightbox (very minimal scripting). Maybe something similar we could have added to WriteFreely? Perhaps not some full-blown-jQuery-enabled behemoth, but something lightweight and yet functional :nerd_face:

I tried implementing a Lightbox for images using the W3 tutorial on my Write.as blog and it didn’t work. The issue seems to be caused by the Write.as engine stripping off “onclick” events on posts. So even if my CSS and Javascript are all set, it never triggers the call to render the Lightbox. So, yeah, I too would be interested in a baked-in Lightbox feature.

@dino , could you take a screenshot of the console log when you tried to do that? Or at least copy & paste the error you get? I’d be curious to see what it is specifically (and maybe something @matt can speak more to).

If I remember correctly, I wasn’t getting any error. When I looked at the page source, the img elements that had onclick events on them simply did not have them. It was like it was getting cleaned up before the page is rendered. I’ll try it again over the weekend and will let you know if I see any errors.

2 Likes

Sorry didn’t get to try it again over the weekend as I’ve been busy. However I’ve thought of an alternate solution to it. You could wrap the img tags with an a tag and link to the image. This will allow a reader to click the photo and it will open in a new tab. Not exactly a lightbox, but the new tab will have a dark background and let you appreciate the bigger image.

No worries @dino! That’s a good idea too.

I just tried this on a test blog. Let me know if this is close to what you’re looking for as far as a lightbox goes: https://the-test-blog.writeas.com/sketch-nono-ma

All I did was copy the CSS & HTML from the Glitch project. No JavaScript needed!

2 Likes

That looks very promising. I’ll give it a try!