Las bibliotecas de JavaScript, como MooTools, pueden ahorrar mucho tiempo al desarrollar un sitio. En este tutorial, te mostraré cómo combinar muchas de las funciones de MooTools para crear una bonita galería de fotos..

Paso 1 - Configura tu HTML, CSS y MooTools

Antes de comenzar, echa un vistazo a la demo. Será más fácil comprender el propósito de cada paso si conoce el objetivo..

Primero, cree un archivo HTML simple y agregue un enlace a la hoja de estilo (main.css) y a dos archivos JavaScript (mootools.js y main.js). Crea esos archivos en el mismo directorio. Luego ve al MooTools Core Builder. Seleccione todos los componentes y luego haga clic en Descargar. Esto descargará mootools-1.2-core.js. Copie el contenido de ese archivo en el archivo mootools.js. Luego, acceda al MooTools More Builder, seleccione todos los componentes y haga clic en Descargar. Copia los contenidos de nuevo y pégalos en la parte inferior de mootools.js.

(Nota: la mayoría de los sitios, incluida esta galería de fotos, no necesitan todos los componentes. Sin embargo, usarlos al principio y luego recortar los que no necesita facilita mucho el desarrollo. Si estuviera en En la mitad de un proyecto y se dio cuenta de que quería que se incluyera una característica diferente en uno de los componentes que no descargó, tendría que volver a descargarla antes de continuar. De esta manera, solo tendrá que volver a descargarla una vez que haya finalizado.

Paso 2 - Crear el diseño

Ahora tenemos que crear el diseño para nuestra galería de fotos usando HTML y CSS. Agregue el siguiente código dentro de las etiquetas del cuerpo de su archivo HTML.

 
Galería de fotos
 
 
      
 
 
 
Desplazarse hacia arriba
 
Desplazarse hacia abajo
 
 
 
Izquierda
 
Derecha
 
 

Esto crea un contenedor para rodear todo el código del sitio, un título, una sección para imágenes y controles para el sitio. ¿Por qué todas las etiquetas img vacías? En el CSS a continuación, les damos tamaños y un color de fondo diferente, para que podamos probar la galería sin tener que agregar ni cambiar el tamaño de las imágenes reales. Ahora agregamos el CSS al archivo main.css.

* margen: 0; relleno: 0; esquema: ninguno;  .hide mostrar: ninguno;  cuerpo fondo: # 000; color: #fff; relleno: 30px; Familia tipográfica: Arial, Helvetica, sans-serif;  #container width: 596px; altura: 400px; fondo: # 111; desbordamiento: oculto; borde: 1px sólido # 333;  h1 fondo: # 222; ancho: 592px; altura: 29px; relleno-izquierda: 7px; borde inferior: 1px sólido # 333; tamaño de fuente: 18px; línea de altura: 29px; fuente-peso: normal;  #picture_section relleno: 7px 0 7px 7px; ancho: 590px; altura: 332px; desbordamiento: oculto;  #inside width: 590px; altura: 332px;  #picture_section img border: 0; altura: 57px; ancho: 111px; flotador izquierdo; fondo: # 333; margen inferior: 7px; margen derecho: 7px; cursor: puntero;  #controls_vert background: # 222; ancho: 600px; altura: 23px; borde superior: 1px sólido # 333;  #controls_horz background: # 222; ancho: 600px; altura: 23px; borde superior: 1px sólido # 333;  #up altura: 10px; ancho: 10px; margen derecho: 7px; fondo: url (up.jpg) no-repetir; texto-sangría: -9999px; flotador izquierdo; margen: 7px; margen inferior: 6px; cursor: puntero;  #down altura: 10px; ancho: 10px; fondo: url (down.jpg) no-repetir; texto-sangría: -9999px; flotador izquierdo; margen: 7px; margen izquierdo: 0; margen inferior: 6px; cursor: puntero;  #left altura: 10px; ancho: 10px; fondo: url (left.jpg) no-repetir; texto-sangría: -9999px; flotador izquierdo; margen: 7px; margen inferior: 6px; cursor: puntero;  #right altura: 10 px; ancho: 10px; fondo: url (right.jpg) no-repetir; texto-sangría: -9999px; flotador izquierdo; margen: 7px; margen izquierdo: 0; margen inferior: 6px; cursor: puntero;  div # up.deactivated opacity: 0.2; filtro: alfa (opacidad = 20); cursor: por defecto;  div # down.deactivated opacity: 0.2; filtro: alfa (opacidad = 20); cursor: por defecto;  div # right.deactivated opacity: 0.2; filtro: alfa (opacidad = 20); cursor: por defecto;  div # left.deactivated opacity: 0.2; filtro: alfa (opacidad = 20); cursor: por defecto; 

Aquí está lo que parece con eso aplicado.

Debido a que la galería comienza en la parte superior, la flecha hacia arriba se desactiva automáticamente. Además, las flechas izquierda y derecha se ocultan automáticamente, porque solo se mostrarán cuando se explote la imagen grande. Además, solo se muestran las partes superiores de las imágenes en la sexta fila, para que el usuario sepa que hay más abajo.

Ahora, agreguemos la superposición que mostrará las imágenes grandes. Primero, agregue el siguiente código justo antes de la etiqueta de cuerpo de cierre en su archivo HTML.

 
Pincha en la imagen para volver a la galería..
 
una

Agrega lo siguiente al final de tu archivo CSS para que los divs aparezcan como una superposición sobre las miniaturas.

#display_picture_container position: absolute; arriba: 0; izquierda: 0; ancho: 700px; altura: 400px; acolchado superior: 16px;  #display_picture posición: absoluta; arriba: 61px; izquierda: 31px; ancho: 596px; altura: 330px; fondo: # 000; opacidad: 0,8; filtro: alfa (opacidad = 80); text-align: center; tamaño de fuente: 11px; acolchado superior: 16px;  #display_picture_img posición: absoluta; arriba: 108px; izquierda: 65px; altura: 272px; ancho: 530px; cursor: puntero; 

Eso crea este efecto:

La imagen grande aparecería donde está el div divisor (ahora invisible) display_picture_img (debajo de Haga clic en la imagen para volver al texto de la galería).

Paso 3 - Recoge y cambia el tamaño de tus fotos

Este es un buen momento para recopilar todas sus imágenes y cambiar su tamaño. En primer lugar, cree una carpeta de "imágenes" y una carpeta de "pulgares". Agregue todas sus imágenes a la carpeta de imágenes y denomínelas 1.jpg, 2.jpg, 3.jpg, etc. Cambie el tamaño de todas ellas al tamaño de la divisa display_picture_img: 530 píxeles de ancho y 272 píxeles de alto. Luego copie esos archivos en el directorio de pulgares y cambie el tamaño de esas copias a 111 píxeles de ancho por 57 píxeles de alto. No importa cuántas fotos tengas. Sin embargo, recomendaría usar más de 26 para este tutorial para que pueda usar el desplazamiento vertical.

Paso 4 - Añadir funcionalidad con MooTools

Lo primero que hay que hacer es eliminar todos los Etiquetas en el archivo HTML. Esos eran sólo marcadores de posición; Añadiremos los archivos reales con JavaScript más tarde. Ahora haremos que la superposición desaparezca cuando se cargue la página. Agregue el siguiente código al archivo main.js

var number_of_pictures = 32; función show_pictures () var while_pictures = 1; while (while_pictures <= number_of_pictures)  var new_image = new Element('img',  'src': 'thumbs/' + while_pictures + '.jpg', 'id': 'image_' + while_pictures, 'events':  'click': function() $('display_picture_img').innerHTML = ""; $ ('display_picture_container'). fade (1); $ ('big_picture'). fade (.999999); $ ('controls_vert'). setStyle ('display', 'none'); if (this.id .replace ('imagen _', ") == 1) $ ('izquierda'). set ('clase', 'desactivado'); $ ('derecho'). borrar ('clase');  else if (this.id.replace ('image _', ") == number_of_pictures) $ ('left'). erase ('class'); $ ('right'). set ('class', 'desactivado '); else $ (' left '). set (' class ',' enabled '); $ (' right '). erase (' class '); $ (' controls_horz '). setStyle (' display ',' bloque '); $ (' left '). tween (' margin-left ',' 286px ');); new_image.inject ($ (' inside ')); // precargar todos los images var preload_image = new Element ('img', 'src': 'pictures /' + while_pictures + '.jpg', 'class': 'hide'); preload_image.inject ($ ('container')); // NOTA: no creé un atributo alt porque no será visto por nadie aquí de todos modos. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ('hide'););

Esto es lo que parece:

Para explicar esto, comencemos por la parte inferior. En MooTools, el código window.addEvent ejecuta el código cuando el DOM está listo para representar elementos. El $ ('display_picture_container'). Fade ('hide'); oculta el div display_picture_container y todos sus contenidos. Utilicé el método fade ('hide') porque lo veremos más adelante. No creamos una pantalla: ninguna; declaración en nuestro archivo CSS o tener JavaScript lo oculte de esa manera; tiene que estar oculto por la función que vamos a utilizar para mostrarlo más tarde (desaparecer).

Ahora para la parte grande: la función show_pictures. En primer lugar, establecemos la variable number_of_pictures. Esto le dice a la función que agregue miniaturas de la carpeta de pulgares usando cada número entero desde 1 hasta el número dado. Para agregar más imágenes a esta presentación de diapositivas, todo lo que tiene que hacer es agregarlas a las carpetas, cambiar su tamaño y aumentar el valor de number_of_pictures. Yo utilicé 32.

La siguiente parte es el funcionamiento interno de show_pictures. Esto, como su nombre lo indica, muestra todas las imágenes. También precarga las imágenes más grandes en el fondo. Dentro de la función, while_pictures se define como 1. Esta es la variable que usaremos como punto de partida para mostrar todas las imágenes. La siguiente declaración de tiempo muestra que el código interno se ejecutará una vez para cada imagen, comenzando en una y aumentando hasta el número total de imágenes (número_de_imágenes). Tenga en cuenta que while_pictures ++; está al final del bucle while, para que aumente en uno cada vez que el bucle se repita.

A continuación, creamos una instancia de Element para un elemento img. Podemos agregar src, id, clase, evento y otros atributos. Sin embargo, solo necesitamos src, id y eventos. Al usar 'src': 'thumbs /' + while_pictures + '.jpg', declaramos que queremos que el src de la imagen sea el número que sea o el número actual, y dentro de la carpeta de thumbs. Los ID de todas nuestras miniaturas serán image_1, image_2, etc..

Ahora queremos que aparezca una imagen grande después de hacer clic en una miniatura, por lo que creamos un evento de clic. La primera línea debajo de eso hace que display_picture_img div contian la imagen grande con un id de big_picture y una clase de id de la miniatura (image_1, image_2, etc.). Recuerde que, en este momento, el divisor display_picture_img está oculto.

Ahora use el método .fade (1) para fundirse en el div display_picture_container y todo su contenido. El 1 representa el nivel de opacidad (1 es 100%, .5 es 50%, etc.). Sin embargo, esto causa un error en todos, excepto en los navegadores más nuevos, como Firefox 3 y Safari. Se funden correctamente, pero los demás simplemente aparecen en la imagen y se desvanecen en el área más oscura a su alrededor. Después de mucha experimentación, descubrí que si la imagen grande (que tiene big_picture como id) se desvanece con su propio método de desvanecimiento, funciona, pero solo si el desvanecimiento no está configurado en 1. Sin embargo, queremos la imagen estar al 100% de opacidad. Por lo tanto, lo puse en .999999, que no tiene una transparencia notable.

Así que ahora la imagen grande está en la pantalla. Sin embargo, también queremos que los controles se muevan hacia el centro y se conviertan en flechas hacia la izquierda y hacia la derecha, en lugar de hacia arriba y hacia abajo. En primer lugar, ocultamos los controles verticales (controls_vert). Podemos usar display: none; para esto, porque no vamos a estar desvaneciéndolo dentro o fuera. Luego usamos una declaración if, if else, y else para determinar si la imagen en la que se hizo clic fue la primera o la última en nuestra galería. Si fue la primera, no queremos que sea a la izquierda, porque no existe ninguna anterior. Lo mismo es necesario a la derecha. Más adelante, cuando tengamos en funcionamiento las flechas izquierda y derecha, haremos que detecte si tiene o no una clase desactivada. Esto determinará si el evento de clic funcionará para ello. (También, revisa el CSS. Establece la imagen de la flecha en 20%. Esto evita la necesidad de tener 8 imágenes de flecha direccional en lugar de 4).

A continuación, mostramos los controles horizontales configurando su estilo de visualización para bloquear. Entonces, al ocultar los controles verticales y mostrar los controles horizontales, los hemos cambiado. Sin embargo, queremos que los controles horizontales estén centrados. Logré esto creando una interpolación que anima un aumento en el margen izquierdo a 286px, que es el centro de la galería..

Ahora que hemos creado nuestra nueva_imagen, tenemos que ponerla dentro del documento. El método de inyección nos permite insertar el elemento img recién creado en el div interior.

También queremos precargar cada una de las imágenes, para que no haya ningún retraso cuando la gente realmente haga clic en las imágenes para fundirlas. Creamos un nuevo elemento img para cada imagen que sea de tamaño completo. Sin embargo, usa la clase hide, que, en nuestro CSS, usa display: none; Para ocultar los contenidos. Luego inyectamos la imagen de precargador oculta en el contenedor div.

Esto es lo que parece después de hacer clic en una miniatura:

Ahora tenemos que hacer desaparecer la imagen cuando la pulsamos. Inserte el siguiente código después de $ ('display_picture_container'). Fade ('hide'); declaración en main.js.

$ ('display_picture_img'). addEvent ('click', function () $ ('display_picture_container'). fade (0); $ ('big_picture'). fade (0); $ ('up'). setStyle ( 'margen izquierdo', '286px'); $ ('controls_horz'). setStyle ('display', 'none'); $ ('controls_vert'). setStyle ('display', 'block'); $ (' left '). setStyle (' margin-left ',' 7px '); $ (' up '). tween (' margin-left ',' 7px '););

Esto agrega un evento de clic al div que contiene la imagen grande. Cuando se hace clic, el contenedor se desvanece y, debido al error mencionado anteriormente, la imagen en sí también se desvanece a 0. Luego configuramos el div oculto hacia arriba para que tenga el mismo margen superior izquierdo que el div izquierdo. Luego cambiamos los controles horizontales a los controles verticales instantáneamente, y luego, después de configurar el div oculto a la izquierda a su margen izquierdo original, animamos el margen izquierdo de la flecha hacia arriba a su 7px original usando otra interpolación. Ahora puede hacer clic en las miniaturas para hacerlas explotar y luego hacer clic en la imagen grande para ocultarla nuevamente. Casi termino!

Ahora tome el siguiente código y péguelo sobre el código que acaba de ingresar.

var vertical_moves = 0; var rows = Math.ceil (number_of_pictures / 5); if (rows> 5) $ ('up'). addEvent ('click', function (event) if (! $ ('up'). hasClass ('deactivated')) vertical_moves--; $ (' down '). erase (' class '); $ (' inside '). tween (' margin-top ',' - '+ (64 * vertical_moves) +' px '); if (vertical_moves == 0) $ ('arriba'). set ('clase', 'desactivado');); $ ('abajo'). addEvent ('clic', función (evento) si (! $ ('abajo'). hasClass ('desactivado')) vertical_moves ++; $ ('up'). erase ('class' ); $ ('adentro'). tween ('margin-top', '-' + (64 * vertical_moves) + 'px'); if (vertical_moves == (rows-5)) $ ('down') .set ('clase', 'desactivado'););  else $ ('up'). set ('class', 'desactivado'); $ ('abajo'). set ('clase', 'desactivado');  var current_id = 1; $ ('left'). addEvent ('click', function () if (! $ ('left'). hasClass ('desactivado')) current_id = $ ('big_picture'). get ('class') .replace ('image_', "); current_id--; $ ('big_picture'). fade ('hide'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '. jpg '); $ (' big_picture '). fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 1) $ (' left ') .set ('clase', 'desactivado'); if (current_id == (number_of_pictures-1)) $ ('right'). erase ('class');); $ ('right') .addEvent ('click', function () if (! $ ('right'). hasClass ('desactivado')) current_id = $ ('big_picture'). get ('class'). replace ('image_' , "); current_id ++; $ ('big_picture'). fade ('hide'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '.jpg'); $ ('big_picture ') .fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 2) $ (' left '). erase (' class ');  if (current_id == number_of_pictures) $ ('right'). set ('class', 'desactivado'););

