Modificado por última vez en Domingo, 11 Agosto 2013 00:50
(0 votos)

Crea con Wookmark el diseño de imágenes de Pinterest

jQuery Wookmark

jQuery Wookmark es una increíble herramienta de diseño de imagen

Lo primero que te llama la atención cuando visitas Pinterest es "Whoa, las columnas tienen la misma anchura y las fotos se cortan para adaptarse a la forma en que deberían". Los usuarios básicos web probablemente no piensan en ello pero se puede apreciar el esfuerzo que fue necesario para crear ese diseño, tanto en el servidor como en el cliente. Es por eso que me he enamorado de Wookmark, un plugin de jQuery para crear el mismo efecto diseño coherente con las imágenes.

Te voy a enseñar cómo utilizar Wookmark.

La cantidad de trabajo que el desarrollador tiene que hacer se puede completar en tan sólo unos minutos. Para empezar, se incluyen las imágenes en cualquier formato, este ejemplo se utiliza una lista:

<ul id="tiles">
  <li><img src="/images/image_1.jpg" width="200" height="283"><p>1</p></li>
  <li><img src="/images/image_2.jpg" width="200" height="300"><p>2</p></li>
  <li><img src="/images/image_3.jpg" width="200" height="252"><p>3</p></li>
  <li><img src="/images/image_4.jpg" width="200" height="158"><p>4</p></li>
  <li><img src="/images/image_5.jpg" width="200" height="300"><p>5</p></li>
  <li><img src="/images/image_6.jpg" width="200" height="297"><p>6</p></li>
  <li><img src="/images/image_7.jpg" width="200" height="200"><p>7</p></li>
  <li><img src="/images/image_8.jpg" width="200" height="200"><p>8</p></li>
  <li><img src="/images/image_9.jpg" width="200" height="398"><p>9</p></li>
  <li><img src="/images/image_10.jpg" width="200" height="267"><p>10</p></li>
  <li><img src="/images/image_1.jpg" width="200" height="283"><p>11</p></li>
  <li><img src="/images/image_2.jpg" width="200" height="300"><p>12</p></li>
  <li><img src="/images/image_3.jpg" width="200" height="252"><p>13</p></li>
  <!-- ... -->
</ul>

Las imágenes de la misma anchura deben ser pre-procesados de manera óptima "‹"‹en el servidor, sin embargo, todavía se les puede obligar a diferentes anchos si se desea. Con las imágenes en su lugar, se puede utilizar el plugin de jQuery para hacer el trabajo sucio:

$(document).ready(new function() {
  // Call the layout function.
  $('#tiles li').wookmark({
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('#tiles'), // Optional, used for some extra CSS styling
    offset: 2, // Optional, the distance between grid items
    itemWidth: 210 // Optional, the width of a grid item
  });
});

Wookmark también incluye algunas opciones adicionales para personalizar el aspecto de las columnas y se puede cambiar el tamaño de los anchos de las columnas para cambiar el tamaño de una ventana - excelente!

Wookmark es un plugin que hace una cosa excepcionalmente bien. Si deseas crear un galería elegante, con fotos uniformes, Wookmark te dará una oportunidad y creo que quedarás impresionado!

Artículo original y demo en jQuery Wookmark de David Walsh


Artículos relacionados (por etiqueta)

Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento