Cargar contenido en div según su visibilidad

[Davi91]

Buenas señores, estoy re-modelando mi web y me gustaría mostrar una sección con imágenes que desplieguen un detalle de cada imagen, para que nos entendamos este sería el mark-up.

Código HTML:

<div class="wrap">
      <div class="thumb" id="thumb01">Thumbail</div>
      <div class="detail" id="thumb01">Thumbail</div>
      <div class="thumb" id="thumb02">Thumbail</div>
      <div class="detail" id="thumb02">Thumbail</div>
      <div class="thumb" id="thumb03">Thumbail</div>
      <div class="detail" id="thumb03">Thumbail</div>
</div>
 

Entendiendo que el contenido de las clases "detail" estarían ocultas y se mostrarían al hacer click en los "thumb" correspondientes.

El Problema
Todo esto es sencillo, pero al final quedaría una página muy pesada ya que el navegador tendría que cargar todas las clases "detail"

Lo que busco
Me gustaría poder hacer que el navegador sólo cargue los "detail" que yo active a través de su "thumb".

En resumen, sólo cargar el contenido de las capas cuyo display sea "block".

Espero sus respuestas, gracias de antemano!

[Franz1628]

Esto deberías hacerlo con AJAX http://librosweb.es/ajax/
o tambien podrías usar JQUERY que facilita el uso de AJAX

[Carlangueitor]

Y algo fuera del tema... los id's deben ser identificadores únicos, no los repitas.


Saludos

[Davi91]

Gracias por contestar;

Respondiendo primero a Carlangueitor;
Lo escribí rápido y me faltó cambiarle ese nombre, el código correcto sería....

Código HTML:

<div class="wrap">
      <div class="thumb" id="thumb01">Thumbail</div>
      <div class="detail" id="detail01">Detail</div>
      <div class="thumb" id="thumb02">Thumbail</div>
      <div class="detail" id="detail02">Detail</div>
      <div class="thumb" id="thumb03">Thumbail</div>
      <div class="detail" id="detail03">Detail</div>
</div>
 

Iniciado por Franz1628

Esto deberías hacerlo con AJAX http://librosweb.es/ajax/
o tambien podrías usar JQUERY que facilita el uso de AJAX

No tengo idea de Ajax y no soy programador como para ponerme a aprenderlo. En cuanto a programación me manejo un poco con php y jQuery...

¿No hay plugin por jQuery?

Por ejemplo, yo voy controlando las clases mediante este código...

Código Javascript:

$(function() {  
    $("#thumb01").click(function() {
        $("#detail01").attr('class', 'selOn');
        $("#detail02").attr('class', 'selOff');
        $("#detail03").attr('class', 'selOff');
        $("#detail04").attr('class', 'selOn');
        $("#detail05").attr('class', 'selOff');     
    });
});
 

Con las clases selOn y selOff controlo normalmente lo siguiente, para poder aplicarle transiciones de CSS3...

Código CSS:

.selOff {
            opacity: 0;
            height: 0px;
}
.selOn {
            opacity: 1;
            height: 600px;
}
 

Espero no tener ninguna errata ya que no estoy depurando el código aún

[Davi91]

Nada??

Un ejemplo de algo que quiero hacer es esta web, a la hora de desplegar cada trabajo [http://www.lucasnikitczuk.com.ar/]

Seguro que a menor nivel ya que no soy programador pero algo es algo!

[Davi91]

Por si alguien seguía el hilo, esto es exactamente lo que quiero hacer.

http://mhou.es/portafolio/