4 ms·

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

26 points by pocha 13y ago

BaconJuice 13y ago
Was looking for something just like this. Very cool, Thanks for sharing!
- pocha 13y ago
  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'
daman3456 13y ago
Isn't this how all lightboxes work? Isn't this extremely common?
- jckt 13y ago
  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.
  - pocha 13y ago
    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 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.
    - jckt 13y ago
      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/ 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.
      - pocha 13y ago
        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.
porker 13y ago
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...
- pocha 13y ago
  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.
beforebeta 13y ago
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.
Geee 13y ago
A while ago there was actually better lightbox / pop-up solution presented on HN, called magnific popup: http://dimsemenov.com/plugins/magnific-popup/ http://dimsemenov.com/plugins/magnific-popup/ See the thread: https://news.ycombinator.com/item?id=5643801 https://news.ycombinator.com/item?id=5643801
ricardobeat 13y ago
> 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/ http://www.unheap.com/section/media/dialogs-lightboxes/

26 points by pocha 13y ago

BaconJuice 13y ago

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

pocha 13y ago
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'

daman3456 13y ago

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

jckt 13y ago
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.
- pocha 13y ago
  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 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.
  - jckt 13y ago
    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/ 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.
    - pocha 13y ago
      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.

porker 13y ago

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...

pocha 13y ago
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.

beforebeta 13y ago

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.

Geee 13y ago

A while ago there was actually better lightbox / pop-up solution presented on HN, called magnific popup: http://dimsemenov.com/plugins/magnific-popup/ http://dimsemenov.com/plugins/magnific-popup/ See the thread: https://news.ycombinator.com/item?id=5643801 https://news.ycombinator.com/item?id=5643801

ricardobeat 13y ago

> 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/ http://www.unheap.com/section/media/dialogs-lightboxes/