Create dynamic border on an image after marking a checkbox

Question

Create dynamic border on an image after marking a checkbox

Navigation

#1 by (1 votes)

0

How do I when I click on the checkbox it dynamically marks an image with border. I'm trying to do it but it always marks all img how could I do that. Note: my img comes from the bank everything is dynamic.

dynamic part php :

<div class="btn-group" data-toggle="buttons">
    <label class="check btn btn-primary">
        <input type="checkbox" name="ck[]" value="$imagem" id="$id"> Selecionar
    </label>
<div>

part of jquery

$(".check").click(function(){
    $("img").toggleClass('clic');
});

obs. with this code I can mark the img but all and not and that what I want I wanted to mark only the ones that I click. example, and I click on the first img mark only it and then if I mark the fifth img mark only it. in the end I will have 2 marked that I chose img 1 and 5

full php code:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli);

php jquery

asked by anonymous 08.01.2016 / 15:17

1 answer

Watermark on images with PHP Doubt with Microsoft .NET Framework version asp.net mvc

score 1 · Accepted Answer

The ideal would be to see how you are generating the HTML of the images but the idea is, let's assume that the value of the checkbox that has $ image, is the same as the "id" of the image. That is

Then it would look like this:

$(".check").click(function(){
   $('#'+$(this).val()).toggleClass('clic');
});

Edit:

I suggest that you use this helper id that you are already using for the checkbox in the image, we will also add 100 in it to not mix look just how it would look:

require"sys/conexao.php";
                $nome = $_GET['noivos'];
                $nomeurl = $_GET['noivos'];
                $sql = mysqli_query($mysqli, "SELECT * FROM galeria WHERE email = '$nome'");
                while($aux = mysqli_fetch_assoc($sql)){

                        $titulo = $aux['nome_galeria'];
                        $imagem = $aux['img'];
                        $img_big = $aux['img_big'];
                        $id = $aux['id'];
                        $idimg = $aux['id']+100;
                        $_SESSION['id'] = $id;

            print"
            <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
                <div class=\"hovereffect\">
                    <img class=\"img-responsive\" src=\"images/small/selecao/$imagem\" id=\"$idimg\" alt=\"\">
                    <div class=\"overlay\">
                        <div class=\"pad\">
                        <h2>$titulo</h2>
                            <a class=\"info test-popup-link\" href=\"images/big/selecao/$img_big\"><span class=\"corr\"><i class=\"fa fa-search\"></i></span></a>
                            <div class=\"btn-group\" data-toggle=\"buttons\">
                              <label class=\"check btn btn-primary\">
                                <input type=\"checkbox\" name=\"ck[]\" value=\"$imagem\" id=\"$id\" imgref=\"$idimg\"> Selecionar
                              </label>
                            </div>
                       </div>
                    </div>
                </div>
            </div>";
        }
        mysqli_close($mysqli)

So I created an auxiliary id for the image and put it in the id attribute of the img, and also created an imgref tribute in the checkbox to leave the id there. Js would look like this now:

   $(".check").click(function(){
       $(this).closest('img').toggleClass('clic');
    });