Fresco - A Beautiful Responsive Lightbox
frescojs.comThese things break the web by making it impossible for me to send a link pointing at the lightboxed content to a friend.
Also has broken usability: the next/prev arrows move underneath my cursor based on the size of the image.
So many lightboxes get this wrong. I don't get what's so hard. Keep the main UI in one place.
And there's no reason that this has to be the case either. The JavaScript history API could be used to push unique URLs into the address bar on each image view.
You can have a unique link for the lightbox simply by using a query string to automatically launch the lightbox.
I think he means we can't even Right click -> Copy Image URL, at least not in Chrome
So there's no way to access the raw image without searching in source code (unless I'm missing something).
In any case that's what I don't really like about it.
No arrow key support and er, why would I pay for a lightbox?
Edit: http://projects.nickstakenburg.com/tipped/ on other hand is something I will pay for - looks fantastic.
"Fresco is a beautiful responsive lightbox."
There's nothing beautiful about watermarks or wasting €49.
I bought http://projects.nickstakenburg.com/tipped/ from the same author. Well done and constantly updated, never regretted. Maybe just give it some time.
Slightly off topic - since I cancelled my PayPal account they've refused to process any credit card payments using the card that was linked to my PayPal account, which happens to be my only credit card. This means that I'm unable to purchase anything from anyone who uses PayPal as their sole payment option. A bit of hunting on the interwebs shows I'm not the only person this has happened to
Fancybox2 (http://fancyapps.com/fancybox/) is also responsive, though the site seems to be unresponsive (ha) at the moment.
Ironic that Fresco's actual page isn't responsive, I thought the overlay was adding huge scroll bars.
Fancybox is also free, does other media (video, etc) & can group content. It's pretty easy to theme if you are not scared of CSS.
I just checked your link... Fancybox isn't free for commercial websites.
Or you could download http://www.jacklmoore.com/colorbox and set the height and width to a percentage. That has always worked for me. You can choose to put pretty much anything in there, not to mention that it is licensed under the MIT License.
Still great work though, you got my vote, hope you sell a bunch of licenses!
I'm colorbox's author, and just wanted to say thanks for the recommendation.
I'm not against making money on the web, but seriously who would buy a lightbox in 2012?
It's good idea to take money for things that took a lot of effort and have high quality. But with all free open source possibilities in this area, I think you're right that it seems a little overambitious.
It's actually quite difficult to find a Lightbox that can be used in production and works across all devices and browsers, supporting more than just images. At least I haven't found one yet, so I will definitely check this out.
This script looks terrible on mobile browsers. 50 Euros for this?
Good: Escape key works to exit.
Missing: Doesn't respond to space / pgdown / left-right arrows.
Missing: Can't drag the image with mouse to flip to next image.
General page design issue: Page has style disabling outline on all anchors, making keyboard navigation (tab / shift tab) navigation downright impossible. Please make sure I can use tab / shift tab to browse the site.
General page design issue: Disabling the style rule 'outline-style:none' does make site usable with keyboard. But only somewhat, because you still can't tab onto the demonstrations.
It's beautiful, gorgeous, clean, and elegant. And the little subtle lightened inner outlines on all the images just make them pop out from the black background without being visually intrusive. Very nice. I'm dying to use it on a project.
?) Does it support ajax and iframes?
!) "the next/prev arrows move underneath my cursor based on the size of the image." - You can use the 3rd example on the top row and keep the next/prev arrows outside the image, thus solving the problem.
!) "No arrow key support and er, why would I pay for a lightbox?" - If the author doesn't add it you can use this: http://stackoverflow.com/questions/2259690/how-to-get-the-ar... It's really easy to implement. Also, you should pay because it's a beautiful and elegant solution. Men and Apple fans agree, beautiful things come at a high price, and people do pay it. The price is a tad bit too high though.
The images used in the demo are beautiful but... man, Instagram filters have really taken their toll on video and images. The problem with style is that it eventually gets old.
"In fact, Fresco in the first truly responsive lightbox.
Give the demonstrations a try to see what that means,
make sure to adjust your screen size (or rotate your
device)."
On my iphone, clicking an image opened as a tiny thumbnail at the top right and I couldn't navigate to the other images. A lightbox that worke on desktop and mobile smoothly would be great. But this doesn't see to be it. (and even better, as others note, handled links and herfs nicely.)
I don't understand why so few lightbox plugins (and sites with custom ones) do the actual image link properly.
The image should be a link either to a page for that specific image (facebook style) or just to the full sized image itself. That way if the person has js disabled, or middle clicks, or opens in new tab they'll still get the image, but you can intercept a normal click and show the pretty lightbox if they're browsing "normally".
It's not like it's super complex or anything, but everyone goes the "image is only useful for the lightbox" path.
When I read "fullscreen zoom" I thought it would maybe use fullscreen APIs... so far I haven't found that. Does anyone know a lightbox that does that well (like Facebook photos)?
I was very disappointed that it didn't even preload the images. Watching the spinner most of the time makes for a crappy UX.
So beautiful...
I like the "zoom" example - but it looks like there is more to the picture. Maybe you could include an indicator that shows when you have hit the edge of a page?
I looked at the source image and there wasn't any more to the image. Of course, the only reason I checked is because I had the same feeling, so I didn't like the panning. It didn't feel responsive, and I had to move the mouse all the way from the bottom to the top to pan the full image. If they tightened the panning and added a top indicator, it would be much better.
Why don't they do this open source and free. Isn't that something can be cloneable by a good JavaScript developer in a single day? I just don't get it.
An entire day of a good Javascript developers time is worth less than $75 to you?
Note that this is one-time fee and after that it will be open source. Selling it for 95€ (>170$) for each license is just a way of making too much money out of such an easy thing.
Fancybox and Fancybox 2 have mousewheel support for navigating backwards and forwards through a set of images which is just fantastic.
I've been looking for something to replace Fancybox for a while, so this looks like a nice option.
Too bad it does not work in Android Froyo's browser.
In Maxthon on Android 2 it worked quite well but I had to scroll up to the top of the page to find the overlay+image.
Anyone else still confused by the word "responsive"? I always expect something with a high degree of interaction, widgets etc., instead of just meaning "resizes how HTML should resize".
In the context of web design, responsive means that the webpage adjusts elegantly to different browser form factors and navigation capabilities. http://en.wikipedia.org/wiki/Responsive_Web_Design
I'm aware of that. But as I've said, that term still tends to confuse me at first, especially when it's not paired immediately with "web design" or "layout". It's a pretty common word, and this very specific meaning has been around for, what, two years?
I thought modal windows were a solved problem.
Might have stole my heart from Fancybox.
No keypress changes?
No keyboard support?
There is keyboard support:
http://www.frescojs.com/documentation/options#options_keyboa...
I turned my monitor upside-down and it didn't do anything- is it broken?