adHoc.71site.fr

$(document).ready(function () {
 var carousel = $("#carousel").waterwheelCarousel({
  movingToCenter: function ($item) {
   $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br />
');
  },
  movedToCenter: function ($item) {
   $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br />
');
  },
  movingFromCenter: function ($item) {
   $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br />
');
  },
  movedFromCenter: function ($item) {
   $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br />
');
  },
  clickedCenter: function ($item) {
   $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br />
');
  }
 });

 $('#prev').bind('click', function () {
  carousel.prev();
  return false
 });

 $('#next').bind('click', function () {
  carousel.next();
  return false;
 });

 $('#reload').bind('click', function () {
  newOptions = eval("(" + $('#newoptions').val() + ")");
  carousel.reload(newOptions);
  return false;
 });

});

if (window.matchMedia("(min-width: 760px)").matches) {
// Pour écrans de dimension supérieure ou égale à 760 px de largeur */

$.fn.waterwheelCarousel.defaults = {
// Quelques options possibles pour cette largeur d'écran >=760px

orientation: 'horizontal',  // 'horizontal' ou 'vertical' pour l'orientation du carousel
autoPlay: 2500,  // temps d'affichage d'une image au centre en millisecondes (peut être négatif=rotation inverse). 0 pour manuel.
speed: 1000,  // temps de l'animation en millisecondes
startingItem: 1,  // item à placer au centre du carousel. Mettre 0 pour auto
flankingItems: 3,  // nombre d'items visibles de chaque côté de l'image centrale
separation: 175,  // distance entre les items du carousel
separationMultiplier: 0.6,  // coefficient multiplicateur pour les distances des items additionnels
Axe: 0,  // Position de l'Axe de l'image centrale : par rapport à "top" pour horizontal, par rapport à "left" pour vertical, Mettre 0 pour auto
AxeOffset: 15,  // distance à l'Axe de l'image centrale pour les items additionnels. négatif > bas ou droite. positif > haut ou gauche (effet "arching")
AxeOffsetMultiplier: 0.7,  // coefficient multiplicateur pour les distances à l'Axe de l'image centrale pour les items additionnels
sizeMultiplier: 0.7,  // coefficient multiplicateur pour les tailles des items additionnels
opacityMultiplier: 1.0,  // coefficient multiplicateur pour l'opacité des items additionnels

animationEasing: 'linear',  // type d'animation : linear, easeInOutCubic, easeInExpo... voir ici par exemple : https://easings.net/fr
quickerForFurther: false,  // true or false pour amener rapidement un item additionnel cliqué au centre
edgeFadeEnabled: false,  // disparition et apparition items en bordure : true pour effet de "fade", false pour effet de "slide" derrière le carousel
keyboardNav: false,  // true or false pour utiliser les touches du clavier
imageNav: true,  // true or false pour cliquer un item additionnel et l'amener au centre
preloadImages: true,  // true or false pour précharger les images avant le lancement du carousel (peut être long)
linkHandling: 2,  // 1 pour désactiver les liens éventuels, 2 pour l'activer sur l'image centrale
forcedImageWidth: 0,  // spécifier la largeur de toutes les images. 0 pour automatique
forcedImageHeight: 0,  // spécifier la hauteur de toutes les images. 0 pour automatique
activeClassName: 'carousel-center', // nom de la class de l'image centrale

// callback functions (Ne pas modifier)
movingToCenter: $.noop, // fired when an item is about to move to the center position
movedToCenter: $.noop, // fired when an item has finished moving to the center
clickedCenter: $.noop, // fired when the center item has been clicked
movingFromCenter: $.noop, // fired when an item is about to leave the center position
movedFromCenter: $.noop // fired when an item has finished moving from the center
};

} else {
// Pour écrans de dimension inférieure à 760 px de largeur */

$.fn.waterwheelCarousel.defaults = {
// Quelques options possibles pour cette largeur d'écran <760px

orientation: 'vertical',  // 'horizontal' ou 'vertical' pour l'orientation du carousel
autoPlay: 2500,  // temps d'affichage d'une image au centre en millisecondes (peut être négatif=rotation inverse). 0 pour manuel.
speed: 1000,  // temps de l'animation en millisecondes
startingItem: 1,  // item à placer au centre du carousel. Mettre 0 pour auto
flankingItems: 3,  // nombre d'items visibles de chaque côté de l'image centrale
separation: 100,  // distance entre les items du carousel
separationMultiplier: 0.6,  // coefficient multiplicateur pour les distances des items additionnels
Axe: 0,  // Position de l'Axe de l'image centrale : par rapport à "top" pour horizontal, par rapport à "left" pour vertical, Mettre 0 pour auto
AxeOffset: 0,  // distance à l'Axe de l'image centrale pour les items additionnels. négatif > bas ou droite. positif > haut ou gauche (effet "arching")
AxeOffsetMultiplier: 0.7,  // coefficient multiplicateur pour les distances à l'Axe de l'image centrale pour les items additionnels
sizeMultiplier: 0.7,  // coefficient multiplicateur pour les tailles des items additionnels
opacityMultiplier: 1.0,  // coefficient multiplicateur pour l'opacité des items additionnels

animationEasing: 'linear',  // type d'animation : linear, easeInOutCubic, easeInExpo... voir ici par exemple : https://easings.net/fr
quickerForFurther: false,  // true or false pour amener rapidement un item additionnel cliqué au centre
edgeFadeEnabled: false,  // disparition et apparition items en bordure : true pour effet de "fade", false pour effet de "slide" derrière le carousel
keyboardNav: false,  // true or false pour utiliser les touches du clavier
imageNav: true,  // true or false pour cliquer un item additionnel et l'amener au centre
preloadImages: true,  // true or false pour précharger les images avant le lancement du carousel (peut être long)
linkHandling: 2,  // 1 pour désactiver les liens éventuels, 2 pour l'activer sur l'image centrale
forcedImageWidth: 0,  // spécifier la largeur de toutes les images. 0 pour automatique
forcedImageHeight: 0,  // spécifier la hauteur de toutes les images. 0 pour automatique
activeClassName: 'carousel-center', // nom de la class de l'image centrale

// callback functions **** IMPORTANT NE PAS SUPPRIMER ****
movingToCenter: $.noop, // fired when an item is about to move to the center position
movedToCenter: $.noop, // fired when an item has finished moving to the center
clickedCenter: $.noop, // fired when the center item has been clicked
movingFromCenter: $.noop, // fired when an item is about to leave the center position
movedFromCenter: $.noop // fired when an item has finished moving from the center
};

}