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

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

本文关键字：js 照片 视图 dropzone fancybox 结合 在一起      更新时间：2023-09-26

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

我想这样做，包括一个库，如fanybox或lightbox，但我不知道如何实现这到上传的dropzone-elements。任何帮助/提示都将非常感激，我在网站上找不到我的问题的答案。

提前感谢:)

我已经很长时间没有使用dropzone了，这意味着我使用的是一个较旧的版本，但我想我可以为你指出正确的方向。

上传完成后，您将获得上传照片的缩略图视图，当您将鼠标悬停在该照片缩略图上时，您可能能够看到文件大小和名称等详细信息。您可以包括一个按钮或一个锚标记命名为"查看大图"随着这些细节。

所以当你将鼠标悬停在缩略图上时，你将能够看到

(大小)

(名称)

查看大图锚/按钮

可以通过绑定Dropzone的成功函数来实现。我从来没有使用过fanybox，所以我不确定绑定到它的代码。据我所知，锚将被用来打开更大的图像使用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();
});
相关文章：