Foros del Web » Creando para Internet » HTML »

Una imagen sube y quedan miniaturas abajo

Estas en el tema de Una imagen sube y quedan miniaturas abajo en el foro de HTML en Foros del Web. ¡Hola! Estoy intentado hacer "una cosa" y como no sé cómo se llama, ni siquiera puedo buscarla fácilmente. Voy a tratar de explicarlo: Si tenemos ...
  #1 (permalink)  
Antiguo 22/01/2015, 11:06
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Exclamación Una imagen sube y quedan miniaturas abajo

¡Hola!
Estoy intentado hacer "una cosa" y como no sé cómo se llama, ni siquiera puedo buscarla fácilmente.

Voy a tratar de explicarlo:
Si tenemos una web de un portfolio con los distintos trabajos ordenados, quiero que al hacer click sobre una imagen ésta se coloque en la parte superior mientras que el resto de imágenes se quedan abajo en miniatura.
Es algo como esta web:
http://www.javierjaen.com/World-Wide-Web-25-Years

He buscado en el código de esta web pero

¿Alquien puede decirme cómo se llama lo que busco? Así podré encontrarlo y aprender cómo se hace.
MUCHAS GRACIAS!!
  #2 (permalink)  
Antiguo 22/01/2015, 11:09
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 6 años, 11 meses
Puntos: 12
Respuesta: Una imagen sube y quedan miniaturas abajo

Hola croquemonsieur, lo que tú buscas son galerías de imágenes con jquery.

Saludos.
__________________
http://www.sp-vision.net
  #3 (permalink)  
Antiguo 22/01/2015, 11:20
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Gracias!
He estado buscando bastantes galerías y todo lo que encuentro son slides y cosas por el estilo.
¿no sabes de qué tipo es lo que yo busco exactamente?

(como verás soy muy nueva en esto del desarrollo web)
  #4 (permalink)  
Antiguo 22/01/2015, 12:27
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: Una imagen sube y quedan miniaturas abajo

Primero que nada ¡Bienvenida!

Es bastante sencillo:

Los nombres de los archivos dicen a que se refieren.


Código HTML:
Ver original
  1. <img src="UnaFotoInicial.jpg"
  2.     name="Cambiante">
  3.  
  4.  <img src="Miniatura-01.jpg"
  5.     onClick="Cambiante.src='UnaFotoDiferente-01.jpg';">


Por otro lado prueba usar un lightbox http://lokeshdhakar.com/projects/lightbox2/
  #5 (permalink)  
Antiguo 22/01/2015, 16:27
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 2 meses
Puntos: 641
Respuesta: Una imagen sube y quedan miniaturas abajo

A mi esa forma en que esta hecha me parece bastante horrible la verdad, pero es muy sencilla de hacer con jquery y sin plugins, si no sabes usar jquery, tendrás que conformarte con lightbox, o similar.
  #6 (permalink)  
Antiguo 22/01/2015, 21:00
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: Una imagen sube y quedan miniaturas abajo

Un demo un poco feo.

http://jsfiddle.net/3u94twez/
  #7 (permalink)  
Antiguo 23/01/2015, 06:33
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Majos!! Muchas gracias por vuestras respuestas :)

He probado un poco lo del lightbox y parece sencillo. Gracias!
Por otro lado, como habéis dicho que es fácil hacerlo con jquery sin usar plugins, me he decidido a intentarlo. Realmente no me entero mucho de javascript todavía, así que igual no es muy elegante; pero esto es lo que he escrito:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.  
  4.         $("a.ilus").click(function(){
  5.             $("div#show").show();
  6.         });
  7.  
  8.         $("a#ilus1").click(function(){
  9.             $("div#show").css("background-image","url(../images/ilus/ilus1.png)");
  10.         });
  11.  
  12.         $("a#ilus2").click(function(){
  13.             $("div#show").css("background-image","url(../images/ilus/ilus2.png)");
  14.         });
  15.     });
  16. </script>


