1

De un lado tengo 3 divs de 130x130px, con sus ids imagen1 imagen2 imagen3, donde muestro mediante una consulta a la bd y un ciclo 3 imagenes distintas (de la bd traigo la ruta).

La primera imagen tambien la cargo en el div principal detalle_foto. Hasta aqui todo bien. Necesito que al hacer click en cualquiera de las 3 imagenes, esta se muestre en el div principal. Pienso que tendré que hacer una función e invocarla con onclick del img.

Estuve intentando pero no me sale, no sé como pasar la variable con la ruta de la foto desde html/php y que la tome una función javascript , ¿O quizás no es la forma? Copio la parte del código.

  <div id="caja_001">
        <div id="imagen1"><img src="<?php echo $imagen?>" width="130px" height="130px"></div>
        <div id="imagen2"><img src="<?php echo $imagen2?>" width="130px" height="130px"></div>
        <div id="imagen3"><img src="<?php echo $imagen3?>" width="130px" height="130px"></div>
    </div>

   <div id="caja_002">
        <div id="detalle_titulo"><h3><?php echo $nombre?></h3></div>
        <div id="detalle_foto"><img src="<?php echo $imagen?>" width="200px" height="200px"></div>
        <div id="detalle_desc"><p><?php echo $desc?></p></div>
    </div>

2 respuestas 2

2

Puedes crear una clase secundaria para el resto de las fotos y asignarle el atributo src que tenga la imagen secundaria que acabas de clickar a la imagen principal.

Ejemplo:

$(document).ready(function() {
    $(".secundaria").click(function(){
        $("#principal").attr("src", $(this).attr('src'));
     });
});
img{
  height: 100px;
  width: 100px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="principal" src="">
<img class="secundaria" src="http://vignette2.wikia.nocookie.net/labibliotecadelviejomundo/images/8/8f/Drag%C3%B3n_de_Fuego_por_Sandara.jpg/revision/latest?cb=20150413200815&path-prefix=es">
<img class="secundaria" src="http://vignette1.wikia.nocookie.net/seraphina/images/b/b2/Dragonseraphina.jpg/revision/latest?cb=20160103194957">

Puedes ver en el ejemplo que clickando en cualquiera de los dos dragones, la imagen del dragón en el que hayas hecho click se pone en la imagen principal.

2

Si siempre serán los mismos id's, puede probar el siguiente código, extendiéndolo a las demás id's:

$("#caja_001").on("click", "img", function() {
    var src = $(this).attr("src");
    $("#detalle_foto").find("img").attr("src", src);
});

Este código básicamente coge el atributo src de la imagen clicada del div con id caja_001 y le transfiere esa ruta a la imagen que se encuentra dentro del div con id detalle_foto.

4
  • Muchas gracias , me fue de mucha ayuda !!
    – look68
    Commented el 8 nov. 2016 a las 13:09
  • si resolvio tu problema, recuerda marcar como Respuesta aceptada para que otros usuarios con la misma necesidad que tu, puedan acceder mas rapido a resolver sus dudas @look68
    – sioesi
    Commented el 8 nov. 2016 a las 13:15
  • Perdona amigo, como marco como Respuesta Aceptada, presté especiual atencion en puntuar las respuestas pero no encuentro como dar por terminada la pregunta ..
    – look68
    Commented el 14 nov. 2016 a las 14:02
  • @look68: Para marcar la respuesta como la aceptada debes seleccionar la pleca debajo de la parte de las votaciones correspondientes a la respuesta.
    – Isaac Vega
    Commented el 16 nov. 2016 a las 3:55

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.