Lo primero que haremos es configurar el desplazamiento vertical. En primer lugar, crearemos una variable llamada vertical_moves con un valor de 0. Esto nos dirá cuántas filas ha bajado. Luego, averiguamos cuántas filas de imágenes tenemos, con 5 imágenes seguidas. La función Math.ceil redondea cualquier número que tenga un decimal a un entero. Por ejemplo, tengo 32 imágenes. 32 dividido por 5 es 6.4, que se redondearía a 6. Sin embargo, todavía queremos que se muestren las imágenes adicionales; aunque solo hay dos imágenes en la última fila, queremos que cuente como una fila completa. Como Math.ceil lo redondea todo, la cantidad de filas se convierte en 7.

A continuación, detectamos si hay más de cinco filas. Si no los hay, desactivamos las flechas arriba y abajo. Con cinco filas o menos, todas las imágenes se muestran sin la necesidad de los botones de desplazamiento. Sin embargo, si hay seis o más, queremos agregarles eventos. Para la flecha hacia arriba div, agregamos un evento y luego detectamos si ha sido etiquetado como desactivado o no. Si está desactivado, se mostrará con solo un 20% de opacidad, y al hacer clic en él, no hará nada. Además, ya no tendrá un puntero como cursor. Sin embargo, si no tiene esa clase, continúa. Si está subiendo, disminuye la cantidad de filas que ha bajado, por lo que los movimientos verticales disminuyen en una fila. Luego borra cualquier clase que tenga el div down. Si está en la fila inferior y la flecha hacia abajo se desactiva, una vez que se mueve hacia arriba en una fila, podrá volver a bajar. Por lo tanto, impide que se desactive..

