How add custom wrapper div around image preview in Dropzone.js?
Question
I am using Dropzone.js for image uploads with drag & drop functionlity. Now my question is how to add custom Wrapper/Coantainer DIV around image upload images.
Just like this:
<html lang="en">
<head>
<body>
<div id="some-dropzone" class="dropzone dz-clickable dz-square dz-started">
<div class="dz-default dz-message" data-dz-message="">
<div id="my-custom-div"> <! -- My custom wrapper div around preview div -->
<div class="dz-preview dz-processing dz-image-preview dz-success">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
<div class="dz-preview dz-processing dz-success dz-image-preview">
</div>
</div>
</body>
</html>
I want display all image with scrollbar in single row. So do you have any idea how to do that in Dropzone.js or any other way.
Thanks.
2 answers
solution1
1 2014-11-20 05:56:14
Updated: http://jsfiddle.net/lotusgodkk/1cy803ar/4/
JS:
$('#some-dropzone').append("<div id='my-custom-div'></div>");
$('#some-dropzone #my-custom-div').append($('#some-dropzone .dz-preview'));
solution2
0 ACCPTED 2014-11-20 06:23:45
Try following solution with dropzone initialize code.
this.on("success", function(file, serverFileName) {
if (!$('#preview-wrapper').length){
$(".dz-preview").wrapAll("<div id='preview-wrapper'></div>");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Add ID to the preview div in Dropzone.js
Add preview image wrappers before upload in dropzone.js
How to redirect dropzone.js selected preview image to a new page?
Dropzone.js how to add hidden input with value to uploaded image
Dropzone.js: Can't click on custom preview
Dropzone.js How to use TR or TBODY as preview Template?
Dynamically add dropzone.js div element to the form
Replace an image with Dropzone.js
dropzone.js Is it possible to show filename in the preview?
dropzone.js - how can I post dynamic div id
Related Tags