Javascript 将dropzone.js与fancybox.js相结合，提供上传照片的全屏视图

我目前正在尝试使用dropzone.js库实现一个拖放上传功能。到目前为止，这一切都很好，但我想让用户能够在上传完成后通过点击查看上传的图片

我想买一个像fancybox或lightbox这样的库，但我不知道如何在上传的dropzone元素中实现这一点。如果您能提供任何帮助/提示，我将不胜感激，因为我在网站的任何地方都找不到我的问题的答案

---

提前感谢：）

我已经很久没有使用dropzone了，这意味着我使用的是旧版本，但我想我可以为您指出正确的方向

上传完成后，您会看到上传照片的缩略图，当您将鼠标悬停在该照片缩略图上时，您可能会看到文件大小和名称等详细信息。您可以包括一个名为“查看较大图像”的按钮或锚定标记以及这些详细信息

因此，当您将鼠标悬停在缩略图上时，您将能够看到

（尺寸）

（姓名）

查看较大的图像定位/按钮

您可以通过绑定到Dropzone的success函数来实现这一点。我从未使用过fancybox，所以我不确定绑定到它的代码。据我所知，将使用Fancybox打开较大图像的锚点将其href值作为图像的路径。 代码如下：-

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();

});

分享你的代码并阅读。