• Sur ce site, vous trouverez :
    Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Waterwheel Carousel
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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 : http://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.

<style type="text/css">      
      #carousel { /*attributs du conteneur*/
        width:100%; /*largeur en % ou en pixels*/
        border:0px solid #222; /*épaisseur, nature, couleur de la bordure*/
        height:245px; /*hauteur*/
        position:relative;
        margin:0 auto; /*marges extérieures*/
        clear:both;
        overflow:hidden;
        background:transparent; /*couleur de fond*/
      }
      #carousel img {
        visibility:hidden; /*hide images until carousel can handle them*/
        cursor:pointer; /*otherwise it's not as obvious items can be clicked*/
      }
</style>


<script type="text/javascript">
$(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;
        });

      });
      
      $.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 : http://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.

<div id="carousel">
    <a><img src="photo/gal_6/carouselW/titre.jpg" id="item-1" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=7&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence00.jpg" id="item-2" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=8&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence00b.jpg" id="item-3" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=9&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence01.jpg" id="item-4" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=10&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence01b.jpg" id="item-5" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=11&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence02.jpg" id="item-6" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=12&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence02b.jpg" id="item-7" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=13&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence03.jpg" id="item-8" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=14&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence03b.jpg" id="item-9" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=15&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence04.jpg" id="item-10" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=16&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence04b.jpg" id="item-11" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=17&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence05.jpg" id="item-12" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=18&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence05b.jpg" id="item-13" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=111&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence06.jpg" id="item-14" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=112&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence06b.jpg" id="item-15" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=113&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence07.jpg" id="item-16" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=114&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence07b.jpg" id="item-17" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=115&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence08.jpg" id="item-18" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=116&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence08b.jpg" id="item-19" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=139&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence09.jpg" id="item-20" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=141&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence10.jpg" id="item-21" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=178&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence11.jpg" id="item-22" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=179&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence12.jpg" id="item-23" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=181&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence13.jpg" id="item-24" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=188&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence14.jpg" id="item-25" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=189&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence15.jpg" id="item-26" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=189&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence16.jpg" id="item-27" /></a>
    <a href="dwnld71.php?lng=fr&amp;pg=189&amp;tconfig=0"><img src="photo/gal_6/carouselW/skin_transparence17.jpg" id="item-28" /></a>

</div>

<div style="text-align:center; margin-top:2px;">
    <a href="#" id="prev"><img src="img/NavWaterwheel/backwardB.png" /></a>
    <a href="#" id="reload"><img src="img/NavWaterwheel/refreshB.png" /></a>
    <a href="#" id="next"><img src="img/NavWaterwheel/forwardB.png" /></a>
</div>

Si vous souhaitez afficher ce type de carousel dans un Iframe, regardez ici. Les réglages sont exactement les mêmes.

Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.


Date de création : 19/12/2016 @ 07:59
Catégorie : Astuces - Carousels
Page lue 857 fois


Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Waterwheel Carousel
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 35 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
TdWB
Recopier le code :
11 Abonnés