Comunidad de diseño web y desarrollo en internet online

Contenedor efecto slide para porfolio

Citar            
MensajeEscrito el 13 Ago 2012 11:48 am
Hola, estoy preparando mi nuevo portfolio en HTML5 y CSS3. Me gustaría saber como a partir de las miniaturas de un portfolio de trabajos se crea una nueva caja con efecto slide vertical cargando las fotos y textos del trabajo seleccionado, dejando las miniaturas en su parte inferior, listas para hacer clic sobre otra. Lo encuentro muy rápido para el visitante.

Veo que el código contiene todos los trabajos pero sólo se cargan cuando clicas sobre las miniaturas.

El ejemplo que os pongo es de cargocollective, pero creo que la mayoría sus plantillas tienen este efecto.

Ejemplo: maartendonders.com

No se que nombre tiene este efecto para poder buscar info y tutoriales.

¿Cómo busco? ¿es un jQuery?

Muchas gracias

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Ago 2012 06:03 pm
no veo ningún efecto especial, solo son varias imágenes en miniatura con enlace hacia otra pagina que contiene el detalle del proyecto, con el html y css de siempre lo puedes hacer.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 13 Ago 2012 06:55 pm
Tienes razón, perdonen. El efecto de caja deslizante que busco es ESTE que se crea al abrir alguna miniatura.

Un nuevo box es creado para cargar el contenido de la miniatura seleccionada.

Saludos

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Ago 2012 11:04 pm

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 14 Ago 2012 04:40 pm
HtrMancera muchas gracias. No era eso lo que necesitaba, igualmente usaré una página por proyecto. Lo que yo quiero es tener las 30 miniaturas del portfolio en la página principal pero también debajo de cada uno de los proyectos, así cuando bajas hasta abajo y te has visto todas las fotos de un proyecto te encuentras con las miniaturas para entrar en otro, lo encuentro muy rápido para el visitante. Como he leido que una vez se carguen las miniaturas una vez ya quedan en caché aunque entre en páginas diferentes ya no me parece una carga excesiva.

Lo que quería era tener todas las miniaturas en una única página y abrir un box que saliera de la nada cargando el contenido de un proyecto tras pulsar una miniatura. La idea era tener un único bloque de miniaturas y no uno por página de proyecto, yo al menos no se la solución, para no tener que copiar/pegar en todas las páginas de cada proyecto cada vez que añada un trabajo al portfolio. De entrada empiezo con unos 20 proyectos pero iré añadiendo...

Se que en PHP se hace con include pero con html normal no lo se, miraré si hay algun plugin de jQuery para hacer un bloque de miniaturas externo y cargarlo mediante jQuery en cada una de las páginas, así sólo tengo que editar una única vez.

Muchas gracias

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 14 Ago 2012 08:33 pm
usando ajax y las funciones de jquery slideDown y un smoth scroll usalos combinados

Por Eclypse

Claber

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Ago 2012 09:31 pm
Muchas gracias Eclypse era lo que estaba buscando :wink:

Lo que no consigo saber ni leyendo: http://api.jquery.com/slideDown/ es si todo lo que está oculto hasta la llamada mediante el slideDown si es cargado o no al cargar la página. En mi caso que tendré como mínimo 20 articles ocultos para los proyectos del portfolio y cada uno con varias fotos de gran tamaño. Si la carga se realiza de forma completa al entrar en la página sería muy perjudicial.

¿Con este método se cargan todas las capas al principio o sólo se carga la que llamamos mediante el plugin?

Muchas gracias

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 15 Ago 2012 10:50 pm
El slideDown es solo una animación, trabaja con elementos previamente cargados en el DOM.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 16 Ago 2012 09:36 am
Gracias HtrMancera, entonces no me sirve. Es totalmente inutil y lento cargar todas las imágenes de todos los proyectos de la web si el visitante luego sólo entra a ver 2 proyectos.

¿Existe alguna solución que cargue sólo la correspondiente a la miniatura que clica el visitante?

Muchas gracias

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 16 Ago 2012 11:00 am
Creo que una solución al problema que planteo en el mensaje anterior, aunque no la mejor, sería hacer ese efecto que he visto en varios blogs que conforme vas bajando el scroll se van cargando las imágenes con un fade in. Así no se cargaría más que el layout ¿como se llama este efecto?

Mucho mejor sería cargar solamente los divs en el momento que el visitante lo solicita clicando sobre la miniatura ¿hay algun plugin que haga esto?

También me gustaría saber como encontrar yo mismo los plugins de jQuery necesarios para no tener que molestar en el foro cada vez ¿cómo lo hacéis? hay tantos que pierdo mucho tiempo navegando por la web de jQuery leyendo y viendo ejemplos en vivo pero me parece muy lento este tipo de búsqueda y por ahora no encuentro lo que busco ¿Hay alguna web más visual, no creo que os lo sepáis de memoria? ¿o si? :oops:

Muchas gracias de nuevo.

Por superlativo

15 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.