Outweb

Étiquette : images

Galerie de photos élégante

de

On août 2, 2011

dans Autre

Temps de lecture : < 1 minute

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.

Vous l’aurez compris, ce projet basé sur JQuery UI est très intéressant, cependant, le seul bémol est la mise en place de cet outil.

En effet, pour ajouter une image il vous faudra :

  • Votre image en taille normale
  • Votre image en miniature
  • Ajouter votre grande image à la liste des images
  • Ajouter votre miniature à la liste des miniatures
  • Ajouter un lien pour afficher votre grande image à partir du widget

Il est bien dommage que le projet ne soit pas un fichier php qui listerait les images et qui générerait le fichier HTML automatiquement.

Cependant, la version téléchargeable contient un fichier index.html d’exemple, il vous suffira de remplacer les liens des images et de supprimer celles qui sont en trop.

Spriter

de

On juillet 27, 2011

dans Optimisation

Temps de lecture : 2 minutes

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.

Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.

Voici par exemple le spriter de Google

outweb-spriter

La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.

Voici un exemple simple de spriter

Source: https://www.pixelcrea.com/blog/sprites-css/

Nous allons utiliser cette image pour afficher seulement une icône à la fois.

Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.

Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow

Détecter des visages avec JQuery

de

On juillet 24, 2011

dans JQuery

Temps de lecture : 2 minutes

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.

Vous trouverez à la page Face Detection un exemple, sur une image de bonne taille et contenant deux visages de face.

Encore une fois, l’utilisation est très simple, il vous suffit, après avoir inclu les fichiers javascript, de faire un appel de cette manière :

var coords = $('#myPicture').faceDetection();

Après cet appel, la variable coords contient (comme son nom l’indique) les coordonnées des visages qui ont été détectés sous le format suivant :

  • x: coordonnée X du visage
  • y: coordonnée Y du visage
  • width: largeur du visage
  • height: hauteur du visage
  • positionX: positon en x par rapport à document
  • positionY: positon en y par rapport à document
  • offsetX: positon en x par rapport à parent
  • offsetY: positon en y par rapport à parent

Voici le résultat obtenu sur une image après avoir fait appel au plugin, ici les coordonnées sont utilisées pour dessiner un rectangle autour de la tête :

En combinant ceci à Système de tag d’images avec JQuery image annotate on pourrait obtenir un tag d’images avancé, détectant les visages et vous proposant d’y mettre un nom.

Zoomer sur des images avec Cloud Zoom

de

On juillet 3, 2011

dans JQuery

Temps de lecture : < 1 minute

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 :

       <div class="zoom-small-image"> <a href='grosseimage.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"> 
       
        <img src="petiteimage.jpg" title="Message" alt=''/></a> </div>

Fenêtres de dialogue JavaScript avec Modialog

de

On juin 27, 2011

dans JQuery

Temps de lecture : 2 minutes

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.

Voici un exemple basique d’utilisation de la librairie :

     <p>
     <a id="open0" href="#">Hello world </a>
     <div id="dialog0" class="dialog">
       <div class="content">Hello world! </div>
     </div>
     </p>

 <script>

    var $dlg0 = $('#dialog0');
    $dlg0.modialog();

    $('#open0').click(function() {
      $dlg0.modialog('open');
      return false;
    });

 </script>

Si vous souhaitez un exemple un peu plus complet : Demo

Voici des exemples en images du rendu de base. Tout en sachant que je n’ai pas du tout personnalisé le CSS. Imaginez-les avec le CSS de votre site Internet 😛

Il s’agit donc ici d’un plugin qui va très vite s’imposer dans mes applications web.

Fièrement propulsé par WordPress & Thème par Anders Norén