IntenseJS es una librería stand-alone (no depende de jQuery ni similares), que nos permite implementar un visor para mostrar una imagen en pantalla completa al dar clic en ella; recibe inputs tanto de cursor como de touch.
Las librerías son conjuntos de recursos que extienden las capacidades de nuestro lenguaje. Si se tratara de videojuegos, son como los DLCs de los lenguajes de programación y, como tales, pueden agregar cambios mínimos (una función) o bastante notables (como JQuery).
IntenseJS es muy pequeña y sencilla de usar. Y nos resulta especialmente útil para mostrar al usuario imágenes que necesitan
verse a detalle, como pinturas o ilustraciones grandes. También resulta vistoso para fotografías HD.
En este demo, podrás apreciar una galería de covers de la revista Amazing Stories. Una aplicación que consta de cinco archivos:
Index.html: el documento donde organizamos los elementos y cargamos los estilos y scripts que usaremos. El HTML es quien orquesta toda la vista.
Main.css: el documento de CSS con el que le damos estilo al HTML.
Main.js: el documento con el programa de Javascript en el que mandaremos llamar a Intense y le diremos qué imágenes debe procesar.
Intense.js: La librería de Intense, que es otro documento de Javascript con la lógica para procesar las imágenes. Se puede descargar aquí tecleando Ctrl o Cmd + S después de abrir la URL.
Plus_cursor.png: Una imagen que más adelante usaremos como cursor. Se puede descargar aquí tecleando Ctrl o Cmd + S después de abrir la URL.
Instalación
Index.html
<!DOCTYPE html><html><head><!-- SCRIPTS --><script src='intense.js'></script><script src='main.js'></script><!-- ESTILOS --><link href='main.css'rel='stylesheet'type='text/css'></head><body><h1>AMAZING GALLERY</h1><p>Demo de <a href="http://tholman.com/intense-images/">IntenseJS</a> para Platzi.</p></body></html>
Uso de IntenseJS
HTML
Para usar Intense, nuestras imágenes deben estar dentro de los atributos src o data-image. A cualquiera de estos podemos agregarle los atributos data-title y data-caption para mostrar un título y una descripción en el visor.
<img src="http://pulpcovers.com/wp-content/uploads/2011/05/26987515-Amazing_Stories_pulp_cover_October_1949.jpg" data-title="TIGER WOMAN OF SHADOW VALLEY" data-caption="by Berkeley Livingston"/>
JavaScript
window.onload=function(){var elements =document.querySelectorAll('img');Intense(elements);}
window: Este objeto representa la ventana del navegador.
onload: Es un evento que ocurre cuando un objeto ha sido cargado.
window.onload: Por ende, se refiere a cuando carga la ventana.
document: Se refiere al objeto, que es nuestro documento HTML.
document.querySelector(): Es una función que acepta por parámetro un selector de CSS (por ejemplo, img o .special) y regresa el primer elemento que coincida con esa búsqueda.
document.querySelectorAll(): Hace lo mismo que la anterior, pero regresa todos los elementos que coincidan.
Entonces, nuestro script dice:
window.onload = // Cuando cargue la ventana,
function(){} // ejecuta una función que
var elements // cree la variable elements,
= document.querySelectorAll(‘img’); // le asigne como valor los resultados de la búsqueda img y
Intense(elements); // que mande elements como parámetro a la función Intense()”.
La función Intense viene definida en el archivo intense.js. Por esta razón, en main.js sólo la estamos usando.
CSS
Intense usa el selector h1 para el título de la imagen y h2 para su descripción.
Modificar directamente el selector img afecta también lo que se mostrará en el visor. Y esto puede romper la vista. Para reescalar mis imágenes y agregarles margen, decidí envolverlas en un div. Y, entonces, mi código quedó así:
Index.html
<div><img class="framed"src="http://pulpcovers.com/wp-content/uploads/2011/05/26987515-Amazing_Stories_pulp_cover_October_1949.jpg" data-title="TIGER WOMAN OF SHADOW VALLEY" data-caption="by Berkeley Livingston"/></div>
Es posible personalizar IntenseJS a tu gusto. Estos son algunos de los elementos extra que yo agregué para darle estilo a mi aplicación.
Google Fonts
Agregué mis hojas de estilo desde Google Fonts a mi HTML y en el CSS sólo indico el nombre de la fuente para usarla en cierto selector. El nombre de la fuente va entrecomillado sólo sin son dos o más palabras (“Fjalla One” o Helvetica). Se pueden agregar fuentes o tipos de fuente seguidos de una coma, en caso de que las primeras no puedan ser cargadas por el navegador.
En el demo, el cursor cambia al estar sobre alguna imagen. Para insertar uno propio, acepta como parámetros la ubicación de la imagen, ubicación del puntero en x, ubicación en y. Esto se logra así:
MAIN.CSS
div img { cursor: url('plus_cursor.png')2525, auto;}
Resultado Final
Index.html quedó así:
<!DOCTYPE html><html><head><!-- SCRIPTS --><script src='intense.js'></script><script src='main.js'></script><!-- ESTILOS --><link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700'rel='stylesheet'type='text/css'><link href='http://fonts.googleapis.com/css?family=Fjalla+One'rel='stylesheet'type='text/css'><link href='main.css'rel='stylesheet'type='text/css'><h1>AMAZING GALLERY</h1><p>Demo de <a href="http://tholman.com/intense-images/">IntenseJS</a> para Platzi.</p></head><body><center><div><img src="http://pulpcovers.com/wp-content/uploads/2011/05/26987515-Amazing_Stories_pulp_cover_October_1949.jpg" data-title="TIGER WOMAN OF SHADOW VALLEY" data-caption="by Berkeley Livingston"/><img src="http://pulpcovers.com/wp-content/uploads/2011/05/27005267-Twin_Worlds_Amazing_Stories_cover_April_1937.jpg" data-title="TWIN WORLDS" data-caption="by Neil R. Jones"/><img src="http://upload.wikimedia.org/wikipedia/commons/5/58/Amazing_Stories_December_1936.jpg" data-title="THE SPACE MARINES AND THE SLAVERS" data-caption="by Bob Olsen"/></div></center></body></html>
Así Main.js:
window.onload=function(){var elements =document.querySelectorAll('img');Intense(elements);}