Luego, hace que todas las miniaturas se muevan hacia arriba al detectar qué es el nuevo movimiento vertical, multiplicarlo por 64 y hacerlo negativo. Se usa el número 64 porque es la altura de una fila de miniaturas más el margen debajo de ella. Luego aplica este valor al margen superior. Por ejemplo, si el margen superior era originalmente -128px, se movería hacia arriba porque el nuevo margen-superior solo sería -64px. El método de interpolación hace que se desvanezca a su nueva posición. Dentro del archivo main.css, tiene el div picture_section que oculta su desbordamiento. Esto es para que cuando aplique un margen superior negativo, lo oculte en lugar de pegarlo. Luego determina si está en la parte superior de la galería. Si es así, desactiva la flecha hacia arriba para que no pueda subir más. La flecha hacia abajo tiene las mismas acciones aplicadas, excepto al revés.

Ahora haremos que los botones izquierdo y derecho funcionen correctamente. En primer lugar, establecemos current_id igual a uno para crear la variable. Esto nos ayudará a determinar qué imagen grande se muestra (recuerde, los botones izquierdo y derecho solo aparecen cuando se muestra una imagen grande). Luego agregamos un evento de clic al div izquierdo y verificamos si está desactivado o no. Si no lo es, detectamos la clase del img con el id de big_picture. Esto se estableció anteriormente como imagen_ (ingrese el número de la imagen actual aquí). Usamos el método de obtención para encontrar esto y el método de reemplazo para eliminar el prefijo image_. Luego lo restamos por uno, porque al movernos a la izquierda, volvemos a una imagen con un ID de uno menos..

