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 :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.animated.innerfade.js">
</script>

<script type="text/javascript">
$(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'
 });
} ); 
</script>

Dans la section BODY :

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

<ul id="animated-portfolio">     
<li>
 <a href="http://www.cc-plateau-chaisedieu.fr"><img src="squelettes/images/cc-chaisedieu.jpg" alt="cc-chaise-dieu" title="Communaut&eacute; de communes du Plateau de la Chaise-Dieu" width="400" height="411" /></a>
</li>
<li>
 <a href="http://www.casadart.fr"><img src="squelettes/images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a>
</li>
<li>
 <a href="http://www.3bm.fr"><img src="squelettes/images/3bm.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="411" /></a>
</li> 
<li>
 <a href="http://www.aupanierdauvergne.fr"><img src="squelettes/images/aupanierdauvergne.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="425" /></a>
</li> 
</ul>

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 :

<script type="text/javascript" src="squelettes/js/jquery.js"></script>
<script type="text/javascript" src="squelettes/js/jquery.animated.innerfade.js">
</script>

<script type="text/javascript">
$(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'
      }); 
} ); 
</script>

Dans la section BODY :

<ul id="animated-portfolio"> 
   <li>
 <a href="http://www.openstudio.fr"><img src="squelettes/images/statue2.jpg" alt="openstudio" title="Le Puy en Velay, Auvergne - vue depuis la statue Notre Dame" width="1373" height="375" /></a>
   </li>
   <li>
 <a href="http://www.openstudio.fr"><img src="squelettes/images/vue-puy-en-velay2-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis le Rocher Corneille" width="1739" height="375" /></a>
   </li>
   <li>
 <a href="http://www.openstudio.fr"><img src="squelettes/images/vue-puy-en-velay4-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="2099" height="375" /></a>
    </li> 
</ul>

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