Ir para conteúdo

POWERED BY:

joeythai

Listar array de imagens de um response

Por , em Javascript

Recommended Posts

joeythai    0

joeythai
Postado

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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="modal-body">
<div class="row">
 
<div class="col-1 align-middle text-center" style="margin-top: 15%;">
<a onclick="plusSlides(-1)"> <i class="fas fa-chevron-left fa-5x"></i></a>
</div>
 
<div class="slideBelongings"></div>
 
<div class="col-1 align-middle text-center" style="margin-top: 15%;">
<a onclick="plusSlides(1)"> <i class="fas fa-chevron-right fa-5x"></i></a>
</div>
 
<div class="col-10 text-center mySlides">
<div class="numbertext">1 / 4</div>
<img src="" class="img-fluid img-belongings" style="max-width: 400px;">
</div>
 
<div class="col-10 text-center mySlides">
<div class="numbertext">2 / 4</div>
<img src="" class="img-fluid img-belongings">
</div>
 
<div class="col-10 text-center mySlides">
<div class="numbertext">3 / 4</div>
<img src="" class="img-fluid img-belongings">
</div>
 
<div class="col-10 text-center mySlides">
<div class="numbertext">4 / 4</div>
<img src="" class="img-fluid img-belongings">
</div>
 
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="col-3">
<img src="https://dummyimage.com/600x400/ccc/000&text=foto" class="img-thumbnail">
</div>
<div class="col-3">
<img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail">
</div>
<div class="col-3">
<img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail">
</div>
<div class="col-3">
<img src="https://dummyimage.com/600x400/eee/000&text=foto" class="img-thumbnail">
</div>
</div>
 
</div>
</div>
<script>
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> 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Frank K Hosaka    0

Frank K Hosaka
Postado

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.

 

 

Screenshot_1.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto
      Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • violin101
      PHP+Codeigniter - Adicionar Registro Plano de Contas
      Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
    • violin101
      PHP - Consulta MySql para prazo de dias
      Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a orientação dos amigos.

      Preciso fazer um Relatório onde o usuário pode Gerar uma Lista com prazo para vencimento de: 15 / 20/ 30 dias da data atual.

      Tem como montar uma SQL para o sistema fazer uma busca no MySql por período ou dias próximo ao vencimento ?

      Tentei fazer assim, mas o SQL me traz tudo:
      $query = "SELECT faturamento.*, DATE_ADD(faturamento.dataVencimento, INTERVAL 30 DAY), fornecedor.* FROM faturamento INNER JOIN fornecedor ON fornecedor.idfornecedor = faturamento.id_fornecedor WHERE faturamento.statusFatur = 1 ORDER BY faturamento.idFaturamento $ordenar ";  
      Grato,
       
      Cesar
       
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito