ShadowBox - Ventanas elegantes para el contenido de tu web

Si te interesa darle un toque de elegancia y calidad de visualización a tu sitio Shadowbox puede ser una gran forma de empezar. Este Javascript te permite colocar en una ventana muy vistosa varios formatos de archivos como por ejemplo imágenes, flash, videos y sitios web.
La instalación es realmente muy sencilla, en esta entrada veremos un ejemplo de utilización con imágenes para PWG y también la ruta para colocar el script en nuestro propio servidor.


1º- Vamos a "Editar diseño"/Configuraciones avanzadas"/"Texto por encima de la página" y pegamos este código:


<link rel="stylesheet" type="text/css" href="http://tokarg.uuuq.com/shadowbox-build-3.0b/shadowbox.css">

<script type="text/javascript" src="http://tokarg.uuuq.com/shadowbox-build-3.0b/shadowbox.js"></script>

<script type="text/javascript">

Shadowbox.init();

</script>


2º- Vamos a "Controlar páginas" y en una de nuestras páginas presionamos el botón "Fuente HTML":



Y pegamos este código:


<a href="URL DE LA IMAGEN GRANDE" rel="shadowbox[Vacation]"><img border="0" src="URL DE LA IMAGEN PEQUEÑA"></a>


Tenemos que tener 2 imágenes una que sería la vista previa (la pequeña) y otra grande que será la que veremos al desplegarse la ventana.
Podemos subir esas imágenes haciendo click aquí.

Si quieres agregar más imágenes y que las mismas puedan pasarse desde la misma ventana deberías repetir el mismo código debajo del anterior, por ejemplo:


<a href="http://img.webme.com/pic/t/tokarg/head03.png" rel="shadowbox[Vacation]">The Beach</a>

<a href="http://img.webme.com/pic/t/tokarg/head03.png" rel="shadowbox[Vacation]">The Pier</a>


En ese caso no he utilizado imagen pequeña sino un simple texto que al ser clickeado abrirá las imágenes.

Aquí puedes ver un ejemplo de utilización:

CLICK AQUÍ

Desde el sitio oficial tienes los recursos que puedes descargar y subir a tu propio servidor si no deseas depender del mío ;)


Hasta pronto!

Leer más