CursosEmpresasBlogLiveConfPrecios

Visualiza imágenes en pantalla completa con IntenseJS

Clase 31 de 61 • Curso de JavaScript y jQuery 2015

Contenido del curso

Proyecto: Marvel Card Game

    Introducción al Front-end: Componentes, Stylus y Jade

      Tomar examen

      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

      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>

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

      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 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') 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_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);
}

      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 código del demo en el repositorio de Github aquí. Ahí mismo puedes leer  las instrucciones para descargarlo y correrlo en local.