Una imagen sube y quedan miniaturas abajo

[croquemonsieur]

¡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!!

[mauritosuarez]

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

Saludos.

[croquemonsieur]

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)

[Rafael]

Primero que nada ¡Bienvenida!

Es bastante sencillo:

Los nombres de los archivos dicen a que se refieren.

Código HTML:

<img src="UnaFotoInicial.jpg"
    name="Cambiante">
 
 <img src="Miniatura-01.jpg"
    onClick="Cambiante.src='UnaFotoDiferente-01.jpg';">
 

Por otro lado prueba usar un lightbox http://lokeshdhakar.com/projects/lightbox2/

[memoadian]

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.

[Rafael]

Un demo un poco feo.

http://jsfiddle.net/3u94twez/

[croquemonsieur]

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:

<script type="text/javascript">
    $(document).ready(function(){
 
        $("a.ilus").click(function(){
            $("div#show").show();
        });
 
        $("a#ilus1").click(function(){
            $("div#show").css("background-image","url(../images/ilus/ilus1.png)");
        });
 
        $("a#ilus2").click(function(){
            $("div#show").css("background-image","url(../images/ilus/ilus2.png)");
        });
    });
</script>
 

A mí me funciona, aunque aún le faltan algunos retoques creo.
¿qué os parece? :)

[memoadian]

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

[Rafael]

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.

[croquemonsieur]

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:

<img src="UnaFotoInicial.jpg"
        name="Cambiante">
     
     <img src="Miniatura-01.jpg"
        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

[Rafael]

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.

[croquemonsieur]

Cierto, no apreciaba el cambio de la imagen!
:)

[memoadian]

Ok a ver que te parece mi ejemplo

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

debes darle click a alguna imagen

[Rafael]

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.

[memoadian]

Iniciado por Rafael

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

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

Que buen efecto pasar el modelo de maya a textura jeje

[croquemonsieur]

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...)

[memoadian]

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
img{max-width:100%}
.principal{
    width:100%;
}
.galeria{
    width:100%
}
.galeria ul{
    list-style-type:none;
}
.galeria li{
    width:20%;
    margin:1.25%;
    float:left;
    cursor:pointer;
}
</style>
<script>
$(document).ready(function(){
    $('.galeria li a').click(function(){
        src = $('img', this).attr('src');
        img = $('<img>');
        img.attr('src', src);
        $('.principal').html(img);
    });
 
    var hash = window.location.hash;
    if(hash.length){
        src = $('a[href="'+hash+'"] img').attr('src');
        img = $('<img>');
        img.attr('src', src);
        $('.principal').html(img);
    }
});
</script>
<div class="principal">
    
</div>
<div class="galeria">
    <ul>
        <li>
            <a href="#imagen_1">
                <img src="http://www.fondosni.com/images/wallpapers/love_3d_design_widescreen-wide-51_1400x900.jpg"/>
            </a>
        </li>
        <li>
            <a href="#imagen_2">
                <img src="http://www.8wallpaper.com/newdesk/desk/1244009238980.jpg"/>
            </a>
        </li>
        <li>
            <a href="#imagen_3">
                <img src="http://www.zastavki.com/pictures/1440x900/2010/3D-graphics_3d_aquarium_026005_.jpg"/>
            </a>
        </li>
        <li>
            <a href="#imagen_4">
                <img src="http://www.fondos7.net/wallpaper-original/wallpapers/hongo-de-mario-bross-2055.jpg"/>
            </a>
        </li>
        <li>
            <a href="#imagen_5">
                <img src="http://1.bp.blogspot.com/-QQI9GhB6G-k/TpVyfCCh_4I/AAAAAAABdEk/jdsyIfVYAc4/s1600/halloween-wallpaper-marvel-zombies-secret-war-zombies.jpg"/>
            </a>
        </li>
        <li>
            <a href="#imagen_6">
                <img src="http://wallpaperart.org/images/Wallpaperartinterviewmartaiven/wallpaperart-1400x900.jpg"/>
            </a>
        </li>
    </ul>
</div>
 

si copias y pegas ese código en una página html cualquiera debe servir.

[croquemonsieur]

Maravilloso! voy a estudiarme eso que has puesto y os cuento :)

[croquemonsieur]

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