Cargar imagen

nimaki25 · #1 (**permalink**) 11/08/2014, 16:40

Hola amigos del foro jquery, junto con saludarlos me permito hacreles una consulta sobre un tema que me tiene n tanto complicado...

necesito hacer lo siguiente:
tengo una lista de imagenes thumbails (uso boostrap asi que trabajo con la clase img-thumbails), lo que necesito hacer es que al pinchar sobre una de estas miniaturas, me muestre esa imagen en tamaño completo dentro de un div con medidas especificas.

No puedo implementar un slider porque estas imagenes las tomo dinamicamente, segun el id de un usuario.

Agradesco desde ya su ayuda y su tiempo

hecbaal · #2 (**permalink**) 12/08/2014, 07:39

Buenas,

cada div que utilizas con la class "img-thumbnail", tiene una class de columna? (p.e. col-md-2). Lo digo porque podrías variar esa class cuando pinches ocupando más y haciendóla más grande.

No se si me explicado bien, o si es tu idea. Dime más e intento ayudar.

Saludos.

Alexis88 · #3 (**permalink**) 12/08/2014, 10:46

Supongo que buscas hacer algo como esto. Pues, ya que estamos en el sub-foro de jQuery, solamente tendrías que ejecutar una función al momento de darle un clic a cualquiera de las imágenes. Dicha función mostrará un elemento contenedor inicialmente oculto y al cual le asignarás como fondo la ruta de la imagen a la que le acabas de dar clic. Si utilizas una ruta para el thumbnail y otra para la imagen de tamaño original, entonces deberías de almacenar la ruta de la imagen de tamaño original en algún pseudo-atributo y luego lo recogerías con el método data.

Código HTML:

Ver original<img src = "img-thumbnail.jpg" data-original = "img-original.jpg" />

Código Javascript:

Ver original$(".thumbnail").click(function(){
    var original = $(this).data("original");
    //El resto de instrucciones
});

Saludos

nimaki25 · #4 (**permalink**) 12/08/2014, 16:35

gracias estimados por sus respuesta, lo que busco hacer es algo como esto:
http://flexslider.woothemes.com/thumbnail-slider.html

no puedo implementarlo porque las imagenes las recogo segun un id desde php, o sea, busco mostrar las miniaturas abajo del div principal, y que al pinchar sobre esa miniatura me carge la imagen en el div principal, tengo flexslider impementado asi:

Código PHP:

Ver original<!-- FlexSlider -->
         <script defer src="js/jquery.flexslider.js"></script>
        
        <script>
        $(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
   
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});
    </script>
</head>
 
<body>
<!--Contenedor Principal-->
<div class="container">
 
    <div class="row">
        <h3 class="text-center">Detalle de Aviso</h3>
        <p class="text-right alert-info">Visualizando el aviso <strong><?php echo $cod_aviso;?></strong></p>
    </div>
      
    <!--Presentación Aviso Detallado-->
    <div class="row">
 
<div id="slider" class="flexslider">
    <?php foreach ($avisos as $av): ?>
  <ul class="slides">
   <?php if($av['img1'] == NULL){
      echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
          }else{
       echo "<li><img src=".$av["img1"]."></li>";
      }
      if($av['img2'] == NULL){
      echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
      }else{
      echo "<li><img src=".$av["img2"]."></li>";
 
      }
      if($av['img3'] == NULL){
      echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
      }else{
      echo "<li><img src=".$av["img3"]."></li>";
 
      }
      if($av['img4'] == NULL){
      echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
      }else{
      echo "<li><img src=".$av["img4"]."></li>";
 
      }
      if($av['img5'] == NULL){
      echo "<img src='img/noimage.jpg' height='140px' width='180px' />";
      }else{
      echo "<li><img src=".$av["img5"]."></li>";
      }
      ?>                               
  </ul>
</div>
            
<div id="carousel" class="flexslider">
  <ul class="slides">
    
    <?php echo "<li><img src=".$av["img1"]."></li>";?>
   <?php echo "<li><img src=".$av["img1"]."></li>";?>
    <?php echo "<li><img src=".$av["img1"]."></li>";?>
   <?php echo "<li><img src=".$av["img1"]."></li>";?>
  <?php echo "<li><img src=".$av["img1"]."></li>";?>
  
  </ul>
</div>
 
            <!--Aviso-->
            <div class="col-lg-6 detalleFullAviso">
            <h3><?php echo $av['titulo_aviso']; ?> </h3>
                            
            <p> <?php echo $av['aviso_completo']; ?> </p>
                            
            <strong>Valor ($):</strong> <?php echo $av['valor_producto']; ?> <br>
                            
            <strong>Publicado el:</strong> <?php echo $av['fecha_publicacion']; ?> <br>
                            
            <strong>Bajo la categoria:</strong> <?php echo $av['categoria_aviso']; ?><br>
                            
            <strong>Comuna:</strong> <?php echo $av['comuna']; ?>
 
            </div><!--Fin detalleFullAviso-->
                        
                <!--Publicante-->
        <div class="col-lg-6 detallePublicante">
                    <h4>Contacte al Anunciante:</h4>
                    <strong>Nombre:</strong> <?php echo $av['nombre']; ?><br>
                    <strong>Telefono Celular:</strong> <?php echo $av['telefono_celular']; ?> <br>
                    <strong>Telefono Fijo:</strong> <?php echo $av['telefono_fijo']; ?>
        </div>
        
         <?php endforeach; ?>

pero no me muestra miniaturas ni nada, si le saco el flex slider la carga me funciona bien...