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

Question

我目前正在尝试使用 dropzone.js 库在我的网站中实现拖放上传功能。到目前为止，这工作得很好，但我想让用户能够在上传完成后通过单击它们来查看他们上传的图片。

我考虑过购买包括像 fancybox 或 lightbox 这样的库，但我不确定如何对上传的 dropzone-elements 实施此操作。任何帮助/提示将不胜感激，我在网站上的任何地方都找不到我的问题的答案。

提前致谢:)

Answer 1

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

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

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

（大小）

（姓名）

查看大图锚点/按钮

您可以通过绑定到 Dropzone 的成功函数来做到这一点。我从未使用过 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();

});