jQuery animation avec effet slide

Un diaporama intéressant avec Jquery que l’on peut utiliser pour des panoramiques par exemple.

Le plugin pour jQuery est une extension du travail de Torsten Baldes : InnerFade with JQuery.


A été ajouté:
- un effet slide optionnel sur de grosses images
- ’prev’, ’pause’, ’next’ fonctions
- un cadre d’arrière plan optionnel
- un titre
Le détail:

insérer dans le 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>

puis dans le 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ôtel de région » width= »2099″ height= »375″ /></a>
</li>
</ul>

et dans css:
.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;
}

ul#animated-portfolio{

padding: 0;
margin: 0;
list-style-tyle: none;
}
ul#animated-portfolio li{
padding: 0;
}

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 : ici
site pour les démos

Logiciel libre distribué sous licence GNU/GPL.

BlogBang

A voir aussi

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>