Slimbox extended Version

Lo que cambia respecto de la versión que ya conocemos, es que en ésta aparece rayada en vertical la sección de "previo" y siguiente", de forma que podemos distinguir bien donde hay que picar para seguir o ir hacia atrás en las imágenes. Además, puede abrir también iframes.

Es rápida y funciona con una librería parecida a Mootools, pero no exactamente... de ahí que no funcione en absoluto cuando se colocan los scripts cerca de un script Mootools (quien avisa no es traidor). Podéis ver un ejemplo en este blog de pruebas. El hack originalAquí, donde podéis también descargar lo scripts y las imágenes.

Así se hace:

.- CSS:

Haremos un lin con éste y las imágenes:
<link href='http://.../slimbox_ex.css' media='screen' rel='stylesheet' title='slimbox'/>

.- SCRIPTS: Como he dicho más arriba, bien lejos de cualquier Mootools.

<script src='http://.../lib.js' type='text/javascript'/>

<script src='http://.../slimbox_ex.js' type='text/javascript'/>

.- HTML: Es exactamente el mismo que para la Slimbox común.

<a href="http://.../Nido.jpg" rel="lightbox[cosas]"><img src="http://.../Nido.jpg" width=50px height=50px style="border: none;" alt="Nido" /></a><a href="http://.../Arturo19.jpg" rel="lightbox[cosas]" title="Arturo"><img src="http://.../Arturo19.jpg" width=50px height=50px style="border: none;" alt="Arturo" /></a><a href="http://.../WaterIdyllZatka.jpg" rel="lightbox[cosas]" title="WaterYdill"><img src="http://.../WaterIdyllZatka.jpg" width=50px height=50px style="border: none;" alt="WaterYdill" /></a><a href="http://.../Yo%2Bmisma.jpg" rel="lightbox[cosas]" title="Yo_misma"><img src="http://.../Yo%2Bmisma.jpg" width=50px height=50px style="border: none;" alt="Yo_misma" /></a>

Como ren toda Lightbox, el "rel" llevará una "contraseña" entre corchetes, que desplegará todas las imágenes qye la lleven.

No hay más secreto...