0

Un gran saludo.

Estoy en un dilema, tengo tres imágenes y me gustaría que en vez de que el texto este fijo hay debajo de la imagen, mejor que cuando se de Click sobre la misma se despliegue el texto debajo de la imagen (Esto lo estoy haciendo con Bootstrap), pero no se si sea muy complejo o mejor sea dejarlo así.

Muchas gracias. =)

<div class="col-md-2"></div>
        <div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/josemiguel.png"><br><br><h4 style="text-align:center"><b>José Miguel</b></br>Estilista Integral</h4></div>

        <div class="col-sm-3"><img class="img-responsive center-block" src="imagenes/normal/luciajaimes.png"><br><br><h4 style="text-align:center"><b>Lucia Jaimes</b></br>Estilista Integral</h4></div>
        
        <div class="col-sm-3 "><img class="img-responsive center-block" src="imagenes/normal/nataliatorres.png"><br><br><h4 style="text-align:center"><b>Natalia Torres</b></br>Estilista Integral</h4></div>
        <div class="col-md-2"></div>

Muchas gracias.

3
  • publica tu codigo o lo que tienes avanzando para ayudarte.
    – juliocpiro
    el 17 sep. 2017 a las 19:10
  • Si estás usando Bootstrap, tienes dos maneras de implementarlo. Una, es mediante la clase collapse y los atributos id, data-toggle y data-target. Otra forma es hacer que mediante jQuery, de forma manual, actives el despliegue/colapsamiento de tu(s) texto(s). Como se va a implementar, depende de como tú lo definas. Por ello, me gustaría poder ver el código de lo que estás haciendo. el 17 sep. 2017 a las 23:45
  • Hola muchas gracias, acabo de subir mi cod, para que me des tu opinión gracias. :)
    – linjai
    el 18 sep. 2017 a las 14:48

1 respuesta 1

1

Base: Uso de elemento <a>, y seteo de elemento colapsable

Para implementar el efecto collapse, como buscas que se haga click sobre una imagen, puedes usar un elemento <a> en el que adentro tengas tu imagen.

 <a>
     <img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
 </a>

Por otro lado, para poder tener el efecto collapse, el texto debe estar dentro de un elemento con la clase collapse. Además, el elemento debe tener el atributo id que permita a este elemento ser asignado como objetivo.

<div id="myText" class="collapse">
    <!-- Texto -->
</div>

Tu elemento base quedaría así:

<div class="col-sm-3">
    <a>
        <img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
    </a>
    <br/>
    <br/>
    <div id="myText" class="collapse">
        <!-- Texto -->
    </div>
</div>

Dependiendo de como te parezca más conveniente, lo puedes implementar de dos formas:

  • Mediante los atributos href y data-toggle
  • Mediante jQuery

Opción 1: Implementación de elementos colapsables mediante atributos href y data-toggle

A ese mismo elemento de link, le debes agregar los atributos href y data-toggle.

El atributo href debe tener en su valor la id del elemento objetivo con el efecto collapse.

Por su parte, el atributo data-toggle debe tener el valor collapse.

<div class="col-sm-3">
    <a href="#myText" data-toggle="collapse">
        <img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg"/>
    </a>
<br/>
<br/>
    <div id="myText" class="collapse">
        <!-- Texto -->
    </div>
</div>

Llevado a tu código (con algunas correcciones menores, y usando imágenes placeholder) se traduce en lo que viene a continuación. El efecto collapse lo puedes ver mejor a pantalla completa.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-2"></div>

<div class="col-sm-3">
  <a href="#myText1" data-toggle="collapse">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
  </a>
  <br/>
  <br/>
  <div id="myText1" class="collapse">
    <h4 style="text-align:center"><b>José Miguel</b><br/>Estilista Integral</h4>
  </div>
</div>

<div class="col-sm-3">
  <a href="#myText2" data-toggle="collapse">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
  </a>
  <br/>
  <br/>
  <div id="myText2" class="collapse">
    <h4 style="text-align:center"><b>Lucia Jaimes</b><br/>Estilista Integral</h4>
  </div>
</div>

<div class="col-sm-3">
  <a href="#myText3" data-toggle="collapse">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
  </a>
   <br/>
  <br/>
  <div id="myText3" class="collapse">
    <h4 style="text-align:center"><b>Natalia Torres</b><br/>Estilista Integral</h4>
  </div>
</div>

<div class="col-md-2"></div>

Opción 2: Implementación de elementos colapsables mediante jQuery

Para este caso, cabe destacar que lo que viene a continuación no es la única forma de implementación que puedes usar con jQuery.

Para el elemento de link, vas a necesitar el atributo href con el valor de id del elemento colapsable, y una id que la vas a necesitar en tu código:

<div class="col-sm-3">
    <a id="#linkToText" href="#myText">
        <img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
    </a>
    <br>
    <br>
    <div id="myText" class="collapse">
        <!-- Texto -->
    </div>
</div>

Ahora se procede a programar el comportamiento colapsable. Para ello se usa el método .collapse() y el evento click, de modo que al hacer click en el elemento de link, se muestra u oculta el elemento con el texto, con efecto collapse.

$("#linkToText").on("click", function() { 
    $("#myText").collapse("toggle"); 
});

Traducido a tu código, quedaría como viene a continuación. El efecto collapse lo puedes ver mejor a pantalla completa.

$(document).ready(function() {
  $("#linkToText1").on("click", function() {
    $("#myText1").collapse("toggle");
  });
  
  $("#linkToText2").on("click", function() {
    $("#myText2").collapse("toggle");
  });
  
  $("#linkToText3").on("click", function() {
    $("#myText3").collapse("toggle");
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-2"></div>

<div class="col-sm-3">
  <a id="linkToText1" href="#myText">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
  </a>
  <br>
  <br>
  <div id="myText1" class="collapse">
     <h4 style="text-align:center"><b>José Miguel</b><br/>Estilista Integral</h4>
  </div>
</div>

<div class="col-sm-3">
  <a id="linkToText2" href="#myText2">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
  </a>
  <br>
  <br>
  <div id="myText2" class="collapse">
     <h4 style="text-align:center"><b>Lucia Jaimes</b><br/>Estilista Integral</h4>
  </div>
</div>

<div class="col-sm-3">
  <a id="linkToText3" href="#myText3">
    <img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
  </a>
  <br>
  <br>
  <div id="myText3" class="collapse">
      <h4 style="text-align:center"><b>Natalia Torres</b><br/>Estilista Integral</h4>
  </div>
</div>

Véase también

3
  • Hola, muchas gracias, ya lo implemente, aunque no me funciona y me estaba preguntando si sera por la versión de Bootstrap, yo tengo la 3, no se si usaste esa misma, así mismo si deba anexar algún otro archivo para que me funcione. :)
    – linjai
    el 21 sep. 2017 a las 17:08
  • Ambos fragmentos de código tienen la versión 3.3.7 de Bootstrap. Fuera de los archivos requeridos para Bootstrap, y de las imágenes que vienen de tu pregunta, no, no debería haber ningún otro archivo adicional. el 21 sep. 2017 a las 17:13
  • Ha bueno, quizás no lo coloque bien, voy a mirar bien y te digo, muchas gracias por ayudarme. =)
    – linjai
    el 21 sep. 2017 a las 17:16

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.