Actions

Utilisateur

Utilisateur:Momo50/Mon bac à sable/Carrousel

De Wikimanche

Galerie d'images

Attributs et valeurs
  • mode =
    • traditionnel Par défaut, l'effet est expliqué ci-dessous
    • nolines Pas de bordures, moins de remplissage, légendes centrées sous les images
    • packed Toutes les images sont alignées en ayant la même hauteur, justifiée, les légendes centrées sous les images
    • packed-overlay Comme packed, mais la légende recouvre l'image, dans une boîte translucide
    • packed-hover Comme packed-overlay, mais la légende n'est visible que sur hover (se dégrade gracieusement sur les lecteurs d'écran, et retombe en superposition si un écran tactile est utilisé)
    • slideshow Diaporama
  • caption = Ajoute une légende globale au-dessus de la galerie
  • widths = Largeurs d'image en pixels (n'a aucun effet si le mode est défini sur packed, packed-overlay, packed-hover ou slideshow)
  • hauteurs = Hauteur de l'image en pixels (n'a aucun effet si le mode est défini sur le diaporama)
  • perrow = Nombre d'images par ligne (n'a aucun effet si le mode est réglé sur packed, packed-overlay, packed-hover ou slideshow; Voir les notes d'utilisation, ci-dessous )
  • showfilename = yes Afficher chaque nom de fichier sous l'image correspondante
  • class = Un ou plusieurs noms de classes séparés par des espaces et placés entre guillemets
  • style = Une ou plusieurs déclarations CSS séparées par des points-virgules et placées entre guillemets


Notes d'utilisation
  • L'utilisation inconsidérée de l'attribut perrow est fortement déconseillée, car elle remplace l'utilisation flexible de différentes tailles d'affichage et de ratio d'aspect, allant des miniatures mobiles aux larges écrans "cinéma". Cependant, l'attribut devrait être utilisé lorsqu'un arrangement de réseau fixe est approprié, tel que 'avant / après', 'bas / moyen / haut', ou d'autres comparaisons systématiques d'images.
  • Si perrow est omis, la largeur est fluide: une ligne comprend autant d'images que possible sur la largeur disponible de l'affichage de l'utilisateur, enveloppant automatiquement autant de lignes supplémentaires que nécessaire.
  • Omettre perrow est maintenant recommandé par défaut . Avant MediaWiki 1.17, la valeur par défaut était 4.
  • La largeur et la hauteur par défaut sont actuellement 120px. Il est recommandé de ne pas trop spécifier la taille (à la place, acceptez la taille par défaut), à moins qu'il y ait une forte raison de remplacer les préférences d'affichage de l'utilisateur ; voir WP:Considérations physiques sur les images pour plus d'explications sur ce problème.
  • Le mode packed ajuste automatiquement la taille des images pour utiliser l'espace d'affichage disponible de façon optimale.
  • Chaque ligne spécifie un fichier image. Le préfixe File: est facultatif. Cependant, il est utile de l'inclure comme aide pour localiser rapidement les spécificateurs d'image dans le wikitext (par exemple, lors du nettoyage de la mise en page).
  • Le paramètre "thumb" n'est pas valide et ne doit pas être utilisé.
  • Les Légendes sont facultatives et sont séparées du nom de fichier par une barre verticale ("|").
  • Les crochets ("[" ou "]") ne doivent pas être inclus, à l'exception de Wikilinks inclus dans les légendes .
  • Une erreur fréquente consiste à oublier la balise de fermeture</gallery>.
  • Lors de l'utilisation, notez que de nombreux paramètres, notamment ceux relatifs à l'aspect visuel, peuvent ne pas s'appliquer ou fonctionner comme prévu sur certains skins (notamment le skin Minerva utilisé par le site mobile)

Exemple de diaporama

Test css [1]

Data-options [2]

JS

$(document).foundation({
  orbit: {
      animation: 'slide', // Définit le type d'animation utilisé pour la transition entre les diapositives, peut également être 'fade'
      timer_speed: 10000, // Définit la durée en millisecondes avant la transition d'une diapositive
      pause_on_hover: true, // Pauses sur la diapositive en cours pendant le survol
      resume_on_mouseout: false, // Si la pause sur hover est définie sur true, ce paramètre reprend la lecture après le passage de la souris hors de la diapositive
      next_on_click: true, // Passer à la diapositive suivante sur un clique
      animation_speed: 500, // Définit la durée en millisecondes de la transition entre les diapositives
      stack_on_small: false,
      navigation_arrows: true, // Définit l'affichage ou non des flèches de navigation avant arrière
      slide_number: true, // Affiche le nombre de diapositives
      slide_number_text: 'of',
      container_class: 'orbit-container',
      stack_on_small_class: 'orbit-stack-on-small',
      next_class: 'orbit-next', // Nom de classe donné au bouton suivant
      prev_class: 'orbit-prev', // Nom de la classe donné au bouton précédent
      timer_container_class: 'orbit-timer', // Nom de la classe donné à la minuterie
      timer_paused_class: 'paused', // Nom de la classe donné au bouton en pause
      timer_progress_class: 'orbit-progress', // Nom de la classe donné à la barre de progression
      slides_container_class: 'orbit-slides-container', // Nom de classe donné au conteneur de diapositives
      preloader_class: 'preloader', // Classe donnée au préchargeur
      slide_selector: 'li', // La valeur par défaut est '*' qui sélectionne tous les enfants sous le conteneur
      bullets_container_class: 'orbit-bullets',
      bullets_active_class: 'active', // Nom de classe donné à la balle active
      slide_number_class: 'orbit-slide-number', // Nom de classe donné au numéro de diapositive
      caption_class: 'orbit-caption', // Nom de classe donné à la légende
      active_slide_class: 'active', // Nom de la classe donné à la diapositive active
      orbit_transition_class: 'orbit-transitioning',
      bullets: true, // Est-ce que le curseur a des puces visibles ?
      circular: true, // Est-ce que le curseur doit aller à la première diapositive après avoir montré la dernière ?
      timer: true, // Est-ce que le curseur a une minuterie active ? Le réglage sur false désactive la minuterie.
      variable_height: false, // Le curseur a-t-il un contenu de hauteur variable ?
      swipe: true,
      before_slide_change: noop, // Exécuter une fonction avant que la diapositive ne change
      after_slide_change: noop // Exécuter une fonction après le changement de diapositive
  }
});

Notes

  1. MediaWiki Pivot Skin contributors, "Slider," MediaWiki Pivot Skin, https://pivot.wikiproject.net/w/index.php?title=Slider&oldid=21 (accédé le 4 août 2017).
  2. Zurb Foundation Orbit Slider documentation, http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html (accédé le 10 septembre 2017).