Submit your widget

Animated InnerFade with JQuery

Created 9 years ago   Views 24160   downloads 3043    Author n/a
Animated InnerFade with JQuery
View DemoDownload 744.0 KB
158
Share |

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