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

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:


add_action( 'after_setup_theme', 'setup' );
function setup() {
  // ...

	add_theme_support( 'post-thumbnails' );
	add_image_size( 'preview', 108, 108, true ); // thumbnail
	add_image_size( 'zoomed', 660, 600 ); // large

	// ...
}

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:


function generate_thumbnail_list( $post_id = null ) {
	if ( $post_id == null ) return;
	$images = get_posts(
		array(
			'numberposts' => -1,
			'post_type' => 'attachment',
			'post_mime_type' => 'image/jpeg, image/jpg, image/png, image/gif',
			'post_parent' => $post_id,
			'orderby' => 'menu_order',
			'order' => 'ASC',
			'exclude' => get_post_thumbnail_id( $post_id )
		)
	);
	if ( count( $images ) > 0 ) {
		echo '<ul class="gallery">';
		foreach ( $images as $image ) {
			$src = wp_get_attachment_image_src($image->ID, 'zoomed');
			echo '<li><a href="' . $src[0] .'">' . wp_get_attachment_image( $image->ID, 'preview' ) . '</a></li>';
		}
		echo '</ul>';
		echo '<div class="clear"></div>';
	}
}

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

1
2	<?php the_content(); ?>
3	<h3>Images</h3>
4	<?php generate_thumbnail_list( get_the_ID() ); ?>

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:


.clear {
	clear: both;
}
.gallery {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.gallery li {
	float: left;
	margin: 0 10px 10px 0;
}
.gallery li:nth-child(5n) {
	margin-right: 0;
}
.gallery a {
	float: left;
	cursor: pointer;
	text-decoration: none;
}
.gallery img {
	float: left;
	border: 0;
}

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.


<div id="zoom">
	<a href="#next" class="next">Next</a>
	<a href="#previous" class="previous">Previous</a>
	<div class="close"></div>
	<div class="content"></div>
</div>

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):


#zoom {
	z-index: 99990; /* high index so it stays on top of all other elements */
	position: fixed; /* is fixed so if content is scrolled this stays in the same place */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* creates a transparent background, so the content under it will be visible,
	transparency can be adjusted */
	background: rgba(0, 0, 0, 0.8);
}
#zoom .content {
	z-index: 99991; /* higher index so the image will stay on top of the overlay */
	position: absolute;
	/* start initial positioning: will be centered horizontally and vertically */
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	/* end positioning */
	/* an animated spinner as background will be visible while the image is loading */
	background: #ffffff url('../img/spinner.gif') no-repeat 50% 50%;
	border: 20px solid #ececec;
	padding: 0;
}
#zoom img {
	display: block;
	max-width: none;
	background: #ececec;
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
#zoom .close {
	z-index: 99993; /* higher index so the close will stay above the overlay and image */
	position: absolute;
	top: 0;
	right: 0;
	width: 49px;
	height: 49px;
	cursor: pointer;
	background: transparent url('../img/icons/close.png') no-repeat 50% 50%;
	opacity: 1;
	filter: alpha(opacity=100);
}
#zoom .previous,
#zoom .next {
	z-index: 99992; /* higher index so the close will stay above the overlay and image */
	position: absolute;
	top: 0;
	overflow: hidden;
	display: block;
	width: 49px;
	height: 49px;
	text-indent: 100%;
}
#zoom .previous {
	right: 100px;
	background: url('../img/icons/arrows.png') no-repeat 0 0;
}
#zoom .next {
	right: 50px;
	background: url('../img/icons/arrows.png') no-repeat 100% 0;
}
#zoom .close:hover {
	background-color: #da4f49; /* adds a red tint on hover */
}
#zoom .previous:hover,
#zoom .next:hover {
	background-color: #0088cc; /* adds a blue tint on hover */
}

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:


(function($) {
	$.zoom = function() {
		 // append a gallery wrapper to the document body
		$('body').append('<div id="zoom"></div>');
		var zoomedIn = false,  // a flag to know if the gallery is open or not
		    zoom = $('#zoom'),
		    zoomContent = null,
		    opened = null; // the opened image element

		function setup() {
			zoom.hide(); // hide it
			// add the inner elements, image wrapper, close and navigation links
			zoom.prepend('<div class="content"></div>');
			zoom.prepend('<div class="close"></div>');
			zoom.prepend('<a href="#previous" class="previous">Previous</a>');
			zoom.prepend('<a href="#next" class="next">Next</a>');
			
			zoomContent = $('#zoom .content');
			// attach events to the added elements
			$('#zoom .close').on('click', close);
			$('#zoom .previous').on('click', openPrevious);
			$('#zoom .next').on('click', openNext);
			
			// observe keyboard events for navigation and closing the gallery
			$(document).keydown(function(event) {
				if (!opened) {
					return;
				}
				if (event.which == 27) {
					$('#zoom .close').click();
					return;
				}
				if (event.which == 37) {
					$('#zoom .previous').click();
					return;
				}
				if (event.which == 39) {
					$('#zoom .next').click();
					return;
				}
				return;
			});
			
			if ($('.gallery li a').length == 1) {
				// add 'zoom' class for single image so the navigation links will hide
				$('.gallery li a')[0].addClass('zoom');
			}
			// attach click event observer to open the image
			$('.zoom, .gallery li a').on('click', open);
		}
		
		function open(event) {
			event.preventDefault(); // prevent opening a blank page with the image
			var link = $(this),
			    src = link.attr('href'),
				// create an image object with the source from the link
			    image = $(new Image()).attr('src', src).hide();
			if (!src) {
				return;
			}
			$('#zoom .previous, #zoom .next').show();
			if (link.hasClass('zoom')) {
				$('#zoom .previous, #zoom .next').hide();
			}
			
			// show the gallery with loading spinner, navigation and close buttons
			if (!zoomedIn) {
				zoomedIn = true;
				zoom.show();
			}
			
			// clean up and add image object for loading
			zoomContent.empty().prepend(image);
			// event observer for image loading, render() will be
			// called while image is loading
			image.load(render);
			opened = link;
		}
		
		function openPrevious(event) {
			event.preventDefault();
			if (opened.hasClass('zoom')) {
				return;
			}
			var prev = opened.parent('li').prev();
			if (prev.length == 0) {
				prev = $('.gallery li:last-child');
			}
			prev.children('a').trigger('click');
		}
		
		function openNext(event) {
			event.preventDefault();
			if (opened.hasClass('zoom')) {
				return;
			}
			var next = opened.parent('li').next();
			if (next.length == 0) {
				next = $('.gallery li:first-child');
			}
			next.children('a').trigger('click');
		}
		
		function render() {
			// if the image is not fully loaded do nothing
			if (!this.complete) {
				return;
			}
			var image = $(this);
			// if image has the same dimensions as the gallery
			// just show the image don't animate
			if (image.width() == zoomContent.width() && 
			    image.height() == zoomContent.height()) {
				show(image);
				return;
			}
			var borderWidth = parseInt(zoomContent.css('borderLeftWidth'));
			// resize the gallery to the image dimensions before
			// displaying the image
			zoomContent.animate({
				width: image.width(),
				height: image.height(),
				marginTop: -(image.height() / 2) - borderWidth,
				marginLeft: -(image.width() / 2) - borderWidth
			}, 300, function(){
				show(image);
			});

			function show(image) {
				image.fadeIn('fast');
			}
		}
		
		function close(event) {
			event.preventDefault();
			zoomedIn = false;
			zoom.hide();
			zoomContent.empty();
		}
		
		setup();
	};
})(jQuery);

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


function generate_thumbnail_list( $post_id = null ) {
	// ...
	if ( count( $images ) > 0 ) {
		// ...
		echo '<script type="text/javascript">jQuery.zoom();</script>';
	}
}

Ejemplo

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