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 Debes asignarle un Agregar la

archivo en donde nuevo nombre descripción de la
se aloja la foto (variable), te foto.
recomendamos
colocar el mismo
nombre que 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