SuperGalería (I)

Al final... resulta que he pasado a Blogger las tres versiones que hay de la galería en cuestión.

Pegas: .- los scroller (que no se visualizan en Wordpress, pero sí en Blogger).
.- Voy a tener que poner (uf) los scripts de las tres galerías, porque no hay versión para descargarse, de momento, de ninguna, salvo la última, que... es en PHP (evidentemente... puesto que el hack no está pensado para Blogger, precisamente...).

En dos de las galerías he colocado un "guardar" que contiene la descarga del script de la galería en cuestión. Pero ese enlace sólo funciona en Firefox, no en IE (ya me está "tocando las narices" esta dichosa manía de IE de cargarse todos los estándares web habidos y por haber).

Así que, en fín: quienes tengan Firefox pueden descargarse el script de esta galería directamente en el "guardar" que hay en la esquina superior derecha de "SuperGalería", la versión que voy a explicar ahora:

.- FUNCIONALIDADES:
Esta galería es la última versión resuelta por poudro, con las sugerencias, pruebas y diseño de horseweapon

Esta, como todas las demás versiones, termina por llevar una ventana "ajustable"; efectos Morph para las imágenes; tooltip "flotante" con el título y/o descripción de cada imagen, y...
EFECTO "DRAGGABLE" (Drag&drop:recoger-soltar"), que funciona sobre la imagen que se visualiza en thumb (para entendernos: la imagen "grande"), que se recoge y se suelta en el interior de la barra gris "guardar". Allí queda almacenada, como un pequeño gif, cada imagen que queremos guardar; y al picar en "guardar" se almacena en nuestros archivos. Es muy curioso e interesante este aspecto de la galería :) .

.- Moviendo el ratón sobre cada imagen, se activa el zoom.

.- Clickando sobre cada imagen, ésta se abre.

.- Una vez abierta la imagen, puedes volver al índice de imágenes picando sobre ella.

.- Puedes obtener la URL de la imagen desplegada clickando en "Link directo".

.- Como digo, puedes elegir las imágenes que quieres guardarte, clickando sobre ellas y desplazando el "drag-drop" a la barra lateral de color gris que hay a la derecha. Le das a "guardar" en la barra y ya tienes tu imagen.

Si tenéis alguna duda, explica muy bien, y gráficamente, las funcionalidades de la galería su autor en Su página


Para realizar esta galería, necesitamos:
.- CSS (se puede cambiar a voluntad)

<style type='text/css'>

body,html{

background-color:black;

height:90%;

margin:0;

padding:0;

}



#global{

border:1px solid white;

width:90%;

height:80%;

margin:0 auto;

position:relative;

overflow:auto;

background-color:black;

visibility:hidden;

}



.loading {

background: url(http://.../loadingcss.gif) no-repeat center top;

}



a {

color: white;

text-decoration: none;

}



a:hover {

text-decoration: underline;

}





button {

margin: auto;

cursor: pointer;

border: 1px solid white;

padding-left: 2px;

padding-right: 2px;

z-index: 100;

background: black;

color: white;

margin-top:2px;

}



button:hover {

background: white;

color: black;

}



</style>

.- SCRIPTS: Aunque, en principio estaba pensado para Mootools básico, resuiltó no funcionar en IE, de manera que se optó por el "truncate"-

<script src='http://junioscripts.googlepages.com/mootools-trunk-1512.js' type='text/javascript'/>

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

window.addEvent(&#39;domready&#39;,function(){

var gallery = new SuperGallery(&#39;global&#39;,{autoHeight:false});

});

</script>

Abrid los scripts y subidlos a vuestro servidor. Previamente, fijaos bien en el "Gallery.js", porque aquí hay mucho que arreglar... desde el "html" de cada uno de los botones (que yo he pasado a español), pasando-IMPORTANTE-por la URL del primer "guardar", que yo he llenado con la URL del script para esta galería, a fín de que quien use Firefox pueda descargárselo allí directamente. Terminando por los anchos. altos y demás parámetros (colores, opacidades, etc) de la ventana y las imágenes. Además, el "guardar" de la barra de imágenes refiere a una lista de las imágenes presentadas en la galería, a fín de descargarlas directamente desde allí, una vez puestas en la barra mediante el "draggable" (aunque también, y más cómodamente, se puede picar en "link directo" cuando se abre una imagen y picar en la url para guardarla).
Como siempre: ABRID LOS SCRIPTS Y SUBIDLOS A VUESTRO PROPIO SERVIDOR. EN ESTE CASO HE REHECHO CIENTOS DE VECES LOS SCRIPTS Y, SI ME DA POR VOLVER A REHACERLOS, PERDÉIS LA GALERÍA... mira que no me canso de avisar...

.- HTML:

<div id='global'>



<a href='http://.../PeterGran.jpg'><img alt='Peter' src='http://.../PeterGran.jpg'/></a><a href='http://.../Cabecera3Re.png'><img alt='Cabecera' src='http://.../Cabecera3Re.png'/></a><a href='http://.../Cabecera3.gif'><img alt='Cabecera2' src='http://.../Cabecera3.gif'/></a><

... etc...
</div>

En realidad, una vez entendido su funcionamiento, no es una galería difícil de insertar (aún pensada para php). Lo más tedioso es incluir las imágenes y sus descripciones, así como conseguir y revisar el script-Gallery para que funcione en Blogger y para adaptarlo a nuestras necesidades...

Otro día, la segunda versión de la galería (qué rollo... uf...)