Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Galería Con Tamaños de Imágenes Personalizados (Plugin jQuery Extra)

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Como prometí en mi artículo previo, aquí tienes el tutorial sobre la creación de una galería que no usa los tamaños de imagen estándar. Como extra aprenderás a crear un plugin básico jQuery para presentar las imágenes de mayor tamaño de las miniaturas de una forma más atractiva. 

Si no leíste mi artículo anterior sobre los tamaños de imágenes personalizados, por favor léelo de forma que te resulte más fácil comprender este tutorial.


Paso 1 Decidir los Tamaños de Imagen

Dependiendo de la maquetación de tu tema, y el sistema de retícula que use, podrás decidir entre diferentes tamaños de imagen para las miniaturas. Antes de decidir sobre cuantas imágenes quieres disponer en una fila, cual es la anchura del contenedor en el que las miniaturas serán mostradas, los márgenes, el padding, etc.

Yo voy a usar una anchura de 940 píxeles, una maquetación de dos columnas (un ratio de 8/4) como ejemplo, en donde el contenido tendrá 620 píxeles y la columna lateral 300 píxeles con un margen izquierdo de 20 píxeles. El área para el contenido y la columna lateral tendrán un padding interior de 20 píxeles. Ahora un poco de matemáticas: el contenido tiene 620px de anchura con un padding de 20px, esto nos deja 580px para las miniaturas; y mostrando 5 miniaturas por línea, teniendo cada una un margen derecho de 10px de forma que no estén pegadas una junto a otra; la quinta imagen de cada línea no tendrá un margen derecho; las miniaturas tendrán 108px de anchura y altura, y estarán recortadas.

La imagen más grande será como máximo 660px de ancho y 660px de alto, serán redimensionadas proporcionalmente sin recortar.

Puedes elegir que medida se ajusta a tu maquetación, si decides cambiar los tamaños, pueden ser fácilmente regenerados (ver la entrada anterior para saber cómo hacerlo), además no tienen porque ser cuadradas.


Paso 2 Configurar los Tamaños Personalizados

Edita el archivo functions.php de forma que se parezca a algo como esto:


Paso 3 Generar una Lista de Miniaturas, Excluyendo el Grupo de Imágenes tal y Como Aparece

Todavía en functions.php añade el métodogenerate_thumbnail_list:

En el archivo content-single.php invoca el método generate_thumbnail_list, pasando como parámetro el ID de la entrada.

Lo anterior mostrará una lista sin orden, conteniendo enlaces a los archivos más grandes y a las miniaturas de las imágenes.


Paso 4 Aplicar Estilo a la Galería

Obviamente las miniaturas necesitan estilo, de ora forma sería sólo una simple lista de imágenes. Añade lo siguiente a tu actual hoja de estilo o crea una nueva y vincúlala:

Esto colocará las imágenes una junto a la otra, dejando algo de espacio alrededor.

En este punto, al pulsar sobre la miniatura se abrirá la imagen más grande en una página vacía. Ésta es una buena alternativa en caso de que JavaScript esté deshabilitado.


Paso 5 Abrir las Imágenes Con una Galería de Imagen jQuery

Aplicar Estilo a una Imagen de Galería Aumentada

Antes de escribir cualquier JavaScript sería deseable saber como se mostrará la imagen mayor. Aquí está lo que yo tenía pensado:

Nota: todo esto será generado por el plugin jQuery. Esto es sólo para mostrarte el proceso de creación.

Una capa transparente sobre todo el contenido, con la imagen en el centro y los controles en la esquina superior derecha. Mientras la imagen se carga se mostrará una rueda girando. En la raíz del cuerpo del documento se añadirá un div contenedor, el cual contedrá los enlaces para la navegación hacia la siguiente imagen y la anterior, un enlace para cerrar la galería, y el div contenedor alrededor de la imagen donde esta será cargada. Éste es código HTML mínimo que se usará para la galería.

Añadiendo el siguiente código se aplicará estilo a los elementos anteriores para que se vean como en la imagen de arriba (los comentarios están incluidos para explicar las partes que podrían no ser inmediatamente obvias):

La muestra de lo anterior:

Ahora Algo de JavaScript

El código HTML de arriba no será necesario, ya que se generará con JavaScript. Los eventos se incorporarán para abrir, navegar y cerrar la galería. Navegar y cerrar la galería puede hacerse desde el teclado o usando el ratón.

El JavaScript de abajo también está comentado para explicar lo que está sucediendo:

Tras incluir el plugin de arriba, inicialízalo añadiendo la llamada al plugin en el método generate_thumbnail_list:


Ejemplo

Un ejemplo de la vida real sobre como funciona esto y como se puede usar: Zoom jQuery Photo Gallery Plugin demo


Referencias

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.