Animated InnerFade with JQuery
Un diaporama animé avec effet de mouvement et conforme au w3c
Présentation
Ce plugin pour jQuery est une extension du travail de Torsten Baldes : InnerFade with JQuery.
Nous avons ajouté :
un effet de mouvement sur les images à la manière des animations en flash. Cet effet est désactivable.
la possibilité de piloter l’affichage : boutons ’précédent’, ’pause’, et suivant’
la possibilité d’afficher une image de fond au besoin pour habiller l’ensemble et se caler sur le design
l’affichage des titres des images (dans une zone modifiable via les css)
Exemple 1 : un portfolio
Dans la section HEAD :
Dans la section BODY :
Comme avec le plugin Innerfade original, vous devez constituer dans votre page, la liste des images de votre diaporama :
vérifiez dans vos feuilles de style que margin et padding sont à 0, insérez éventuellement les lignes :
ul#animated-portfolio{
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}
Exemple 2 : vues panoramiques
Dans la section HEAD :
Dans la section BODY :
Dans le CSS :
Dans cet exemple, nous avons paramétré l’affichage de la zone de titre dans notre CSS, de la façon suivante :
.innerfade-title{
position: absolute;
bottom: 20px;
left: 0;
z-index: 290;
width: 100%;
background: #00a7ee url(img/title-bg.png);
height: 34px;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: .8;
border-top: 1px solid white;
}
.innerfade-title h2{
color: white;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Arial;
font-size: 16px;
font-style: italic;
line-height: 34px;
}
.mycontrolboxclass{
position: absolute;
right: 35px;
top: 20px;
}
ainsi que :
ul#animated-portfolio{
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}
Utilisation
$('ID or class of the element containing the fading objects').animatedinnerfade({
parameter1: 'value1',
parameter2: 'value2',
...
});
| paramètres | valeurs |
|---|---|
| animationtype | Type of animation ’fade’ or ’slide’ (Default : ’fade’) |
| speed | Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default : ’normal’) |
| timeout | Time between the fades in milliseconds (Default : ’15000’) |
| type | Type of slideshow : ’sequence’ or ’random’ (Default : ’sequence’) |
| containerheight | Height of the containing element in px (Default : ’300px’) |
| containerwidth | Width of the containing element in px (Default : ’600px’) |
| animationSpeed | Animation speed in miliseconds (default : 15000). Mettez une valeur de 0 pour désactiver l’effet de mouvement |
| runningclass | CSS-Class which the container get’s applied (Default : ’innerfade’) |
| bgFrame | path to the frame to display under the view. (Default : ’none’) |
| controlBox | ’none’ ’show’ (always visible) or ’auto’ (appears on mouse over), add ’rew’, ’pause’ and ’next’ buttons on mouse over. Attention : Requires jquery >= 1.2.1 |
| controlBoxClass | CSS-Class which the container get’s applied or ’none’ (Default : ’none’) |
| controlButtonsPath | path for control buttons : previous.gif, pause.gif, play.gif and next.gif (default : ’img’) |
| displayTitle | display titles ? ’yes’ or ’none’. (default ’none’) |
| titleClass | CSS class for title panel. (Default : ’innerfade-title’) |
Vous devez donner explicitement les attributs title, width and height sur vos images pour pouvoir bénéficier de l’affichage du titre et de l’effet de mouvement.
Note : si vous utilisez une image de fond au format png, vous devez appliquer un patch pour la compatibilité avec ie6. Exemple avec le patch win_png.htc, ajoutez simplement la ligne suivante dans votre CSS :
.bg-frame img{ behavior: url(win_png.htc); }
Téléchargement
Logiciel libre distribué sous licence GNU/GPL.
lundi 29 octobre 2007
Laisser un commentaire
41 Messages de forum
-
-
-
-
-
-
-
Animated InnerFade with JQuery 11 février 2008 10:30, par Arnault
Bonjour,
Oui, c’est possible avec la fonction
triggerde jQuery. http://docs.jquery.com/Events/trigg...l’idée c’est de simuler un click sur les boutons de navigation.
voici un exemple (non testé, je l’écris en direct) :
dans la section head, dans $(document).ready()après l’appel à animated inerfade :
$("a.next-button").css("visibility", "hidden"); //on masque la flèche sur l'image
$("a.mon-declencheur-suivant").bind('click', function(){
$("a.next-button").trigger('click'); //lorsqu'on clique sur le lien "suivant", on déclenche un click sur la flèche de l'image
});
dans le body : mettre un lien pour afficher l’image suivante
<a href="#" class="mon-declencheur-suivant">suivant</a>
faire la même chose pour l’image précédente et la pausea+
-
-
-
-
-
Animated InnerFade with JQuery 11 décembre 2007 16:05, par Arnault
good idea. i have introduced new values for the ’controlBox’ parameter :
’none’ : no control box
’show’ : control box is always visible
’auto’ : control box appears on mouse overi have updated the zip file.
@+
-
-
-
-
-
:: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 2 rue Pierret 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01