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

i trying implement drag'n'drop upload feature website using dropzone.js library. has worked fine far, want give user ability of viewing uploaded pictures clicking on them after upload done.

i thought doing buy including library fancybox or lightbox, not sure how implement uploaded dropzone-elements. / tipps appreciated, not find answer question anywhere on site.

thanks in advance :)

it has been long time since have used dropzone means had worked older version think can point in right direction.

after upload done, thumbnail view of uploaded photo , when hover on photo thumbnail, able see details size , name of file. can include button or anchor tag named "view larger image" along these details.

so when hover on thumbnail, able see

(size)

(name)

view larger image anchor/button

you can binding dropzone's success function. have never used fancybox not sure code binds it. understand, anchor going used open larger image using fancybox have href value path image. code follows:-

var mydropzone = new dropzone("#my-dropzone"); //success function called when image uploaded. mydropzone.on("success", function(file, responsetext, e) {    //previewelement contains html needed display thumbnail    var preview_element = file.previewelement;     var image_name = file.name;     //create anchor tag , specify href image name or path    var anchor_to_fancybox = document.createelement("a");    $(anchor_to_fancybox).attr('href', image_name);     //when hover on thumbnail, div called dz-details shown.    //this div contained within previewelement , contains size , name.     //append our anchor in html.    $(preview_element).find('.dz-details').append(anchor_to_fancybox);     //bind anchor fancybox. $(anchor_to_fancybox).fancybox();  });