CodiFolio

Un plugin jQuery pour comparer 2 images, faire la pluie et le beau temps.

Objectif:

Un conteneur, deux images ... Au survol de tout ce petit monde, on couvre ou découvre la première image.

Fonctionnement:

C'est un plugin qui fonctionne avec jQuery, il est paramètrisable:

La structure de l'HTML est assez simple: La première image doit posséder un attribut data-alterego avec l'url de la seconde image.
Cette première image doit avoir class="firstpic" et être contenue dans un conteneur avec class="contfirstpic"

Le tout va dans un autre conteneur sur lequel s'applique le script: voir le code plus bas.

  • orientation:'h' // ou 'v'
  • start: 0.5 // Pourcentage la première image recouvert par la deuxième.
  • containerBorderWidth: 3 // Grosseur en pixels de la bordure qui entoure le conteneur.
  • separatorBorderWidth: 3 // Grosseur en pixels de la bordure qui sépare les 2 images.
  • withmousedown:false // ou true si l'on veut que cela fonctionne avec la souris appuyée.

Demonstration: choisis ta météo.

Usage par défaut.
Le même mais avec le bouton de la souris appuyé et couverture à 90%.
Orientation verticale, avec des bords plus fins.

Code

<script src="jquery.js"></script>
<script src="jquery.piccompare.js"></script>
<div id="ex1">
    <div class="contfirstpic">
        <img class="firstpic" src="soleil.png" alt="" data-alterego="nuage.png">
    </div>
</div>		

Le plugin:

A copier-coller dans un fichier javascript si ça vous chante.

Retour à l'index.

Commentaires.

Cet article vous a plu ou pas, vous êtes un robot...
Dites-le via le formulaire ci-dessous: