Show HN: Let your website visitors view images in fullscreen/lightbox | Hacker News Reader

Show HN: Let your website visitors view images in fullscreen/lightbox

codelearn-org.github.io

26 pointspocha12 comments

A while ago there was actually better lightbox / pop-up solution presented on HN, called magnific popup: http://dimsemenov.com/plugins/magnific-popup/

See the thread: https://news.ycombinator.com/item?id=5643801

Isn't this how all lightboxes work? Isn't this extremely common?

To be fair it's one of the better ones. But yes, I have no idea how this reached the front page. This is like every other lightbox I've seen.

I am not sure about the other plugins, but this is how it is different from the parent plugin (ref - https://github.com/jbutz/bootstrap-lightbox)

1. The parent plugin could attach to one element through the HTML changes. The JS change - you need to explicitly bind the lightbox to click event. In the current plugin - you do not need to edit any of the existing HTML. Just add one line of JS to view all the images (or probably a select few) in Lightbox on the page.

2. While providing this feature, it might not be evident to the user that clicking on the image shows it inside Lightbox. Hence the tooltip.

Yes, that was actually unfair of me to say that it's almost like every other lightbox. At the time I was thinking about something like this http://leandrovieira.com/projects/jquery/lightbox/, which I've used before. It too doesn't require you to do some major HTML surgery.

After re-reading the OP it seems like I should try it out next time I need to use a lightbox, though.

Probably I was too quick to create the plugin :). The link you mentioned is pretty much doing what I am doing except for the tooltip part.

I think I just took the parent plugin handicap & fixed it. But guess Jquery plugin is already doing it the way I am doing it.

Thanks for pointing.

I don't get this - where is the fullscreen mode? To me it's displaying just like any other lightbox.

On the subject of lightboxes, anyone seen a good alternative for use on mobile devices? Responsive designs need something so that on a phone they still aren't using the good 'ol lightbox script that works well on desktop...

Full-screen could actually be mis-leading. I meant Lightbox only. The original Lightbox plugin does resize the image to fit the screen, but probably all Lightboxes work like that.

> For a long time we kept on searching for 'Jquery plugin to view images full screen'. There were no good matches.

Like they had the time to examine 52412 lightbox plugins and decide there were no matches...

Unheap has a good selection: http://www.unheap.com/section/media/dialogs-lightboxes/

Was looking for something just like this. Very cool, Thanks for sharing!

Thanks. Just be careful of the hacks & see they dont break anything existing on your website.

If you are using Bootstrap Lightbox separately - make sure the other lightbox div id dont conflict with 'demoLightbox'

maybe it's just me but there seems to be a bug when viewing this on the ipad. I clicked on an image and could not figure out how to close the full screen preview. Just something you should look into.

Reply on news.ycombinator.com