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
