Alignment of images with inputs

Asked

Viewed 180 times

1

I am trying to align the input below each image after uploading using file Reader. Follow screen print and codes: inserir a descrição da imagem aqui

JS:

$(function() {
    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 class="img-galeria  img-thumbnail img-galeria" >')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    $($.parseHTML('<input class="form-control painel-input-galeria" type="text" name="titulo-img" placeholder="título da imagem">')).appendTo(placeToInsertImagePreview);

                },
                reader.readAsDataURL(input.files[i]);
            }
        }
    };
    $('#imagem').on('change', function() {
        imagesPreview(this, 'div.galeria');
    });

});

HTML

CSS already tried several alternatives and could not.

javascript css

  • HMTL <div class="gallery"></div> </div> <hr> <input id="image" type="file" Multiple />

1 answer

0

Creates an element around these two and then inside that element uses display: block; or width: 100%; in the input and img.

var imagens = [
  'https://madeby.google.com/static/images/google_g_logo.svg',
  'https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Yahoo_Y.svg/300px-Yahoo_Y.svg.png'
];

var placeToInsertImagePreview = $('.galeria');

imagens.forEach(function(img) {
  var contentor = $('<div class="contentor"/>').appendTo(placeToInsertImagePreview);
  contentor.html('<img class="img-galeria  img-thumbnail img-galeria" src="' + img + '">');
  contentor.append('<input class="form-control painel-input-galeria" type="text" name="titulo-img" placeholder="título da imagem">');
});
.contentor {
  width: 25%;
  display: inline-block;
  margin: 10px;
}

.contentor>* {
  width: 100%;
  display: block;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="galeria"></div>

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.