0

No sé como colocarle en el titulo, pero mi problema es que uso un foreach para imprimir una cantidad de datos y que se me repita las card. Necesito mostrar una imagen dando click en cualquier imagen de las diferentes card que trae. Por el momento me funciona el jquery solo con la primer card que me trae, las demás no me funciona. Adjunto el codigo.

 <?php foreach ($validar as $v) { ?>
   <div class="col-lg-4 col-md-6">
      <div class="blog_post lyf">
         <div class="img_podcconu">
             <img class="imgpcard" src="https://pbs.twimg.com/profile_images/890901007387025408/oztASP4n.jpg" alt="random image">
          </div>
          <div class="container_copy">
             <h3 class="h3card"><?= $v->nombre ?> <?= $v->apellido1 ?></br>
             <i class="mdi mdi-email-variant"></i><?= $v->correo ?> </br>
             <i class="mdi mdi-cellphone-android"></i><?= $v->celular ?> </br>
             <i class="mdi mdi-account-multiple"></i><?= $v->user ?>
             </h3></br>
             <h1 class="h1card">Identificacion</h1>
               <div class="espf">

                  <img id="myImg1" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_cedula_front ?>" alt="Snow" style="width:100px;max-width:300px">
                  <img id="myImg2" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_cedula_back ?>" alt="Snow" style="width:100px;max-width:300px">
                  <img id="myImg3" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_selfie ?>" alt="Snow" style="width:100px;max-width:300px">

              </div>


             <div style="float: right;">
             <button class="btn_primarycard btnc3">Aprobar</button>
              <button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
            </div>

          </div>

       </div>
      </div>
    <?php } ?>

y este es el jquery que me hace el proceso

           $("#myImg1").on("click", function() {
            id = $(this).attr("src");
            $('#myModal').show(); //muestro mediante id
            $('#img01').attr("src",id);
        });
        $("#myImg2").on("click", function() {
            id = $(this).attr("src");
            $('#myModal').show(); //muestro mediante id
            $('#img01').attr("src",id);
        });
        $("#myImg3").on("click", function() {
            id = $(this).attr("src");
            $('#myModal').show(); //muestro mediante id
            $('#img01').attr("src",id);
        });
3
  • Hola, He mirado tu post y te comento lo siguiente:, Puedes leer este Articulo Cómo preguntar para que tu pregunta sea mejor recibida, Puedes leer este Articulo ejemplo mínimo verificable, También es importante que sepas que preguntas son mal vistas centro de ayuda.
    – user46896
    el 31 ago. 2022 a las 20:53
  • estas repitiendo la imagen: <img class="imgpcard" src="https://pbs.twimg.com/profile_images/890901007387025408/oztASP4n.jpg" alt="random image">
    – user46896
    el 31 ago. 2022 a las 20:55
  • Tambien estas repitiendo los id, por ejemplo en tu foreach las veces que se ejecute generar siempre <img id="myImg1"... lo mismo con las otras tres: <img id="myImg2"... y <img id="myImg3"... de tal manera esto es un error tanto de html que dice que lo id no se deben repetir; como de logica ... ya que tu javascript buscara y mostrara siempre el primer id que encuentre que haga match ...
    – user46896
    el 31 ago. 2022 a las 20:58

1 respuesta 1

1

Coloqué todo dentro del foreach para así mismo poder identificar y colocar diferentes id

 <?php foreach ($validar as $v) { ?>


    <div class="col-lg-4 col-md-6">
       <div class="blog_post lyf">
          <div class="img_podcconu">
              <img class="imgpcard" src="https://pbs.twimg.com/profile_images/890901007387025408/oztASP4n.jpg" alt="random image">
          </div>
          <div class="container_copy">
             <h3 class="h3card"><?= $v->nombre ?> <?= $v->apellido1 ?></br>
                 <i class="mdi mdi-email-variant"></i><?= $v->correo ?> </br>
                 <i class="mdi mdi-cellphone-android"></i><?= $v->celular ?> </br>
                 <i class="mdi mdi-account-multiple"></i><?= $v->user ?>
              </h3></br>
              <h1 class="h1card">Identificacion</h1>
              <div class="espf">

                  <img id="myImg<?= $v->id ?>" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_cedula_front ?>" alt="Snow" style="width:100px;max-width:300px">
                  <img id="image<?= $v->id ?>" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_cedula_back ?>" alt="Snow" style="width:100px;max-width:300px">
                  <img id="tercer<?= $v->id ?>" src="<?= base_url() ?>asset/images/confirmacion/<?= $v->img_selfie ?>" alt="Snow" style="width:100px;max-width:300px">
              <!-- The Modal -->
                  <div id="myModal<?= $v->id ?>" class="modal" tabindex="-1" role="dialog" aria-labelledby="vcenter" aria-hidden="true">
                      <div class="modal-content">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                         <img class="modal-content" id="img<?= $v->id ?>">
                       </div>
                    </div>
               <script>
                   $("#myImg<?= $v->id ?>").on("click", function() {
                   id = $(this).attr("src");
                   $('#myModal<?= $v->id ?>').show(); //muestro mediante id
                   $('#img<?= $v->id ?>').attr("src", id);
                  });
                    $("#image<?= $v->id ?>").on("click", function() {
                    id = $(this).attr("src");
                    $('#myModal<?= $v->id ?>').show(); //muestro mediante id
                     $('#img<?= $v->id ?>').attr("src", id);
                     });
                     $("#tercer<?= $v->id ?>").on("click", function() {
                        id = $(this).attr("src");
                        $('#myModal<?= $v->id ?>').show(); //muestro mediante id
                        $('#img<?= $v->id ?>').attr("src", id);
                       });
                  </script>
                 </div>

               </div>


                 <div style="float: right;">
                <button class="btn_primarycard btnc3">Aprobar</button>
                <button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
              </div>

             </div>

             </div>
          <?php } ?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.