Visualiza Imágenes en Pantalla Completa Con IntenseJS

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>

<script src='intense.js'></script>
<script src='main.js'></script>


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

<script src='intense.js'></script>
<script src='main.js'></script>


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

Visualiza Imágenes en Pantalla Completa Con IntenseJS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Visualiza Imágenes en Pantalla Completa Con IntenseJS

Hochgeladen von

Copyright:

Verfügbare Formate

Visualiza imgenes en pantalla completa con IntenseJS

Las libreras son conjuntos de recursos que extienden las capacidades de

Index.html: el documento donde organizamos los elementos y cargamos los

Main.js: el documento con el programa de Javascript en el que mandaremos

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

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

Para usar Intense, nuestras imgenes deben estar dentro de los

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

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

Entonces, nuestro script dice:

Cuando cargue la ventana, // window.onload =

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

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

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

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

Index.html qued as:

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

Das könnte Ihnen auch gefallen