Listar array de imagens de um response

joeythai · Janeiro 31, 2023

Boa tarde pessoal,

eu tenho um ajax em que mando buscar as imagens de um determinado item, pois bem, eu recebo essas imagens, são 3 neste caso, porém quando eu exibo essas imagens no meu slide, somente uma delas é exibida, as outras não, é um slide em que eu preencho com javascript, faço o foeach e no foreach eu aplico um console.log(imagens) ele exibe as 3 certinha, somente no slide que so aparece a primeira, alguém já criou um slide de forma dinamica no estilo que estou fazendo possa me auxiliar ? O codigo é o seguinte:

<code>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

let getImages = $('#get-images');

$(getImages).click(function() {

let lot = $(this).data('lot');

$.ajax({

url: "{{ route('logistic.belongings.get-images') }}",

method: 'get',

data: {

lot: lot

},

success: function(response) {

images = response.contents;

console.log(images)

let imgBelongings = document.querySelector('.img-belongings');

let imgThumbnails = document.querySelector('.img-thumbnail');

let $slideBelongings = $('.slideBelongings');

var html = '';

images.forEach(function(image) {

imgBelongings.setAttribute('src', image);

imgThumbnails.setAttribute('src', image);

});

//showSlides(1);

// for (i = 0; i < images.length; i++) {

// imgBelongings.setAttribute('src', images);

// imgThumbnails.setAttribute('src', images);

// }

}

});

//Slides

let slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

}

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

// setTimeout(() => {

// console.log('showSlides');

let i;

let slides = document.getElementsByClassName("mySlides");

let imgThumbnail = document.getElementsByClassName("img-thumbnail");

let captionText = document.getElementById("caption");

if (n > slides.length) {

slideIndex = 1

}

if (n < 1) {

slideIndex = slides.length

}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < imgThumbnail.length; i++) {

imgThumbnail[i].className = imgThumbnail[i].className.replace(" active", "");

}

slides[slideIndex - 1].style.display = "block";

imgThumbnail[slideIndex - 1].className += " active";

captionText.innerHTML = imgThumbnail[slideIndex - 1].alt;

//}, 2000);

}

</script>

</body>

</html>

</code>

tetsuo · Janeiro 31, 2023

Troque os textos das fotos pra ver.
foto 01
foto 02
foto 03
...

Frank K Hosaka · Fevereiro 14, 2023

A primeira linha do script está assim

let getImages = $('#get-images'), só que eu não achei esse elemento dentro do código HTML.

Assim eu inventei um elemento assim

<div id=get-images>teste</div>

Na hora de dar um clique na palavra teste, aí apareceu mais mensagem de erro no painel de inspeção do navegador conforme a imagem que mando anexo.

Lamento em não poder ajudar muito, JavaScript eu domino muito pouco.

Entrar

Listar array de imagens de um response

Recommended Posts

joeythai 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tetsuo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Frank K Hosaka 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Beautiful Womans in your town for night - Authentic Maidens

PHP - Tecla de Atalhos para salvar

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante