dropzone.js와 fancybox.js를 결합하여 업로드 된 사진의 전체 화면보기 제공

Question

현재 dropzone.js 라이브러리를 사용하여 내 웹 사이트에 drag'n'drop 업로드 기능을 구현하려고합니다. 지금까지 문제가 없었지만 업로드가 끝난 후 업로드 된 사진을 클릭하여 볼 수있는 기능을 사용자에게 제공하려고합니다.

나는 fancybox 나 라이트 박스 같은 라이브러리를 포함하여이 구매에 대해 생각했지만 업로드 된 dropzone-elements에 이것을 어떻게 구현해야할지 모르겠습니다. 모든 도움/tipps 정말 감사하겠습니다, 내 질문에 대한 답변을 사이트의 아무 곳이나 찾을 수 없습니다.

미리 감사합니다 :)

Answer 1

에 내가 이전 버전과 함께 일했던 의미 내가 DROPZONE을 사용했기 때문에 시간이 오래되었습니다하지만 난 내가 올바른 방향을 알려줄 수 있다고 생각합니다.

업로드가 완료되면 업로드 한 사진의 미리보기가 표시되며이 사진 미리보기 이미지 위에 마우스를 올리면 파일의 크기 및 이름과 같은 세부 정보를 볼 수 있습니다. 이러한 세부 사항과 함께 "View Larger Image"라는 버튼이나 앵커 태그를 포함 할 수 있습니다. 당신은 미리보기 이미지 위에 마우스를 가져 가면

그래서, 당신은

(크기)

(이름)

크게보기를 볼 수 있습니다 이미지 앵커/버튼

이 작업을 수행 할 수 있습니다 Dropzone의 성공 기능에 바인딩함으로써. 나는 fancybox를 사용한 적이 없으므로 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(); 

});