Sie sind auf Seite 1von 7

Visualiza imgenes en pantalla completa con IntenseJS

IntenseJS es una librera 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 libreras son conjuntos de recursos que extienden las capacidades de


nuestro lenguaje. Si se tratara de videojuegos, son como los DLCs de los
lenguajes de programacin y, como tales, pueden agregar cambios mnimos (una
funcin) o bastante notables (como JQuery).

IntenseJS es muy pequea y sencilla de usar. Y nos resulta especialmente til para
mostrar al usuario imgenes que necesitan
verse a detalle, como pinturas o ilustraciones grandes. Tambin resulta vistoso
para fotografas HD.

En este demo, podrs apreciar una galera de covers de la revista Amazing Stories.
Una aplicacin 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 imgenes debe procesar.

Intense.js: La librera de Intense, que es otro documento de Javascript con la


lgica para procesar las imgenes. Se puede descargar aqu tecleando Ctrl o Cmd +
S despus de abrir la URL.

Plus_cursor.png: Una imagen que ms adelante usaremos como cursor. Se puede


descargar aqu tecleando Ctrl o Cmd + S despus de abrir la URL.

Instalacin

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'>

<h1>AMAZING GALLERY</h1>
<p>Demo de <a href="http://tholman.com/intense-images/">IntenseJS</a> para
Platzi.</p>
</head>
<body>
</body>
</html>

Uso de IntenseJS

HTML

Para usar Intense, nuestras imgenes 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 ttulo y una descripcin 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 funcin que acepta por parmetro un selector


de CSS (por ejemplo, img o .special) y regresa el primer elemento que coincida con
esa bsqueda.

document.querySelectorAll(): Hace lo mismo que la anterior, pero regresa todos


los elementos que coincidan.

Entonces, nuestro script dice:

Cuando cargue la ventana, // window.onload =


ejecuta una funcin que // function() {}
cree la variable elements, // var elements
le asigne como valor los resultados de la bsqueda img y // =
document.querySelectorAll(img);
que mande elements como parmetro a la funcin Intense(). // Intense(elements);

La funcin Intense viene definida en el archivo intense.js. Por esta


razn, en main.js slo la estamos usando.

CSS

Intense usa el selector h1 para el ttulo de la imagen y h2 para su descripcin.

Modificar directamente el selector img afecta tambin lo que se mostrar en el


visor. Y esto puede romper la vista. Para reescalar mis imgenes y agregarles
margen, decid envolverlas en un div. Y, entonces, mi cdigo 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>

Main.css
div img {
margin-left: 20px;
margin-right: 20px;
width: 20%;
height: 20%;
}

Extras

Es posible personalizar IntenseJS a tu gusto. Estos son algunos de los elementos


extra que yo agregu para darle estilo a mi aplicacin.

Google Fonts

Agregu mis hojas de estilo desde Google Fonts a mi HTML y en el CSS slo indico
el nombre de la fuente para usarla en cierto selector. El nombre de la fuente va
entrecomillado slo sin son dos o ms 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.

Index.html
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet'
type='text/css'>

Main.css

h1 {
font-family: 'Fjalla One', sans-serif;
}

CAMBIO DE CURSOR

En el demo, el cursor cambia al estar sobre alguna imagen. Para insertar


uno propio, acepta como parmetros la ubicacin de la imagen, ubicacin del
puntero en x, ubicacin en y. Esto se logra as:
MAIN.CSS
div img {
cursor: url('plus_cursor.png') 25 25, 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_19
36.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);}

Y as Main.css:

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;
}

Puedes consultar el el cdigo del demo en el repositorio de Github aqu. Ah


mismo puedes leer las instrucciones para descargarlo y correrlo en local.