How do I click an image and it is selected?

Question

Colleagues.

I have a relationship of images that I’m bringing this way:

<?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 } ?>

And I’m using the plugin magnific popup to enlarge the photos, but would like the user to click on one of the images, appear a checked so that I can send to the order table. Thus:

Is there any plugin or way to do this in Jquery?

Answer 1

You can do this by adding a new class ativo each time an image is clicked:

$(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.stack.imgur.com/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>