How to click on an image and it will be selected?

Question

How to click on an image and it will be selected?

Navigation

#1 by (2 votes)

1

Colleagues.

I have a list 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 magnific popup plugin to enlarge the photos, but would like the user to clicking on top of one of the images, appears a checked so that I can send to the order table. This way:

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

jquery

asked by anonymous 22.03.2017 / 15:27

1 answer

Function for Tooltip does not work when run a second time Why is this function not working?

score 2 · Accepted Answer

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><divclass="img-thumbnail" data-selected="primeira img">
    <img src="http://lorempixel.com/200/170/city"/></div><divclass="img-thumbnail" data-selected="segunda img">
    <img src="http://lorempixel.com/200/170/sports"/></div><divclass="img-thumbnail" data-selected="terceira img">
    <img src="http://lorempixel.com/200/170/fashion"/></div><divid="imgSelecionada"></div>