A continuación, ocultamos la imagen al instante y luego la cambiamos a la imagen anterior. Luego, la imagen se difumina al 100% de opacidad. Después de eso, cambiamos la clase de la imagen a su nuevo valor, lo que permite a un usuario ir a la izquierda repetidamente. Entonces detectamos si está en la primera imagen. Si es así, no podemos ir más a la izquierda, así que desactivamos el botón izquierdo. Si es la siguiente a la última imagen después de hacer clic en la izquierda, significa que estaba justo en la última imagen, donde se desactivaría el botón derecho. Si ese es el caso, habilitamos el botón derecho para que puedan continuar avanzando. Casi las acciones idénticas se aplican al botón derecho, excepto, nuevamente, al revés.

Paso 4 - Pruebas y Mejoramiento

Ahora eso es todo. La imagen grande se desvanece al hacer clic en una miniatura, puede moverse hacia la izquierda y hacia la derecha, volver a la galería principal haciendo clic en la imagen grande y desplazarse hacia arriba y hacia abajo. ¡Pero espera! Después de desarrollar en un buen navegador como Firefox, debes probarlo en otros navegadores populares como Safari, IE6 e IE7. Los probé todos, y todos funcionaron, excepto por sorpresa. -Internet Explorer 6. Al hacer clic en una imagen y los controles horizontales se deslizan hacia afuera, se deslizan demasiado lejos en IE6. Por alguna razón, IE6 piensa que lo que cualquier otro navegador piensa que es 286px es solo 143px. Entonces, cambia el siguiente código:

$ ('left'). tween ('margin-left', '286px');

A esto:

if (Browser.Engine.trident4) $ ('left'). tween ('margin-left', '143px');  else $ ('left'). tween ('margin-left', '286px'); 

Browser.Engine.trident4 devuelve true si el navegador es IE6. De lo contrario, devuelve falso y ejecuta el código original. Y el siguiente código:

$ ('up'). setStyle ('margin-left', '286px');

A esto:

if (Browser.Engine.trident4) $ ('up'). setStyle ('margin-left', '143px');  else $ ('up'). setStyle ('margin-left', '286px'); 

Ahora funciona en todos los navegadores. En este punto, también puede ir al sitio de MooTools y seleccionar solo los componentes que utilizó. Aunque mootools.js, main.js, main.css y el archivo HTML usan menos de 100kb juntos, siempre puede reducir el tamaño para optimizar la experiencia para los usuarios con una conexión de internet más lenta. Sin embargo, dejé toda la biblioteca de MooTools en el código fuente para esto, para que las personas que quieran cambiar las cosas en la galería puedan usar todos los componentes..

.