Tutorial Galería de Fotos by Mariana Vilte Aquí aprenderás a personalizar tu propio Jquery Galería de Imágenes.

“Galleria es una biblioteca Javascript escrita con jQuery que permite implementar una galería de imágenes con excelentes efectos.”

1) Bajar archivo comprimido con todo el paquete de Jquery, aquí te pasamos el link para que te informes de las distintas versiones de Galería de Imágenes y elijas el que más se adecue a tu página. Link: http://pixelco.us/blog/galleria-excelente-galeria-de-imagenes-escrita-con-jquery/

Podemos observar la interfaz de la galería con tan solo hacer click ya sea en Demo 01 o en Demo 02 dependiendo de la galería que vayas a utilizar y que quieras visualizar.

1

Descargamos el zip.

2) Descomprimimos el archivo para ello te recomendamos que una vez bajado el comprimido, crees una carpeta y dentro de ella lo descomprimas, de este modo te evitaras que los archivos que viene en carpeta se te pierdan.

Se nos aparecerán dos carpetas -MACOSX (S.O) -galleria-1.0b

ÇÇÇ Podemos borrar la carpeta que no vamos a utilizar, en este caso trabajaremos con: “galleria-1.0b”, recordemos que MACOSX funciona con MAC.

2

Dentro de “galleria-1.0b”, vamos a encontrar estas subcarpetas, en este tutorial solo trabajaremos con la carpeta demo.

Una vez abierto demo estos archivos se nos aparecerán.

Las imágenes que vamos a ver en la galería.

Desde aquí vamos a modificar el demo01.

3

Desde aquí vamos a modificar el demo02

Como mencionamos anteriormente el pack que descargamos nos trae predeterminado las dos galerías jQuery, al tener el mismo código de linckeo de imágenes solo explicaremos una, la única diferencia que existe entre ambas es la interfaz gráfica. Trabajamos con “demo_01.htm”, así que podemos eliminar la otra ya que no nos es necesaria. Quedándonos así la organización de la carpeta:

3) Modificación de Fondo de la interfaz gráfica. Para modificar el color de fondo o tan solo agregar algún cuadro de mosaico lo primero que tenemos que hacer el abrir el archivo “demo_01.htm” con Dreamweaver

4

Una vez abierto el script, si queremos colocar como color de fondo un color uniforme solo tenemos que ir a Modificar->Propiedades de la página (Color de fondo)

En Color de fondo, seleccionamos el color.

Aquí lo cambiamos por uno color rojo.

Ahora para modificar el fondo y colocar una imagen repetimos la misma operación de la anterior pero con la diferencia de que nos centramos en la opción de Imagen de Fondo y seleccionamos la imagen ya optimizada para web. Modificar->Propiedades de la página (Imagen de fondo).

5

Nota: Tildar la opción Repetir en el caso de que la imagen que coloquemos sea pequeña y la queramos repetir como mosaico. Quedándonos así

4) Para modificar las imágenes de la galería solo tenemos que sustituir las imágenes que se encuentran en la carpeta:

Para realizar esta acción debemos abrir la imagen en photoshop modificar su tamaño adecuándolo a la imagen original para ello primero abrimos una imagen de las que ya viene predeterminada con la galería y nos fijamos en el tamaño de la misma de esta manera vamos a mantener el tamaño de la galería. Imagen -> Tamaño de Imagen. En el terminado se puede observar que le colocamos una marca de agua, eso es opcional dependiendo del uso de la galería.

6

7

Una vez terminado con los retoques de cada foto, nos queda optimizarla para web , para guardarlo debemos sustituir la imagen sobre las que ya existen, para eso vamos a buscar la ruta en la carpeta img. Hacemos click en un archivo ya existente y guardamos. De esta manera nos tendría que quedar la carpeta de img, con todas las imágenes sustituidas.

Para agregar más imágenes a la galería solo tenemos que guardar cada imagen nueva con un nombre diferentes a los ya existentes para luego ingresar al código con Dreamweaver y agregarlos.

Nombre nueva imagen: paisaje.jpg 8

Ya guardada la foto ingresar al código de la galería.

Última secuencia ya predeterminada. En la vista de código vamos a agregar este script siguiendo la secuencia de las fotos <li><img src="img/paisaje1.jpg" alt="paisaje1" title="Escribe aquí la descripción de la foto"></li> El nombre del archivo en donde se aloja la foto Debes asignarle un nuevo nombre (variable), te recomendamos colocar el mismo nombre que la foto. Agregar la descripción de la foto.

5) Por último para modificar el nombre de la galería dentro de su interfaz gráfica solo debemos seleccionar en el área gráfica el texto y modificarlo el código, para esto recomendamos que trabajen tanto con el área de código y el área gráfica, esto también nos sirve para modificar los botones de ANTERIOR Y SIGUIENTE.

9

De esta manera damos por terminado el tutorial espero que haya sido de su agrado . TRABAJO FINAL

10

Sign up to vote on this title
UsefulNot useful