Kombination von dropzone.js mit fancybox.js, um eine Vollbildansicht von hochgeladenen Fotos zu ermöglichen

Question

Ich versuche derzeit, eine Drag'n'Drop-Upload-Funktion in meine Website zu implementieren, indem ich die dropzone.js-Bibliothek verwende. Das hat bisher gut funktioniert, aber ich möchte dem Benutzer die Möglichkeit geben, seine hochgeladenen Bilder anzusehen, indem er nach dem Hochladen auf sie klickt.

Ich dachte über diesen Kauf einschließlich einer Bibliothek wie fancybox oder Leuchtkasten, aber ich bin mir nicht sicher, wie dies zu den hochgeladenen Dropzone-Elementen zu implementieren. Jede Hilfe/Tipps würde wirklich geschätzt werden, ich konnte nirgendwo auf der Website eine Antwort auf meine Frage finden.

Vielen Dank im Voraus :)

Answer 1

Es ist lange her, seit ich Dropzone verwendet haben, was bedeutet, dass ich mit einer älteren Version gearbeitet hatte, aber ich denke, dass ich Sie in die richtige Richtung zeigen kann.

Nachdem der Upload abgeschlossen ist, erhalten Sie eine Miniaturansicht Ihres hochgeladenen Fotos. Wenn Sie mit der Maus über diese Miniaturansicht fahren, können Sie wahrscheinlich Details wie Größe und Name der Datei sehen. Sie können eine Schaltfläche oder ein Anker-Tag mit dem Namen "View Larger Image" mit diesen Details hinzufügen.

Also, wenn Sie über die Miniaturansicht fahren, können Sie

(Größe)

(Name)

Größeres Bild Anker/Taste

Sie können sehen dies tun durch Bindung an die Dropzone-Erfolgsfunktion. Ich habe nie fancybox benutzt, also bin ich mir nicht sicher über den Code, der daran bindet. Von dem, was ich verstehen konnte, wird der Anker, der verwendet wird, um das größere Bild mit Fancybox zu öffnen, seinen href-Wert als Pfad zum Bild haben. Der Code ist wie folgt: -

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

});