Diapo slideshow : plugin jQuery de défilement d’images

Le 31/12/2011 par Jérôme PASQUELIN

Diapo slideshow est un plugin jQuery qui permet de créer un diaporama défilant d’images.
Il est assez récent car il date d’août 2011 (version actuelle de novembre : 1.0.4).

Je vous le présente car les effets et transitions sont vraiment sympas et pros, l’utilisation simple.

4 Méthode principales : 

  • $ (‘Sélecteur’) diapo ().; => format de base
  • $(‘selector’).diapo({fx: ‘scrollHorz’, time: ’5000′});=> un exemple avec quelques personnalisations
  • $ (‘Sélecteur’) diapoStop ().; =>  arrêter le diaporama
  • $ (‘Sélecteur’) diapoPlay ().; =>  lire / reprendre le diaporama

Les options : 

selector:‘div’, [target element]
fx:‘random’,
Available effects: ‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’
You can also use more than one effect: ‘curtainTopLeft, mosaic, bottomLeftTopRight’
mobileFx: », [leave empty if you want to display the same effect on mobile devices and on desktop etc.]
slideOn:‘random’, [next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide]
gridDifference:250, [to make the grid blocks slower than the slices, this value must be smaller than transPeriod]
easing:‘easeInOutExpo’, [for the complete list http: jqueryui.com/demos/effect/easing.html]
mobileEasing: », [leave empty if you want to display the same easing on mobile devices and on desktop etc.]
loader:‘pie’, [pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)]
loaderOpacity:.8, [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
loaderColor:‘#ffff00′,
loaderBgColor:‘#222222′,
pieDiameter:50,
piePosition:‘top:5px; right:5px’, [this option accepts any CSS value]
pieStroke:8,
barPosition:‘bottom’, [bottom, top]
barStroke:5,
navigation:true, [true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next]
mobileNavigation:true, [true, false. It enables the previous and the next buttons on mobile devices]
navigationHover:true, [true, false. If true navigation will be visible only on hover state]
mobileNavHover:true, [true, false. If true navigation will be visible only on hover state for mobile devices]
commands:true, [true, false. It enables stop and play buttons]
mobileCommands:true, [true, false. It enables stop and play buttons on mobile devices]
pagination:true, [true, false. It enables the pagination numbers. Here below you can see the appended code]
<div id= »pix_pag »>
<ul id= »pix_pag_ul »>
<li id= »pag_nav_0″><span><span>0</span></span></li>
<li id= »pag_nav_1″><span><span>1</span></span></li>
<li id= »pag_nav_2″><span><span>2</span></span></li>
…etc.
</ul>
</div>
mobilePagination:true, [true, false. It enables the pagination numbers on mobile devices]
thumbs:true, [true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices]
hover:true, [true, false. Puase on state hover. Not available for mobile devices]
pauseOnClick:true, [true, false. It stops the slideshow when you click the sliders.]
rows:4,
cols:6,
slicedRows:8, [if 0 the same value of rows]
slicedCols:12, [if 0 the same value of cols]
time:3000, [milliseconds between the end of the sliding effect and the start of the nex one]
transPeriod:1500, [lenght of the sliding effect in milliseconds]
autoAdvance:true, [true, false]
mobileAutoAdvance:true, [true, false. Auto-advancing for mobile devices]
onStartLoading:function() { },
onLoaded:function() { },
onEnterSlide:function() { },
onStartTransition:function() { }

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>

Ce site utilise Kèwhorde-Louve. Pour une ancre personnalisée, rédigez un commentaire de qualité (et si votre site est hors thématique, la modération sera plus stricte).

Lire les articles précédents :
WordPress P3 Plugin Performance Profiler : bench des extensions

Votre site sous Wordpress est lent et vous n'avez aucune idée de la cause de ces ralentissements? P3 Plugin Performance...

Fermer