Jump to content

Favorite lightbox?


yellowled
 Share

Recommended Posts

I will spend my afternoon building a gallery including lightbox support. Pretty boring stuff, actually.

So to accompany this with a Pub thread: what's everyone's favorite lightbox script and why? I used to go with Fancybox for pretty much everything for a long time, but since they switched the license for fancybox2, I have been using Colorbox a lot.

Link to comment
Share on other sites

What's wrong with the Fancybox 2 license? I've not been paying any attention to licenses again and using it for everything :(

Edit: just saw the fact that it requires payment for commercial work (I've only got it on personal projects or unlaunched projects at present).

Not a bad price though, but I can understand searching for a free alternative since there are hundreds out there.

Link to comment
Share on other sites

First of all: Fancybox 2 is a rewrite, Fancybox 1 is still around (but unmaintained, apparently). Fancybox 2 is free for personal or non-profit use. It now has a commercial license of 15€/19$ for a single domain, 69€/89$ for multiple domains.

It's not that I wouldn't pay for a good lightbox script, but some of my clients won't, so I needed a "free as in free beer" alternative anyway.

Link to comment
Share on other sites

  • 2 weeks later...

Just stumbled upon Fresco. It features a responsive (even my mother is responsive these days) lightbox, fullscreen zoom, retina-ready skins (sweet), Youtube and Vimeo integration for HTML5 video and a powerful Javascript API (seems cool). Haven't used it, but looks really nice.

  • Like 3
Link to comment
Share on other sites

Yay, a responsive lightbox, but the demo site for it is not responsive. That makes a lot of sense. ;)

I've always wondered why one would need a “responsive lightbox”. Might be related to the fact that I haven't used anything but Colorbox in a while, but most lightbox scripts allow you to set the width and height of the lightbox to a precentage of the screen, which usually does the trick for responsive layouts. If the lightbox script doesn't use images for it's design (which would be a no-go for me these days anyway) but is CSS-only, this should suffice. The only limit should be the physical dimensions of the image in the lightbox.

Then there's smaller screens. What's the point of even having a lightbox on mobile device where the lightbox image likely isn't much larger than the thumbnail because of screen real estate? And even if so, does the lightbox cater to the smaller screen by displaying the controls etc. differently? (Fresco actually does work pretty well on small screens.)

Maybe I'm missing the point here, but “responsive lightbox” sounds a lot like buzzword bingo to me … especially since it offers a paid “pro” version.

Link to comment
Share on other sites

I've always wondered why one would need a “responsive lightbox”

I don't see why not... if your site is responsive, why not having everything responsive? I just think they didn't go far enough with it. If you see the second example, at some point the arrows are bigger than the picture. To make it truly responsive, the arrows should change place to accommodate to the picture.

What's the point of even having a lightbox on mobile device where the lightbox image likely isn't much larger than the thumbnail because of screen real estate?

You don't have to use lightbox only with thumbnails. Again, if it's well done, it can save you some headaches when designing for mobile.

I think we are falling on a "oh no, now everything is responsive!" hole here. Responsive is a good solution where applicable, so why not use it? I just don't think it's something to brag about anymore. And that's a good thing!

Link to comment
Share on other sites

I think we are falling on a "oh no, now everything is responsive!" hole here. Responsive is a good solution where applicable, so why not use it? I just don't think it's something to brag about anymore. And that's a good thing!

That's the point I totally agree with. Andy Clarke tweeted - quite some time ago - “From now on, if it's not responsive, it's not web design.”

That's just it. It shouldn't be special to build a responsive site, it should be the default. Responsive design can be so much more than just optimizing site for smartphones and tablets. Likewise, “responsive” should not be a feature worth mentioning for a piece of software like a lightbox. It should be the default (which it is for some lightbox scripts).

Link to comment
Share on other sites

  • 7 months later...

Just found another really interesting lightbox. Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. It's build for speed and seems highly customizable through css (and not javascript like most).

  • Like 8
Link to comment
Share on other sites

The Magnific Popup caught my eyes as well (haven't had a chance to test it yet, but definitely will). It is done incredibly well, very flexible and customizable and also implemented with an eye for the little things. Definitely a plugin to watch.

Link to comment
Share on other sites

@apeisa, you're welcome.

@yellowled I've been experimenting this for a client (some default lightboxing and ajax forms) and I really like the css customization and the fast load. Most lightboxes seem sluggish after using this.

Link to comment
Share on other sites

It does even offer an SCSS file and a Grunt build script. In my book, that's pretty much perfect.  :) It is also very accessible (e.g. using button for elements which actually are buttons), it seems to offer a fallback to display the content differently on very small screens (where a lightbox really doesn't make any sense) … boy, I wish more jQuery plugins other would be thought-thru that well.

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Just found another really interesting lightbox. Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. It's build for speed and seems highly customizable through css (and not javascript like most).

Thanks for this tip! Used it on my first site (also put it in the Showcase section of the forum) and I love the responsive clean out-of-the-box design and zoom functionality. Only use it for news item pictures so far, but will find more use for it for sure.  

  • Like 1
Link to comment
Share on other sites

Used the magnific popup to.

	if($("a>img").length) {
		Modernizr.load([{
		    load: ['/site/templates/js/jquery.magnific-popup.min.js', '/site/templates/css/magnific-popup.css'],
		    complete: function () {
				$("a>img").parent().append("<div class='pop-up'><i class='icon-popup'></i></div>").addClass("magnific");
				$(".magnific").magnificPopup({
			   		type: 'image', 
			   		gallery: { enabled: true },
			   		removalDelay: 300,
					mainClass: 'popup-slide'
			   	});
		    }
		 }]);
	}

It's a nice lookin lightbox....

TNX arjen

  • Like 2
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...