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:
[html] <link href=“main.css” rel=“stylesheet” type=“text/css”>
Demo de IntenseJS para Platzi.
[/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. [html]
[/html]
[javascript]window.onload = function() { var elements = document.querySelectorAll(‘img’); Intense(elements); }[/javascript]
Entonces, nuestro script dice: Cuando cargue la ventana, // window.onload = ejecuta una función que // function() {} cree la variable elements, // var elements le asigne como valor los resultados de la búsqueda img y // = document.querySelectorAll(‘img’); que mande elements como parámetro a la función Intense()". // Intense(elements); La función Intense viene definida en el archivo intense.js. Por esta razón, en main.js sólo la estamos usando.
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í:
[html]
<div></div>
[/html]
[javascript]div img { margin-left: 20px; margin-right: 20px; width: 20%; height: 20%; }[/javascript]
Es posible personalizar IntenseJS a tu gusto. Estos son algunos de los elementos extra que yo agregué para darle estilo a mi aplicación.
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.
[html]<link href=“http://fonts.googleapis.com/css?family=Fjalla+One” rel=“stylesheet” type=“text/css”>[/html]
[javascript]h1 { font-family: ‘Fjalla One’, sans-serif; }[/javascript]
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í:
[javascript]div img { cursor: url(‘plus_cursor.png’) 25 25, auto; }[/javascript]
[html] <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”>
Demo de IntenseJS para Platzi.
<center>
<div>
</div>
</center>
[/html]
[javascript]window.onload = function() { var elements = document.querySelectorAll(‘img’); Intense(elements); }[/javascript]
[javascript]body { background-color: black; font-family: ‘Old Standard’, sans-serif; color: white; text-align: center; } h1 { font-family: ‘Fjalla One’, sans-serif; margin-bottom: -10px; } div img { cursor: url(‘plus_cursor.png’) 25 25, auto; margin-left: 20px; margin-right: 20px; width: 20%; height: 20%; } div { margin-top: 100px; } a { color: yellow; text-decoration: none; } a:hover { text-decoration: underline; }[/javascript] Puedes consultar el el código del demo en el repositorio de Github aquí. Ahí mismo puedes leer las instrucciones para descargarlo y correrlo en local. Y si quieres aprender más de las diferentes librerías de JavaScript que puedes usar para desarrollar con React.js, no te pierdas el Curso Profesional de React.js de Platzi que inició clases esta semana.
