Intégration et optimisation

Notre collection de photographies : une passion

✋ Oui, les images, certaines, sont de véritables merveilles, une petite fenêtre sur un monde révolu déjà au moment même de la prise de vue. Oui ce bref instant qu'il aura fallu à la lumière pour faire le trajet de "l'objet" à l'objectif signe au plus tôt la fin de l'instant.

---

Pourquoi cette galerie d'image responsive

❓Comme à notre habitude chez Xtendo, nous cherchons à proposer des outils et des services web qui réunissent un ensemble de qualités telles que le design, l'usabilité et la performance.

Cette galerie d'image que l'on peut parcourir via des vignettes sur desktop et/ou par toucher/glisser sur écran tactile utilise la bibliothèque Bx Slider pour la partie slide avec quelques modifications et ajouts.

Modifications : Elles sont principalement appliquées sur le CSS de base où des styles ont été supprimés et ajustés et sur le mode d'affichage des miniatures qui est dans cette démos géré via Javascript et CSS afin de limiter le nombre de requêtes au chargement.

Ajouts : Du CSS et un peu de JS. Comme indiqué au dessus l'affichage des vignettes images est optimisé et pour le design nous voulions éviter certains positionnements disgracieux pour le design. Flexbox CSS est utilisé pour garder en toute circonstance l'aspect "bloc" des miniatures et l'image de représentation est appliqué sur le background en mode "cover". Enfin quelques "Media-queries CSS3" gère l'affichage et le positionnement en fonction des largeurs de l'écran.

Recherche de performance et webdesign

➶Pour chaque miniatures est d'abord chargé une image par défaut identique pour chacune qui est ensuite remplacé via JS par l'image correspondante affiché en slide. Cette méthode à l'avantage de ne pas à avoir à générer d'images supplémentaires (une seule requête http) et que ces dernières s'affichent idéalement quelque soit la taille du conteneur.

Vous êtes ici : Accueil

Retrouvez d'autres démos Webdesign et outils en ligne

Xtendo.fr ☛ Le blog