Lightbox nos permite enlazar a imágenes sin salir de una web

Cyberfrancis 30 de diciembre de 2005 5 comentarios

programacion.jpgLightbox es un script de fácil instalación que nos permite enlazar desde nuestros sitios web a imágenes sin tener que abrir ventanas o pestañas del explorador. Para ello presionamos sobre un enlace en concreto, se nos oscurecerá la web y nos saldrá en primer plano la imagen. Despues, presionamos la imagen y volvemos a la web en primer plano.

Muy útil para no tener que abrir pestañas o ventanas del navegador, haciendo la navegación por el sitio web más atractiva ya que en el sitio del creador nos da las herramientas y las instrucciones correspondientes para insertarlos en nuestra web. Yo ya lo tengo instalado en mi wordpress personal y funciona:

  • Insertar el script en tu cabecera, si usas wordpress lo insertas en header.php
  • Añade a tu enlace la etiqueta rel=”lightbox”:
    image #1
  • Inserta unas líneas de código en tu hoja de estilos:
    #lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    }
  • Si deseas crear el efecto de sombras, deberás de usar un archivo PNG y un código extra en tu hoja de estilos:
    #overlay{ background-image: url(overlay.png); }
  • html #overlay{
    background-color: #000;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/images/overlay.png”, sizingMethod=”scale”);
    }
  • Si deseamos introducir la barra de carga de la imagen deberemos comprobar que la imagen loading.gif este correcto, y para ello entramos en el script lightbox.js y buscamos la línea:
    var loadingImage = ‘loading.gif’;
    para modificar la ruta en caso de que la imagen esté en otro directorio.

    Estas mismas intrucciones y la descarga del script y de las imágenes la tenéis en la web del autor, cuyo enlace os pondremos al final de este artículo:

    Enlace | Lightbox JS

Más noticias sobre: Web

Comentarios

  • 1 Avatar
    PennyWise | 1 estrellas
    ↓

    La verdad q el script es una gozada y vo ya usarlo, pero habeis probado a usarlo con Iexporer... la verdad que da un poco de asco, salta la barrita de seguridad avisando de un complemento activeX que no deja ejecutar por lo que da error... ¿alguna solucion a esto? lo digo porque no todos usan Firefox, como algunos de nosotros... yo mismo a veces tiro de Iexplore porque en mi curro lo necesito ;)

    30 dic 2005 17:15 Permlink
    normal
  • 2 Avatar
    cyberfrancis | 1 estrellas
    ↓

    Como dice en la web del autor, es necesario usar navegadores modernos, y ya sabemos que Internet Explorer no es nada moderno ;)

    30 dic 2005 17:21 Permlink
    normal
  • 3 Avatar
    alex | 1 estrellas
    ↓

    muy bueno y ademas util, tambien uso wordpress asi que seguire tus recomendaciones

    30 dic 2005 22:02 Permlink
    normal
  • 4 Avatar
    Indy | 1 estrellas
    ↓

    Yo uso explorer, y lo he visto bien, el problema me ha venido cuando voy a ver las fotos por segunda vez, se queda pillado cargando...

    31 dic 2005 12:26 Permlink
    normal
  • 5 Avatar
    Hector | 1 estrellas
    ↓

    Bueno, la verdad es que el primer contacto con estas librerias de javascript es una gozada, pero siempre hay que intentar sacarles los fallos, sabeis de alguna pega que pueda tener? o limitación, a parte de la de su uso claro.

    Saludos.

    10 oct 2006 09:29 Permlink
    normal

Destacado

Firefox 3.5

Top 10

Lo+leido

  1. Google Chrome OS: torpedeando a Microsoft donde más le duele
  2. Google Chrome OS, sistema operativo para ultraportátiles
  3. Google Chrome OS: Lo siento chicos, pero no queda pastel para todos
  4. Oído cocina, otra ración de Freetos
  5. ViGlance: la superbarra de Windows 7, para Windows XP
  6. VLC Media Player 1.0 "Goldeneye"
  7. Quecocinohoy.com, las mejores recetas de cocina a elegir
  8. 10 alternativas a Pirate Bay
  9. El precio de Windows 7
  10. Microsoft te anima a usar Internet Explorer 8 en "modo porno"

Lo+votado

  1. Screenlets, los widgets del escritorio GNU/Linux (Screencast)
  2. Google Chrome OS: torpedeando a Microsoft donde más le duele
  3. Firefox 3.5 versión final ya disponible
  4. ¿Qué hay de nuevo en HTML5?
  5. Moovida, el nuevo nombre y diseño de Elisa Media Center (Screencast)
  6. 10 alternativas a Pirate Bay
  7. Gmail ahora permite adjuntar archivos de hasta 25 MB
  8. Microsoft Security Essentials (Morro) sale bien evaluado en los primeros tests
  9. Global Gaming Factory X AB compra The Pirate Bay
  10. Liberado VirtualBox 3.0 final

Lo+comentado

  1. El precio de Windows 7
  2. Google Chrome OS: Lo siento chicos, pero no queda pastel para todos
  3. Firefox 3.5 versión final ya disponible
  4. Google Chrome OS: torpedeando a Microsoft donde más le duele
  5. Vulnerabilidad crítica en ActiveX de Internet Explorer 8
  6. 10 alternativas a Pirate Bay
  7. Liberado VirtualBox 3.0 final
  8. ViGlance: la superbarra de Windows 7, para Windows XP
  9. Imagen de la semana: Clever Windows, una nueva idea para GNOME 3.0
  10. Microsoft Security Essentials (Morro) sale bien evaluado en los primeros tests

Suscríbete