Waterwheel Carousel

Waterwheel Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.

Ce carousel est une création de Brian Osborne : https://www.bkosborne.com

Il est édité sous les licences GPLv3 et MIT.

Le zip d'intégration est téléchargeable ici. Il peut être installé avec l'installateur de GuppY. Celui-ci place un fichier jquery.waterwheelCarousel.js dans le dossier inc/jshead de GuppY ainsi que des imagettes de navigation dans un dossier NavWaterwheel placé dans le dossier img de GuppY. Vous pouvez bien sûr décompresser le zip et installer vous même par FTP , ces fichiers aux bons endroits.

Il est possible de créer des liens sur les images, mais pas de titres (hélas...). Des réglages sont possibles dans le style et le script du carousel. Il peut être orienté horizontalement ou verticalement, des effets différents peuvent être réalisés et notamment l'effet "arching" comme ci-dessous. Il serait possible d'afficher plusieurs carousels Waterwheel sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.

Ci-dessous, il y a un lien actif sur chaque image lorsqu'elle est centrée (sauf le titre). Mais ce n'est pas une obligation... Cliquer sur un des éléments du carousel le met en pause, les fléches de navigation sont toujours actives. Cliquer sur le bouton de navigation au centre reinitialise le carousel.

Ci-dessous, le code utilisé : Une première partie <style> </style> et <script> </script> commentée le plus possible est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités.

        $('#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;
        });

      });

      $.fn.waterwheelCarousel.defaults = {
   // Quelques options possibles

   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, // id item à placer au centre du carousel. 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:                        145, // Position de l'Axe de l'image centrale : par rapport à "top" pour horizontal, par rapport à "left" pour vertical. 0 pour auto
    AxeOffset:                  50, // 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:          0.9, // 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

   // 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

};
</script>

Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous ne verrez que la bordure, si vous en avez prévu une et les boutons de navigation si vous ne les avez pas supprimés. Il faut évidemment adapter la source de vos images et choisir les boutons de navigation qui vous conviennent, il y en a 4 jeux, mais vous pouvez mettre les vôtres.