Animated InnerFade with JQuery

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 :

$(document).ready( function(){
$('ul#animated-portfolio').animatedinnerfade({
speed: 1000,
timeout: 5000,
type: 'random',
containerheight: '300px',
containerwidth: '270px',
animationSpeed: 5000,
animationtype: 'fade',
bgFrame: 'none',
controlBox: 'none',
displayTitle: 'none'
});
} );

Dans la section BODY :

Comme avec le plugin Innerfade original, vous devez constituer dans votre page, la liste des images de votre diaporama :

         

  • cc-chaise-dieu
  • OpenStudio
  • OpenStudio
  • OpenStudio

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 :

$(document).ready( function(){
$('ul#animated-portfolio').animatedinnerfade({
speed: 2000,
timeout:  15000,
type: 'sequence',
containerheight: '300px',
containerwidth: '600px',
animationSpeed: 15000,
animationtype: 'fade',
bgFrame: 'squelettes/img/frame.png',
controlBox: 'show',
controlBoxClass: 'mycontrolboxclass',
controlButtonsPath: 'squelettes/img',
displayTitle: 'yes'
});
} );

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',
...
});

Download: http://www.htmldrive.net/items/download/238

Leave a comment