Lytebox otra forma...

Hace días en la entrada "Añadiendo vídeos con Lytebox" surgieron algunas preguntas que trataban sobre la forma de añadir los archivos en la plantilla. Todo está explicado aquí y pensaba actualizar la entrada pero, para no crear confusión he pensado que mejor sería explicarlo en lugar aparte.

Vamos a añadir los archivos directamente a la plantilla y en un gadget, de esta forma prescindimos de alojamiento externo y de los problemas que suelen ocasionar.

1º Copiamos el contenido de este archivo y lo pegamos en el interior de un gadget HTML/Javascript guardamos los cambios y arrastramos el gadget sobre las entradas. Lo que hicimos fue añadir el script en formato txt.

Si preferimos añadirlo directamente a la plantilla podemos añadirlo justo antes de </head> con la diferencia que añadimos lo marcado en negrita a continuación:

<script type='text/javascript'>
// <![CDATA[
Contenido de archivo
...................
...................
//]]>
</script>

2º En plantilla Edición de HTML nos situamos justo antes de </head> y pegamos el contenido de este otro archivo que son los estilos de la ventana modal.

En los estilos debemos añadir las imágenes para las funciones de la ventana modal que podéis conseguir botón derecho sobre la imagen, guardar como...

Las añadimos en los estilos teniendo en cuenta que cada imagen tienen un nombre y al mismo tiempo un color.
Por ejemplo.. donde dice:
#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

Copiamos la url de la imagen y la añadimos donde dice images/close_grey.png

Sería algo así:
#lbClose.grey { background: url(url-imagen-close_grey.png ) no-repeat; }

Como entiendo que puede parecer confuso incluir las imágenes quise aligerar un poco el trabajo, añadí las imágenes en color gris (grey) y eliminé código que no era necesario. El resultado lo podéis copiar de este archivo de texto y añadirlo justo antes de </head>

3º El resto sigue siendo lo mismo, para añadir un enlace utilizamos la etiqueta rel="lytebox"

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

¿Cómo añadimos una imagen en lugar de texto?
Sustituyendo texto o imagen por <img src="url-imagen">

Por lógica si lo que vamos a mostrar es una miniatura la imagen tendría que ser de menor tamaño que la original que mostramos en la ventana modal, para obtener la miniatura y no vernos obligados a reducir la imagen lo que podemos hacer es "obligarla" a mostrarse en un tamaño determinado.

<img style="width:150px;height:200px;"src="url-imagen"/>
Con width le damos anchura y con height altura.

En grupos de imágenes añadiendo la etiqueta rel="lytebox[gema]"
Sustituyendo gema por el nombre adjudicado al grupo de imágenes ejemplo: paisajes, flores...

<a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 3</a>

Crear un Slideshow añadiendo la etiqueta rel="lyteshow[gema]"
(Sustituir gema por el nombre adjudicado al grupo de imágenes) ejemplo: viajes, vacaciones...

<a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lyteshow[gema]" title="Título">texto o imagen 3</a>

Añadir un iframe con la etiqueta rel="lyteframe"

<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Al usar lyteframe podemos añadir barra de scroll y escoger tamaño, lo haremos con la etiqueta rev

<a href="Url-de-la-pagina" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

Y por último añadimos un vídeo

"Con Explorer los vídeos no se cargan en las páginas individuales"

<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

En negrita lo sustituimos por la url de nuestro vídeo.

La demo de estos ejemplos la podéis ver en el siguiente blog de pruebas.