Lytebox

Pruebade contenido
en páginasindividuales

Esto es la demostración de como funciona la ventana modal de Lytebox. Si quieres ver todos los detalles visita esta entrada.

3º Para añadir a 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.