Crear una galeria de fotos con Sexy lightbox

Las galerias de fotos pueden ser realizadas con Photoshop, o con otros Softwares de grafico o web, pero no hay nada mejor que hacer tu propia estática, en la que muestres tus fotos, ya sea como partre de un portafolio de servicios o para compartir imagenes con tus amigos.

leccion11 Crear una galeria de fotos con Sexy lightbox

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 . En la primera parte veremos 2 ejemplos de Galerias efectuadas con el , 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:

Walter Alvarez
Presidente de Soluciones SEO empresa de diseño web y hospedaje web. Dedicado a la enseñanza de Diseño Web y escribe temas de Superacion Personal como parte integral del Marketing de un negocio en Internet.


23 Responses to “Crear una galeria de fotos con Sexy lightbox”

  1. Informaci�n de BlogESfera.com……

    Puedes valorar este post en BlogESfera.com haciendo click aqui….

  2. Ignacioh dice:

    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

  3. Deyabu dice:

    Muy bien explicado :D Muchas gracias!
    Saludos..
    Deyabu

  4. tina dice:

    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

      • tina dice:

        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

  5. Sergio dice:

    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

  6. cache dice:

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

  7. cache dice:

    Olvidate de eso, logré que hacerlo andar, pero cuando lo subo al site no muestra las imágenes. Si las miniaturas.

    Que garrón!

  8. cache dice:

    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

  9. Salvador dice:

    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

  10. Andres dice:

    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

  11. ulisesart dice:

    gracias por el aporte

  12. cache dice:

    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

  13. cache dice:

    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!

Leave a Reply

Copyright © 2011 · Tutoriales y Photoshop, All Rights Reserved.
Powered by Free Premium Wordpress Themes.