Imágenes a pantalla completa
IntenseJS es una librería 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.
Un gran ejemplo a esto que les estoy hablando es algo así: "da clic aquí"; 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.
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.
Manos a la obra!!
Nuestro 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>.</p>
</head>
<body>
</body>
</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"/>Nuestro 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:
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.
Nuestro 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í:
<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%;
}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í:
div img {
cursor: url('plus_cursor.png') 25 25, auto;
}No hay restricción
No hay ninguna restricción al meterle mano a css. Aunque no querrás evitar contaminar los js archivos CSS con cualquier otra cosa (la edición de la etiqueta de base h1, por ejemplo), a menos que, por supuesto, eso es lo que desea personalizar tu pagina.
Compatibilidad con navegadores
Intensa ha sido probado en la última estable obra del Safari, Chrome y Firefox. Es "debería funcionar" en Internet Explorer 9 y arriba también.
El repositorio original se encuentra en la red social mas cool del universo que es (efecto de redobles épicos) GitHub
Autor del repo:
Enlace del repo:/ intensos-imágenes
Ahí mismo puedes leer las instrucciones para descargarlo y correrlo en local.
.png)
No hay comentarios.: