WebCssDesign

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.

Catégories: Ajax
Tags: Css, javascript, jquery, plugin, slide, slideshow