Loading ...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.
Popularité : 38% [?]
Laisser un commentaire