Las galerias de fotos pueden ser realizadas con Photoshop, o con otros Softwares de diseño grafico o diseño web, pero no hay nada mejor que hacer tu propia Galeria de fotos estática, en la que muestres tus fotos, ya sea como partre de un portafolio de servicios o para compartir imagenes con tus amigos.
En el video configuramos el Sexy Lightbox2 que es una version mejorada de la famosa Galeria lightbox, ésta trabaja con Mootools y lo que me gusta de ella es el efecto de transición de arriba hacia abajo como se muestran las imágenes o las paginas html. En la primera parte veremos 2 ejemplos de Galerias efectuadas con el Sexy Lightbox, además de como descargarlo, asi como armar la tabla e insertar las imágenes de la galeria.
En esta segunda parte veremos como crear las miniaturas de las imagenes en Photoshop, y como estructurar las carpetas y Scripts necesarios, asi como la estructura de la etiqueta “a href” para crear los Slideshows.
Como lo prometí en el video acompaño esta leccion del curso con el ZIP que contiene los codigos y el ejemplo de galeria de fotos que te muestro.
Descargar Ejemplo_lightbox.zip
Asi damos por dada la leccion 11 del curso de paginas web. Cualquier duda, ya sabes, a los comentarios.
Articulos Relacionados:
Curso gratis de diseño de páginas web El curso para la creación de páginas ...
Leccion 13: Curso de paginas web En esta leccion aprederemos como utilizar ...
En este video aprenderemos a insertar una tabla dentro de una celda de otra ...
Leccion 9 del curso de paginas web con HTML, ne la que aprenderemos como ins ...
En esta leccion del curso gratis de paginas web, veremos como insertar lista ...
Informaci�n de BlogESfera.com……
Puedes valorar este post en BlogESfera.com haciendo click aqui….
Espectacular Walter!!!
Muchas gracias.
Esta lección me ha sido en particular de gran ayuda!!!
Ya la estoy reenviando a mis colegas fotógrafos!
Un abrazo
Muy bien explicado Muchas gracias!
Saludos..
Deyabu
Hola Walter
La verdad es que andaba buscando hace bastante tiempo un tipo de galeria como la que has presentado, asi que lo primero gracias. Lo segundo es que la he provado hoy y no me funciona y no se porque ya que me he bajado el ejemplo y lo he hecho tal y como lo indicas lo unico que se me ocurre es que tengo el Dreamweaver CS3 , a no ser que sea por eso no se , me salen tus imagenes se agrandan pero no bajan ni hacen ningun efecto.
Bien espero a ver si me puedes ayudar.
Un Saludo
*Por cierto da error cuando pongo una direccion de mail para poder suscribirme
Voy a revisar el ejemplo y te aviso luego. Gracias por avisar con lo de la suscripcion
Hola Walter
Te has mirado ya el ejemplo ¿puede que sea lo de las versiones ? , dime algo cuando puedas…. por cierto cuando te funcionen los enlaces tambien.
Una Saludo y gracias de antemano
Tina, he descargado el ejemplo, todo funciona.
Intenta lo siguiente:
1. Abre el archivo en Dreamweaver (no importa la version)
2. Presiona la tecla "F12" en el teclado
3. Si usas Internet Explorer, haz clic en la pestaña superior amarilla para permitir contenido bloqueado.
4. haz clic sobre las imagenes
Deberia funcionar.
Saludos
A mí me funciona bien el archivo de ejemplo que pusiste. Mil gracias por el tutorial.
Luego iré poniendo imágenes mías a ver cómo funciona, si funciona bien te duplicaré las gracias xD
efectivamente yo tambien descargué el archivo para verificar que estuviese bien y todo está perfecto. Adelante, me avisas como resultó y si puedes publicar un ejemplo sería fantástico
Hola, como va?
Che, no puedo hacer que ande, directamente me habre el html solo con la imagen. No se si puse bien el código, creo que no porque lo que veo en el video es distinto a lo que yo tengo.
Te lo paso y si podés decime:
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="sexylightbox.v2.3.mootools.min.js" type="text/javascript"></script>
<script src="sexylightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
window.addEvent('domready', function(){
new SexyLightBox({find:'sexylightbox'}); /* Por defecto, el color es negro */
new SexyLightBox({find:'sexyblanquito', color:'white', hexcolor:'#FFFFFF', captionColor:'#000'});
});
</script>
Saludos y espero tu respuesta. Dejo mi web por si querés responderme por ahí.
Olvidate de eso, logré que hacerlo andar, pero cuando lo subo al site no muestra las imágenes. Si las miniaturas.
Que garrón!
gracias Walter, ya logré hacerlo andar, el problema era que mi site está alojado en un servidor linx y tenía las extenciones .jpg en el .html como .JPG y por eso no encontraba las imágenes. Los toma como archivos distintos.
Excelente explicación y la verdad me sirvió muchísimo.
Muchas gracias de nuevo y saludos!
Acá te dejo la url por si la querés ver:
http://www.darwineventos.com.ar
Gracias a ti por publicar la solucion, lo importante es que diste con la solucion. Muchas gracias por tu participacio y espero que sigas viendo los videos y tutoriales que publico aqui. Saludos y Bendiciones
Hola Walter saludos desde Perú, solo tengo una duda, como hago para que mi galería tenga mas de tres fotos, lo que pasa que en tu ejemplo aumente 3 fotos mas y cuando le doy a la 1º foto dandole siguiente corre solo hasta la 4º y despues se pasa a la 2º como puedo hacerlo muchas gracias.
Solo debes agregar las fotos que necesites y ñadir el atributo rel="sexylightbox[gal]" dentro de la etiqueta de insercion de imagen.
Revisa el vinculo de tus imagenes y verifica que realmente estén apuntando a las imagenes ampliadas correctamente, si tienes inconvenientes publica la URL y la reviso con gusto.
Saludos y bendiciones
tengo una web que esta bien posicionada quisiera en este momento colocarle un lightbox pero no se he escuchado que el ajax y el jquery tienen problemas de posicionamiento si coloco ligtbox a las fotos de mi web esta no pocsicionara bien agradezco cualquier sujerencia
No, no hay problema ya que la pagina queda limpia y la estructura de los enlaces no interfiere con el SEO. Aunque no está de más hacer un monitoreo de la galeria en el futuro. Saludos
gracias por el aporte
De nada
Hola walter, yo de nuevo..
Hoy estuve viendo como colocar un enlace de youtube para que los videos se carguen con el sexyligthbox y la verdad no pude dar con la tecla.
Leí algo de una nueva versión, pero no la pude encontrar.
Si sabés algo de esto te agradecería muchísimo la ayuda.
Saludos y gracias de nuevo por el aporte!!!
La version del sexylightbox nueva es de pago, la version que publiqué en el tutorial es la gratuita pero lo unico que soporta son imagenes.
Estoy probando con lightwindow un framework espectacular, soporta imagenes, videos no solo de youtube sino desde tu server y vimeo, y por supuesto las imagenes.
En breve sacaré un tutorial para enseñar como utilizarlo, pero puedes adelantarte a descargarlo y hacer tus propias pruebas.
La version de descarga y el tutorial lo encuentras en: http://www.p51labs.com/lightwindow/
Saludos y bendiciones
Grande Walter querido!
Vamos a ver que pasa con esto, si le encuenttro la vuelta te aviso.
Lo que necesites ya sabés.
Abrazo y gracias de nuevo!
De nada, cuando publique el tuto te aviso XD