Zoom y navegación de imágenes a pantalla completa

Intense Images es una muy buena biblioteca escrita con JavaScript para realizar zoom en imágenes a pantalla completa sin perder calidad.

El aspecto más diferenciador de este recurso es que no escala las imágenes ni cambia su aspecto/radio, esto lo logra permitiendo el desplazamiento de la imagen según la posición del mouse, esto soluciona el problema de perdida de calidad al cambiar la proporción de una imagen para que encaje en el navegador, en lo personal este punto lo considero el más importante de este proyecto.

Ejemplo de uso:

Una vez que insertamos la biblioteca Intense.js a nuestro proyecto tenemos dos formas distintas de implementar la estructura HTML:

<img src="./img/awesome-source.jpg" />

<!-- O podemos emplear una simple caja -->

<div class="anything" data-image="./img/awesome-source.jpg" />

Además contamos con la posibilidad de emplear data-title y data-caption si deseamos mostrar información adicionar en una capa superior cuando la imagen se encuentra ampliada.

Luego agregamos a nuestra hoja de estilo la clase necesaria para mostrar el cursor, desde aquí podemos personalizar este elemento de una forma muy sencilla:

.your-image-class {
    cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;
}

Y por ultimo iniciamos la biblioteca:

<img src="./img/awesome-source.jpg" />

<script>
window.onload = function() {
    // Intensify all images on the page.
    var element = document.querySelector( 'img' );
    Intense( element );
}
</script>

Como alternativa podemos emplear una clase para aplicar el efecto a múltiples elementos:

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

<script>
window.onload = function() {
    // Intensify all images with the 'intense' classname.
    var elements = document.querySelectorAll( '.intense' );
    Intense( elements );
}
</script>

Intense Images se encuentra liberado bajo licencia MIT, garantizando su libre utilización.