yellowled Posted August 30, 2012 Share Posted August 30, 2012 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 More sharing options...
Pete Posted August 30, 2012 Share Posted August 30, 2012 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 More sharing options...
yellowled Posted August 30, 2012 Author Share Posted August 30, 2012 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 More sharing options...
Nicolas Posted August 30, 2012 Share Posted August 30, 2012 Hi Yellowled, one of my favorite is Colorbox. I find it quite handy and highly customizable. 1 Link to comment Share on other sites More sharing options...
yellowled Posted August 30, 2012 Author Share Posted August 30, 2012 Yeah, that's the one I'm using mostly now. For the same reasons, in fact. I never use the "colorsets" it comes with, but it's pretty easy to build your own. Link to comment Share on other sites More sharing options...
arjen Posted August 31, 2012 Share Posted August 31, 2012 I would say 69€/89$ is a bargain for the best lightbox available and for time sake I paid it by myself Link to comment Share on other sites More sharing options...
Adam Kiss Posted September 3, 2012 Share Posted September 3, 2012 I use prettyPhoto. It is reasonably fast, has autosize, has auto-hashbang, has reasonable themes (I pretty much keep them vanilla, there isn't much to 'style' anyway, once you have the photo opened). 2 Link to comment Share on other sites More sharing options...
arjen Posted September 14, 2012 Share Posted September 14, 2012 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. 3 Link to comment Share on other sites More sharing options...
yellowled Posted September 15, 2012 Author Share Posted September 15, 2012 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 More sharing options...
diogo Posted September 15, 2012 Share Posted September 15, 2012 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 More sharing options...
Soma Posted September 15, 2012 Share Posted September 15, 2012 This I like more: http://www.photoswipe.com/ Ok not really lightbox, but nice gallery for different devices. 2 Link to comment Share on other sites More sharing options...
Pete Posted September 15, 2012 Share Posted September 15, 2012 I've used Photoswipe before - it was pretty good Link to comment Share on other sites More sharing options...
yellowled Posted September 16, 2012 Author Share Posted September 16, 2012 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 More sharing options...
arjen Posted May 3, 2013 Share Posted May 3, 2013 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). 8 Link to comment Share on other sites More sharing options...
apeisa Posted May 3, 2013 Share Posted May 3, 2013 Works nicely on android. Thanks for sharing arjen. Link to comment Share on other sites More sharing options...
yellowled Posted May 3, 2013 Author Share Posted May 3, 2013 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 More sharing options...
arjen Posted May 3, 2013 Share Posted May 3, 2013 @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 More sharing options...
yellowled Posted May 4, 2013 Author Share Posted May 4, 2013 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. 2 Link to comment Share on other sites More sharing options...
NoDice Posted September 12, 2013 Share Posted September 12, 2013 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. 1 Link to comment Share on other sites More sharing options...
Martijn Geerts Posted September 12, 2013 Share Posted September 12, 2013 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts