02
JUIL

Intense Image: Une lightbox fullscreen pour sublimer vos images HD

Publié le 02/07/14 à 09h04 par DJo

Intense Image Viewer est une bilbiothèque Javascript standalone permettant d'afficher vos images HD en plein écran à la manière d'une lightbox.

Intense Image Viewer est une bilbiothèque Javascript standalone permettant d'afficher vos images HD en plein écran à la manière d'une lightbox.

Que ce soit pour votre blog de voyage, votre portfolio avec visuels HD ou un album photo, il est toujours intéressant de proposer un système de zoom sur vos images pour en profiter pleinement.

Certains utiliseront des lightbox, mais qui ne seront d'aucune utilité si elles s'adaptent à un écran en 1024 x 800, car l'image affichée ne sera pas bien plus grande.

Affichage de l'image en HD

Intense Image Viewer propose un système Javascript pour afficher en plein écran l'image cliquée. Contrairement à l'affichage d'une image dans un nouvel onglet, le script permet d'ajouter l'image sur un layer par dessus le contenu du site tel une lightbox.

Démo d'affichage de l'image en fullscreen

Il est ensuite possible de naviguer dans l'image avec la souris ou avec son doigt depuis un périphérique tactile.

Recliquez sur l'image pour fermer le fullscreen et revenir sur la page web en cours de consultation.

Côté mise en place, rien de bien compliqué:

<img src="./img/awesome-source.jpg" class="intense" data-title="Ma belle photo 1" data-caption="Le net ça se cultive" />
<img src="./img/awesome-source.jpg" class="intense" data-title="Ma belle photo 2" data-caption="Le net ça se cultive" />
<script>
window.onload = function() {
    // Intensify all images with the 'intense' classname.
    var elements = document.querySelectorAll( '.intense' );
    Intense( elements );
}
</script>

A utiliser sans modération !

 

Site Officiel

Baraguiné par tobalsan le 02/07/14 à 17h32
tobalsan sur La Ferme du Web
Par contre c'est un peu dommage de charger les image full résolution en mode thumbnail avec redimenssion html/css

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web