Currently, I have implemented a jQuery script that allows me to preview multiple images before uploading them. Although the functionality works well, I am facing difficulties customizing it to meet my specific requirements.
<script>
$(document).ready(function(){
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#product_sub_images').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
});
</script>
In order to customize the image preview, I would like to:
- Set a fixed width and height for images, such as 200px or display them as thumbnails using Bootstrap 4
- Arrange the images in a single row with 10px padding on the left and right sides. If there isn't enough space, let the images wrap to the next row
Please note that I am implementing Bootstrap 4 in my code.