Images on Outweb

Galerie de photos élégante

Tue, 02 Aug 2011 08:00:44 +0000

Vous êtes photographe, amateur ou professionnel et vous vous demandez comment mettre en valeur vos photos sur votre site web ?

3D Wall Gallery vous permet de les mettre en page sous forme d’un slider plutôt attractif.

Voici comment les images se présentent dans votre navigateur. La barre sur le dessus de la page vous permet de faire glisser la “pellicule” afin de voir d’autres images.

Sur le bas de la page, vous avez un widget qui vous permet de prévisualiser vos images et ainsi de choisir directement celle qui vous intéresse.

Spriter

Wed, 27 Jul 2011 17:14:51 +0000

Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.

En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.

Détecter des visages avec JQuery

Sun, 24 Jul 2011 08:00:14 +0000

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

Zoomer sur des images avec Cloud Zoom

Sun, 03 Jul 2011 09:46:30 +0000

Cloud Zoom est un plugin JQuery qui permet de faire simplement des zooms sur des images. En plus de son style soigné, il propose plusieurs types de zooms, selon l’intégration que vous voulez faire de celui-ci.

Voici l’exemple le plus basique, mais aussi le plus commun :

Et pour metttre en place cet effet, il vous suffit d’inclure le fichier javascript cloud-zoom.1.0.2.js (dans le dossier images).

Puis pour chacune des images où vous voulez ajouter un zoom, vous devez définir les paramètres pour le zoom :

Fenêtres de dialogue JavaScript avec Modialog

Mon, 27 Jun 2011 17:42:41 +0000

Modialog est un plugin JQuery qui permet de faire des popups “à la twitter” (la transparence en moins) très simplement.
N’importe quel évènement peut être le déclencheur (click ou mouseover par exemple). La popup peut contenir tous types de contenus images, boutons, formulaire…
On pourrait très bien imaginer y mettre un formulaire de contact par exemple.

Le style de base de la popup est soigné et très sobre à la fois, il peut donc s’adapter à beaucoup de designs, mais s’il ne vous convient pas, vous avez la liberté de le changer et/ou de l’améliorer simplement.