Combining dropzone.js with fancybox.js to give a fullscreen view of uploaded photos

Question

I am currently trying to implement a drag'n'drop upload feature into my website using the dropzone.js library. This has worked fine so far, but I want to give the user the ability of viewing their uploaded pictures by clicking on them after the upload is done.

I thought about doing this buy including a library like fancybox or lightbox, but I am not sure how to implement this to the uploaded dropzone-elements. Any help / tipps would be really appreciated, I could not find an answer to my question anywhere on the site.

Thanks in advance :)

Answer 1

It has been a long time since I have used dropzone which means I had worked with an older version but I think I can point you in the right direction.

After your upload is done, you get a thumbnail view of your uploaded photo and when you hover over this photo thumbnail, you are probably able to see the details like the size and the name of the file. You can include a button or an anchor tag named "View Larger Image" along with these details.

So when you hover over the thumbnail, you will be able to see

(Size)

(Name)

View Larger Image anchor/button

You can do this by binding to your Dropzone's success function. I have never used fancybox so I am not sure about the code that binds to it. From what I could understand, the anchor that is going to be used to open the larger image using Fancybox will have its href value as the path to the image. The code is as follows:-

var myDropzone = new Dropzone("#my-dropzone");
//Success function is called when image is successfully uploaded.
myDropzone.on("success", function(file, responseText, e) {
   //previewElement contains HTML that is needed to display thumbnail
   var preview_element = file.previewElement;

   var image_name = file.name;

   //create the anchor tag and specify HREF as image name or path
   var anchor_to_fancybox = document.createElement("a");
   $(anchor_to_fancybox).attr('href', image_name);

   //When you hover over the thumbnail, a div called dz-details is shown.
   //This div is contained within previewElement and contains size and name. 
   //Append our anchor in its HTML.
   $(preview_element).find('.dz-details').append(anchor_to_fancybox);

   //bind anchor to fancybox. Probably as $(anchor_to_fancybox).fancybox();

});