Cómo expandir fotos en miniatura con el estilo de Google Images

Google Images ejecuta una interfaz de usuario única con vistas previas en miniatura de muchos sitios web diferentes. Al hacer clic en cualquiera de estas miniaturas, se amplía la pantalla con más detalles y una imagen más grande.

Esa es una de las mejores funcionalidades de galerías de imágenes que existe y ahora puedes clonarla con Gridder.js.

Este plugin de jQuery gratuito sigue los pasos del increíble UX de Google creando un complemento que genera este efecto. Puedes convertir cualquier galería de fotos en una galería estilo Google Images con las mismas animaciones y funciones de visualización.

Es sorprendente la velocidad y facilidad de uso que ofrece este complemento. Simplemente haciendo clic en cualquier miniatura inmediatamente se muestra una imagen más grande, y las animaciones son muy limpias.

Las imágenes incluyen una sección de texto descriptivo en caso de que quieras agregar algunos detalles o enlaces relacionados con las imágenes. Funciona especialmente bien para sitios de portfolio simples enfocados a la muestra de imágenes.

Además, también puedes extraer contenido a través de Ajax. Esto te permite crear miniaturas dinámicas que extraen contenido de otros sitios web o mediante APIs.

Cada evento de clic ofrece un método de devolución de llamada, por lo que incluso puedes ejecutar otros complementos o funciones de JavaScript junto con Gridder. Con todas estas opciones prácticamente se asemeja a un framework grid completo.

Como Gridder se ejecuta en jQuery, requiere la versión más reciente. Eso es todo lo que necesitas (junto con el archivo Gridder.js), y con unas pocas líneas de HTML, puedes hacer que tu red funcione sin problemas.

Podrías consultar la página de GitHub para obtener instrucciones de configuración más completas, pero aquí hay una vista previa rápida de cómo se ve el HTML:

<!-- Gridder navigation -->
<ul class="gridder">
    <li class="gridder-list" data-griddercontent="#content1">
        <img src="http://placehold.it/600x400" />
    </li>
 
    <!-- You can also   load html/ajax pages by replacing the #ID with a URL -->
    <li class="gridder-list" data-griddercontent="/content.html">
        <img src="http://placehold.it/600x400" />
    </li>
</ul>
 
<!-- Gridder content -->

<div id="content1" class="gridder-content">   Content goes here... </div>

Todo el contenido se maneja a través de JavaScript, por lo que puedes cargar prácticamente todo lo que desees.

Es un complemento muy versátil con opciones para cambiar la velocidad de la animación, aligerarlo, el estilo del botón de cierre y la posición de desplazamiento para cuando el usuario haga clic en una nueva miniatura.