Image Lightbox

(function() {
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 accept: 'image/*',
 showThumbnails: true,
 autoUpload: false,
 onPreviewClick: function(task) {
 if (task.thumbnailUrl) MultipleUpload.showLightbox(task.thumbnailUrl, task.fileName);
 }
 });
})();

Tip: Click any image thumbnail to open the lightbox.

Clicking through to a larger view

onPreviewClick hands you the task when a thumbnail is clicked, and what opens is entirely yours — this demo opens a lightbox, but a crop editor or a metadata panel is the same hook. The thumbnails are small enough that a way to see the image properly is usually wanted.

Make the affordance visible

A thumbnail that is clickable should look clickable: a cursor change and a hover state are the minimum. And whatever opens needs a keyboard route out — Escape to close, focus returned to the thumbnail — or the lightbox becomes a trap for anyone not using a mouse.