Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JosimarNew

Como selecionar e deselecionar imagens

Recommended Posts

Boa noite gente.

 

É o seguinte, indo direto ao ponto, estou com uma galeria onde quero que ao clicar sobre uma imagem, a mesma seja destacada e sua id enviada a um input do tipo hidden, e ao clicar sobre a mesma, aconteça o efeito contrário, ou seja, a imgem seja deselecionada (não destacada) e o id seja removido do input hidden.

 

Quero basicamente fazer uma remoção multipla das imagens.

 

Obs.: Estou utilizando jQuery 1.11 para fazer isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<img src="" data-id="id da imagem" />
<script>
var imagens = {};
$('img').click(function() {
    var id = $(this).attr('data-id');
    if (id in imagens) {
        delete imagens[id];
        $(this).removeClass('classe que coloca o estilo de selecionado');
        removeId(id);
    } else {        imagens[id] = true;
        $(this).addClass('classe que coloca o estilo de selecionado');
        addId(id);
    }});
</script>

Como eu não sei como está seu input hidden não sei como remover ou adicionar

Compartilhar este post


Link para o post
Compartilhar em outros sites

Blz cara, isso ajuda bastante. Estou iniciando em jQuery, más é justamente isso mesmo que quero.

 

De resto me viro aqui. Quando concluir o script, postarei aqui para ajudar outros usuários. Valew.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa noite amigos. Como prometido, consegui desenvolver o script que faz a seleção das imagens e exclui as mesmas.

 

Segue abaixo o código. Não vou comentar pq estou com muito sono.

<!-- DEFINIÇÃO DO ESTILO PARA QUANDO A IMAGEM ESTIVER SELECIONADA -->
<style type="text/css">
.selecionada{ opacity:.3;}
</style>

<!-- IMAGENS QUE RECEBEM O ID QUE VAI SER DELETADO, DE PREFERÊNCIA DO BANCO DE DADOS -->
<img data-id="recebe id do banco" src="endereço da imagem">

<?php
//DELETA FOTOS SELECIONADAS
    if(isset($_POST['deletarFotos']) && !empty($_POST['idsDelete'])){
        $arrIds = array_filter(explode(',',$_POST['idsDelete']));
        foreach($arrIds as $idDel):
            $qr = "DELETE FROM galeria_fotos WHERE id = $idDel";
            $deleta = mysql_query($qr);
        endforeach;
}
?>

<!-- FORMULÁRIO QUE ENVIA O ID DAS IMAGENS QUE DESEJA DELETAR -->

<form method="post" id="deletar" name="frmDeleta">
    <span style="display:none;" class="ids"></span>
    <input class="ids-delete" type="hidden" name="idsDelete">
    <input type="hidden" name="deletarFotos">
</form>

        <!-- SELECIONAR IMAGENS PARA DELETAR -->
        <script>
		$('img').click(function() {
			var id = $(this).attr('data-id');
			$(this).toggleClass('selecionada');
			
			if($(this).hasClass('selecionada')){
				$(".ids").append(id+',');
			}else{
				var valor = $(".ids").html().replace(id+',', "");
				$(".ids").html(valor);
			}
			$(".ids-delete").val($(".ids").text());
		});
		</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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