Muchas veces queremos hacer efectos que sorprendan en nuestras páginas Web, como por ejemplo, que aparezca un pop up que muestre alguna imagen u otra página sin perder el contenido de la página que mostramos y con un agradable efecto visual.
Uno de los plugins que sirve y bastante para este propósito es Lytebox. Es configurable y con muy buenos efectos.
Esta es la página del proyecto: http://dolem.com/lytebox/
Primero descargamos el paquete con el script en JavaScript lytebox.js y la hoja de estilo CSS lytebox.css.
Colocamos en el <head> los siguientes llamados, de esta forma:
<head>
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen"/> </head>
Si no queremos descargar el paquete y usarlo remoto, en el llamado sólo cambian la dirección:
<head>
<script type="text/javascript" language="javascript" src="http://dolem.com/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://dolem.com/lytebox/lytebox.css" type="text/css" media="screen"/> </head>
El segundo paso es colocar el link donde queramos. Hay varios casos, que se engloban en: mostrar imagenes y mostrar páginas.
1- Mostrar imágenes
Para una sóla imagen, el link va de la siguiente forma:
<!-- Comentario: El atributo rel debe indicar lytebox para que el plugin lo tome en cuenta -->
<a href="ruta/imagen.jpeg" rel="lytebox" title="Descripción de la imagen"> Contenido o imagen </a>
Para un grupo de imágenes, el link es así:
<!-- Comentario: El atributo rel debe indicar lytebox y el índice a lo que se refiere el grupo de imágenes. Es decir, si tenemos un grupo de imágenes que se refieren a ciudades, el rel debería decir: lytebox[ciudades] -->
<a href="ruta/imagen-1.jpeg" rel="lytebox[ciudades]" title="Maracaibo"> Contenido o imagen </a>
<a href="ruta/imagen-2.jpeg" rel="lytebox[ciudades]" title="Ciudad Ojeda"> Contenido o imagen </a>
Para un grupo de de imágenes en secuencia de reproducción, como una presentación de Impress o PowerPoint.
<!-- Comentario: Es casi lo mismo que el anterior, pero ahora se usa lyteshow en rel y la reproducción es automática. E igual que el anterior, el índice debe indicar a qué se refiere el grupo de imágenes. Es decir, si tenemos un grupo de imágenes que se refieren a ciudades, el rel debería decir: lyteshow[ciudades] -->
<a href="ruta/imagen-1.jpeg" rel="lyteshow[ciudades]" title="Caracas"> Contenido o imagen </a>
<a href="ruta/imagen-2.jpeg" rel="lyteshow[ciudades]" title="El Tigre"> Contenido o imagen </a>
2- Mostrar páginas
Para una sóla página:
<!-- Comentario: En este caso, rel se refiere a un marco, lyteframe, el título (title) igualmente a la descripción de la página, y rev indica los atributos de ancho, alto y si va a poseer barra de desplazamiento -->
<a href="http://www.debian.org" rel="lyteframe" title="Página de Debian" rev="width: 400px; height: 300px; scrolling: no;">Proyecto Debian</a>
Para varias páginas, como un paginador:
<!-- Comentario: Igual que en el caso anterior, rel se refiere a un marco, lyteframe, el índice se refiere a las páginas a mostrar, por ejemplo: "libre", porque son acerca de Software Libre. El título (title) igualmente a la descripción de la página, y rev indica los atributos de ancho, alto y si va a poseer barra de desplazamiento. -->
<a href="http://www.debian.org" rel="lyteframe[libre]" title="Páginas de Debian" rev="width: 900px; height: 650px; scrolling: yes;">Proyecto Debian</a>
<a href="http://www.gnu.org/" rel="lyteframe[libre]" title="Página de GNU" rev="width: 900px; height: 650px; scrolling: yes;">Proyecto GNU</a>
<a href="http://www.gnu.org/" rel="lyteframe[libre]" title="Página de GNU" rev="width: 900px; height: 650px; scrolling: yes;">Proyecto GNU</a>
Espero que les haya ayudado en algo y nos vemos en otra publicación.
No hay comentarios:
Publicar un comentario