Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Selecionar e listar fotos marcadas ou escolhidas pelo usuário jQuery

17-09-2016 18:16

Nesse post vou deixar um script em jQuery onde cada foto pode ser checada, ou seja, o usuário pode ir marcando as fotos que deseja, e elas vão ficando selecionadas, formando uma lista com todas as fotos escolhidas pelo usuário.

Esse arquivo é bem útil caso queira fazer uma lista de fotos selecionadas para download. Bastando apenas adaptar o script para o que deseja.

<script src="jquery.js"></script> <script> jQuery(document).ready(function(){ // ao clicar na div $('.foto').click(function() { // adicionando e removendo a borda da foto ao clicar sobre a mesma if( $(this).is(".nao_selecionada") ) { $(this).removeClass("nao_selecionada"); $(this).addClass("selecionada"); } else { $(this).removeClass("selecionada"); $(this).addClass("nao_selecionada"); } // criando o array das fotos selecionadas var selecionados = []; // número do incremente do array var n = 0; // listando todas as fotos com a classe de selecionada $('.selecionada').each(function() { selecionados[n] = $(this).find('img').attr('src'); n++; }); // colocando as fotos selecionadas em uma lista na div $('#fotos').html(selecionados.join()); }); }); </script> <style> .foto{ width:200px; height:200px; display:inline-block } .foto img{ width:200px; height:200px; border:0 } .selecionada{ border:2px solid black } .nao_selecionada{ border:0 } </style> <div class="foto nao_selecionada"><img src="foto1.jpg" /></div> <div class="foto nao_selecionada"><img src="foto2.jpg" /></div> <div id="fotos"></div>

2
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado