Foros del Web » Programando para Internet » Javascript »

Cargar contenido en div según su visibilidad

Estas en el tema de Cargar contenido en div según su visibilidad en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/09/2013, 14:20
 
Fecha de Ingreso: noviembre-2011
Ubicación: Sevilla
Mensajes: 48
Antigüedad: 12 años, 4 meses
Puntos: 1
Pregunta Cargar contenido en div según su visibilidad

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:
Ver original
  1. <div class="wrap">
  2.       <div class="thumb" id="thumb01">Thumbail</div>
  3.       <div class="detail" id="thumb01">Thumbail</div>
  4.       <div class="thumb" id="thumb02">Thumbail</div>
  5.       <div class="detail" id="thumb02">Thumbail</div>
  6.       <div class="thumb" id="thumb03">Thumbail</div>
  7.       <div class="detail" id="thumb03">Thumbail</div>
  8. </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!
  #2 (permalink)  
Antiguo 01/09/2013, 17:10
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 17 años
Puntos: 26
Respuesta: Cargar contenido en div según su visibilidad

Esto deberías hacerlo con AJAX http://librosweb.es/ajax/
o tambien podrías usar JQUERY que facilita el uso de AJAX
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #3 (permalink)  
Antiguo 01/09/2013, 18:19
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Cargar contenido en div según su visibilidad

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


Saludos
__________________
Grupo Telegram Docker en Español

Última edición por Carlangueitor; 01/09/2013 a las 19:41
  #4 (permalink)  
Antiguo 02/09/2013, 01:22
 
Fecha de Ingreso: noviembre-2011
Ubicación: Sevilla
Mensajes: 48
Antigüedad: 12 años, 4 meses
Puntos: 1
Sonrisa Respuesta: Cargar contenido en div según su visibilidad

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:
Ver original
  1. <div class="wrap">
  2.       <div class="thumb" id="thumb01">Thumbail</div>
  3.       <div class="detail" id="detail01">Detail</div>
  4.       <div class="thumb" id="thumb02">Thumbail</div>
  5.       <div class="detail" id="detail02">Detail</div>
  6.       <div class="thumb" id="thumb03">Thumbail</div>
  7.       <div class="detail" id="detail03">Detail</div>
  8. </div>


Cita:
Iniciado por Franz1628 Ver Mensaje
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:
Ver original
  1. $(function() { 
  2.     $("#thumb01").click(function() {
  3.         $("#detail01").attr('class', 'selOn');
  4.         $("#detail02").attr('class', 'selOff');
  5.         $("#detail03").attr('class', 'selOff');
  6.         $("#detail04").attr('class', 'selOn');
  7.         $("#detail05").attr('class', 'selOff');    
  8.     });
  9. });

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

Código CSS:
Ver original
  1. .selOff {
  2.             opacity: 0;
  3.             height: 0px;
  4. }
  5. .selOn {
  6.             opacity: 1;
  7.             height: 600px;
  8. }

Espero no tener ninguna errata ya que no estoy depurando el código aún
  #5 (permalink)  
Antiguo 03/09/2013, 14:04
 
Fecha de Ingreso: noviembre-2011
Ubicación: Sevilla
Mensajes: 48
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: Cargar contenido en div según su visibilidad

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!
  #6 (permalink)  
Antiguo 25/09/2013, 04:25
 
Fecha de Ingreso: noviembre-2011
Ubicación: Sevilla
Mensajes: 48
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: Cargar contenido en div según su visibilidad

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

http://mhou.es/portafolio/

Etiquetas: contenido, según, visibilidad
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 07:59.