1

Colegas.

Tenho uma relação de imagens que estou trazendo dessa forma:

<?php for($img = 1; $img <= 29; $img++){ ?>
        <a class="image-popup-fit-width img-thumbnail" href="images/exclusivos/<?php echo $img; ?>g.jpg" title="Boneca Salto 5cmm.">
            <img src="images/exclusivos/<?php echo $img; ?>p.jpg">
       </a>
<?php } ?>

E estou usando o plugin magnific popup para ampliar as fotos, porém gostaria de que o usuário ao clicar em cima de uma das imagens, aparecer um checked para que eu possa enviar para a tabela de pedidos. Dessa forma:

inserir a descrição da imagem aqui

Existe algum plugin ou meio de fazer isso em Jquery?

1 Resposta 1

2

Podes fazer isso adicionando uma nova class ativo cada vez que uma imagem é clicada:

$(function() {
    $('.img-thumbnail').on('click', function() {
        var $imgSelected = $(this).attr("data-selected")
        
        $('.img-thumbnail').removeClass('ativo');
        $(this).addClass('ativo');
        
        $('#imgSelecionada').html('<b>' + $imgSelected + '</b> selecionada');
    });
});
.img-thumbnail {
    display: inline-block;
    
    margin-left: -4px;
    position:relative;
    cursor:pointer;
}
.img-thumbnail {width: 33.3%; max-width: 345px;}

.img-thumbnail img {
    height: 170px;
    width: 100%;
}
.ativo:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("https://i.sstatic.net/9M4s3.png") no-repeat center center;
    background-size: 50%;
    background-color: rgba(235, 235, 235, 0.73);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="img-thumbnail" data-selected="primeira img">
    <img src="http://lorempixel.com/200/170/city"/>
</div>
<div class="img-thumbnail" data-selected="segunda img">
    <img src="http://lorempixel.com/200/170/sports"/>
</div>
<div class="img-thumbnail" data-selected="terceira img">
    <img src="http://lorempixel.com/200/170/fashion"/>
</div>

<div id="imgSelecionada"></div>

1
  • 1
    Obrigado pela ajuda Chun.
    – user24136
    Commented 23/03/2017 às 13:23

Você deve fazer log-in para responder a esta pergunta.