If you're going to use a flashy javascript popup mechanism to view image links, please make sure at the very least that people whose screens aren't as wide as the image can access the close button!
His link requires javascript and decrypts on device. Additionally, it overrides the browsers zoom behaviour and makes it impossible to view the image in a new tab seperately.
The link of the comment I replied to was just as bad as the sites that block right-clicking.
Very cool article, but the images are extremely low-resolution and blurry if one has JavaScript disabled. Folks, please don't do this: HTML has an image tag for a reason.
> except for adding just enough JS to do Medium-like lazy image loading to save bandwidth for visitors.
Please, please don't do that: it means that visitors without JavaScript enabled simply cannot view your page.
If a visitor wishes to configure his browser not to download images until he scrolls near them, that's certainly within his power. But if you break your page and only unbreak it for those with JavaScript, then your visitors have no choice.
Yep! I was wondering what was going on. Then I clicked on it and was immediately presented with a pop up modal over the image. It only took two page views to add that site to my Javascript blacklist.
There is also the problem when the image is squashed. It requires clicking on the image, which loads a new page with the image still squashed, and then clicking the image again to get it in a new tab.
The trend that annoys me most right now is that image thumbnails never just point to the large image: instead they pop up some JS-based overlay that obscures the whole page. There are several issues with this:
* Quite often, for whatever reason, the overlay takes seconds to load (much longer than just loading the image)
* If the image takes long time to load, I cannot just put it in a background tab and continue browsing the page with the thumbnail while I wait.
* I cannot open several images simultaneously
* To close the overlay, I have to hunt down an 'x' button (for example pressing Esc usually does not work). The 'x' is likely camouflage dark grey in order to look good against the dark grey background, and placed creatively to make it difficult to find. Sometimes, the 'x' loads two seconds later than the overlay itself, to make sure the browsing experience becomes as frustrating as possible.
* Not uncommonly, the JS is so poorly coded that the overlay half-loads in my browser and cannot be closed at all without reloading the page. With JS disabled, trying to open the image might not work at all.
* If I react instinctively to the overlay by pressing backspace, it doesn't close the overlay; I get sent back to page before the page I was on.
At least the web designers who do this overlay crap are increasingly using JS for it, which is an infinite improvement over Flash.
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.
> In the 90's, we had links for images where you'd have a thumbnail, and then links like [small][large][original], or similar. This still works perfectly today, and frankly makes for a better user experience.
Nowadays you can get an even better experience completely without JavaScript by using srcsets for images [1] to show images sized appropriate for the displaying device.
This solution works fine if JavaScript is disabled. It just loads the smallest image if "mobile" is in the user agent string and the largest image otherwise.
'Well, turn it on!' is certainly one solution, but of course enabling JavaScript doesn't just let me view images (something HTTP & HTML do just fine anyway), but also enables execution of potential malware, tracking & other nastiness.
Might be even a little easier for an end user if you wrote some javascript that just showed the appropriate message. If the pictures won't load, just have a big "You Are Safe." message. Making people look at the pictures isn't actually needed.
The only major drawback I see is that it pollutes the tab history so that if you view several images you have to click back several times to actually go back one page. This is no fault of the author as that is the expected behavior of the browser but it is something to keep in mind if one wishes to use this. Most people have been trained into thinking that a popup gallery of this sort doesn't affect the back button so it may come as a surprise to them to have to keep clicking back.
Otherwise, it's a clever use of :target and classes.
OT/Rant: In my browser, all pictures except the hero image are extremely blurred to the point that I can't even tell what's in the image. It could be because Privacy Badger is blocking some script or stuff like that but honestly I don't have the energy to find out why right now (it's 00:45 here in NSW), I believe users should be able to see a picture without going through executing some JS, accessibility is important. This is almost as annoying as those scripts that mess with your scrolling. It is also completely unnecessary since every modern mainstream browser since probably 5 years ago implements some form of lazy loading.
reply