A mí me funciona, aunque aún le faltan algunos retoques creo.
¿qué os parece? :)
  #8 (permalink)  
Antiguo 23/01/2015, 07:14
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 2 meses
Puntos: 641
Respuesta: Una imagen sube y quedan miniaturas abajo

para empezar está bien, todavía te falta abstraerlo para que en vez de poner

$("a#ilus1").click(function(){...
$("a#ilus2").click(function(){...
$("a#ilus3").click(function(){...
$("a#ilus4").click(function(){...
$("a#ilus5").click(function(){...

solo pongas

$(".gallery").click(function(){...

pero vas bien
  #9 (permalink)  
Antiguo 23/01/2015, 08:51
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: Una imagen sube y quedan miniaturas abajo

Tengo la duda. ¿Ya viste que el código que puse mide 4 palabras sin plug ins? Jquery... entra en mi categoría de plug in.
  #10 (permalink)  
Antiguo 23/01/2015, 10:24
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Hola de nuevo!!
Pues es que probé ese código que habías escrito, pero creo que no lo he entendido muy bien y no me funcionaba.
Como tampoco quería dar mucho la brasa intenté hacer mi propia versión.

En tu fórmula

Código HTML:
Ver original
  1. <img src="UnaFotoInicial.jpg"
  2.        name="Cambiante">
  3.      
  4.      <img src="Miniatura-01.jpg"
  5.        onClick="Cambiante.src='UnaFotoDiferente-01.jpg';">

creo que siempre hay una imagen en grande y las miniaturas debajo (corregidme si me equivoco) y yo quería que al cargar la página de primeras, aparecieran todas las imágenes ordenadas en cuadraditos primero. Igual no estoy en lo cierto, pero eso era lo que no entendía muy bien.

De verdad, muchas gracias! Me estáis ayudando mucho
  #11 (permalink)  
Antiguo 23/01/2015, 10:25
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: Una imagen sube y quedan miniaturas abajo

Puse arribita el demo un poco feo http://www.forosdelweb.com/f4/imagen...2/#post4673276

Picale a la notita y el cuadro amarillo cambia a otra imagen.

Luego actualizo las fotos a algo más claro.
  #12 (permalink)  
Antiguo 23/01/2015, 10:36
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Cierto, no apreciaba el cambio de la imagen!
:)
  #13 (permalink)  
Antiguo 23/01/2015, 10:59
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 2 meses
Puntos: 641
Respuesta: Una imagen sube y quedan miniaturas abajo

Ok a ver que te parece mi ejemplo

http://jsfiddle.net/61hfg137/2/

debes darle click a alguna imagen

Última edición por memoadian; 23/01/2015 a las 11:05
  #14 (permalink)  
Antiguo 23/01/2015, 11:05
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: Una imagen sube y quedan miniaturas abajo

Ya actualizé mi ejemplo más claro... :p

http://jsfiddle.net/3u94twez/3/


La ventaja (o desventaja) del de Memodian, es que las miniaturas son en realidad la misma imagen grande.

Última edición por Rafael; 23/01/2015 a las 11:10
  #15 (permalink)  
Antiguo 23/01/2015, 11:06
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 2 meses
Puntos: 641
Respuesta: Una imagen sube y quedan miniaturas abajo

Cita:
Iniciado por Rafael Ver Mensaje
Ya actualizé mi ejemplo más claro... :p

http://jsfiddle.net/3u94twez/2/
Que buen efecto pasar el modelo de maya a textura jeje
  #16 (permalink)  
Antiguo 23/01/2015, 11:11
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Fantástico!!
Es justo lo que quiero!!! Claro, tu código es más bonito :) (y más complejo para mí)

Ahora me asalta otra duda: la url no cambia verdad?
Por ejemplo, para compartir es útil que en la url se especifique la imagen en la que estás.
www.domino.com/imagen1
En el caso del ejemplo que os puse sí que cambia. ¿Esto es porque son páginas distinas?
¿o se podría hacer con hash? (he leído algo de esto, pero puede ser que oigo campanas y no sé dónde...)
  #17 (permalink)  
Antiguo 23/01/2015, 11:27
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 2 meses
Puntos: 641
Respuesta: Una imagen sube y quedan miniaturas abajo

En ese caso es bastante similar, es más facil hacerlo con hash, de la forma del ejemplo requiere más programación del lado del servidor, como me da flojera explicarte, te mando como debería verse.

simplemente compruebo si la url tiene #imagen_x y con eso obtengo la url de la imagen que tiene como padre el href del link.

Código HTML:
Ver original
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  2. <style type="text/css">
  3. img{max-width:100%}
  4. .principal{
  5.     width:100%;
  6. }
  7. .galeria{
  8.     width:100%
  9. }
  10. .galeria ul{
  11.     list-style-type:none;
  12. }
  13. .galeria li{
  14.     width:20%;
  15.     margin:1.25%;
  16.     float:left;
  17.     cursor:pointer;
  18. }
  19. $(document).ready(function(){
  20.     $('.galeria li a').click(function(){
  21.         src = $('img', this).attr('src');
  22.         img = $('<img>');
  23.         img.attr('src', src);
  24.         $('.principal').html(img);
  25.     });
  26.  
  27.     var hash = window.location.hash;
  28.     if(hash.length){
  29.         src = $('a[href="'+hash+'"] img').attr('src');
  30.         img = $('<img>');
  31.         img.attr('src', src);
  32.         $('.principal').html(img);
  33.     }
  34. });
  35. <div class="principal">
  36.    
  37. </div>
  38. <div class="galeria">
  39.     <ul>
  40.         <li>
  41.             <a href="#imagen_1">
  42.                 <img src="http://www.fondosni.com/images/wallpapers/love_3d_design_widescreen-wide-51_1400x900.jpg"/>
  43.             </a>
  44.         </li>
  45.         <li>
  46.             <a href="#imagen_2">
  47.                 <img src="http://www.8wallpaper.com/newdesk/desk/1244009238980.jpg"/>
  48.             </a>
  49.         </li>
  50.         <li>
  51.             <a href="#imagen_3">
  52.                 <img src="http://www.zastavki.com/pictures/1440x900/2010/3D-graphics_3d_aquarium_026005_.jpg"/>
  53.             </a>
  54.         </li>
  55.         <li>
  56.             <a href="#imagen_4">
  57.                 <img src="http://www.fondos7.net/wallpaper-original/wallpapers/hongo-de-mario-bross-2055.jpg"/>
  58.             </a>
  59.         </li>
  60.         <li>
  61.             <a href="#imagen_5">
  62.                 <img src="http://1.bp.blogspot.com/-QQI9GhB6G-k/TpVyfCCh_4I/AAAAAAABdEk/jdsyIfVYAc4/s1600/halloween-wallpaper-marvel-zombies-secret-war-zombies.jpg"/>
  63.             </a>
  64.         </li>
  65.         <li>
  66.             <a href="#imagen_6">
  67.                 <img src="http://wallpaperart.org/images/Wallpaperartinterviewmartaiven/wallpaperart-1400x900.jpg"/>
  68.             </a>
  69.         </li>
  70.     </ul>
  71. </div>

si copias y pegas ese código en una página html cualquiera debe servir.
  #18 (permalink)  
Antiguo 23/01/2015, 11:46
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Maravilloso! voy a estudiarme eso que has puesto y os cuento :)
  #19 (permalink)  
Antiguo 26/01/2015, 11:20
 
Fecha de Ingreso: enero-2015
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Una imagen sube y quedan miniaturas abajo

Hola de nuevo!!
ya me he mirado lo del hash. Hacerlo me va a llevar más tiempo de lo que esperaba, pero creo que lo entiendo todo.
Así que genial! Muchas gracias todos

Etiquetas: html+javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:08.