Lightbox 2

He terminado por insertar en NADA mis propios scripts de Lightbox 2. Me he dedicado a "arreglarlos" de forma que no se parezcan a ninguno de los que he visto, jajajajaaaa. Le he colocado al contenedor de la imagen un borde azul (así como un fondo del mismo color al "loading") y he reducido algo las imágenes. Y es que... como resulta espectacular, es con imágenes de fondo negro, y las mías son todos dibujos realizados en cuartillas blancas de DinA4, de manera que... tenía que ver el efecto por otro sitio.

Además, he agrupado todas las imágenes, de manera que, picando en una, se puedan ver todas en la lightbox.

A ver cómo lo he hecho (y ¡OJO!: quien quiera los parámetros "normales", que se de cuenta de que tiene que arreglar el archivo lightbox.CSS a su gusto o dejar los valores que vienen por defecto). Los archivos originales podéis bajarlos desde huddletogether :

.- Unos scripts a insertar entre el head y /head de vuestra plantilla. Estos que pongo son los míos. Para tener los vuestros, sustituis el href y src del link y scripts por la URL que obtengáis cuando subáis los archivos de la lightbox:

<link href='http://junioscripts.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>



<script src='http://junioscripts.googlepages.com/prototype.js' type='text/javascript'/>



<script src='http://junioscripts.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>



<script src='http://junioscripts.googlepages.com/lightbox.js' type='text/javascript'/>

Una ADVERTENCIA en cuanto al script de scriptaculous: si bajáis sólo éste archivo, no funcionarán ni el script ni, claro está, la lightbox. Cuando os bajéis el scriptacolous, habéis de añadirle el archivo "effects". Sólo así funcionará. (Oiga: en ninguna parte te avisan de ésto... y me he vuelto chiflada intentando averigüar porqué me fallaba precisamente aquí la lightbox... hasta que "he caído de la burra", je. Quede, or tanto, el aviso, ya que nadie más lo hace).

.- Y se acabó. Guardamos la plantilla e insertamos el HTML en las imágenes, para que se nos desplieguen con la lightbox:

<a href="URL imagen grande"rel="lightbox"><img src="URL IMAGEN PEQUEÑA" border="0" alt="" /></a>

Si queréis agrupar las imágenes, como he hecho yo en NADA, sólo tenéis que añadir en cada una de ellas y al rel="lightbox", un nombre de grupo. Por ejmplo, si se trata de fotos de vuestros viajes, podéis poner de nomre al grupo eso mismo "VIAJES". De emanera que el rel de la lightbox iría, en cada imagen del grupo "viajes", así:
rel="lightbox[viajes]

Y para que quede más claro, pongo el HTML de una de mis fotos, incluída en el grupo "dibus":

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIFZd5Di70TmWYj3WnnPvDZjnNJdiNKGOLtdFqNPYfvLQKsXyFEGYofPkRHVAG0bmMuyQgAjEpRpr7i2mRcg-xPHIalfzvSez-HLTN9dTC55zDA_B-ECjMZxE6Ct7H0qPGBaoFzKINQw/s800/Mamut.jpg"rel="lightbox[dibus]"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIFZd5Di70TmWYj3WnnPvDZjnNJdiNKGOLtdFqNPYfvLQKsXyFEGYofPkRHVAG0bmMuyQgAjEpRpr7i2mRcg-xPHIalfzvSez-HLTN9dTC55zDA_B-ECjMZxE6Ct7H0qPGBaoFzKINQw/s320/Mamut.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5116107963865626738" /></a>

Es muy fácil. Lo complicado ha sido averigüar que el scriptacolous debía ir con el Effects. El resto... pan comido. Y queda fenomenal (me encantan las lightbox, lo confieso... en todas sus variedades :D )