Différences entre versions de « Modèle:ResponsivePolaroidImagesSlideShow »

De wikilab
(Page créée avec « <noinclude> == Modèle pour afficher une belle liste responsive d'images == </noinclude> <!-- Ajoutez une classe à votre div pour cibler le diaporama --> <div class="pol… »)
 
Ligne 1 : Ligne 1 :
 
<noinclude>
 
<noinclude>
−
== Modèle pour afficher une belle liste responsive d'images ==
+
==modèle pour afficher une belle liste responsive d'images ==
 
</noinclude>
 
</noinclude>
  
−
<!-- Ajoutez une classe à votre div pour cibler le diaporama -->
+
<div class="polaroid" style="width=100; height=100;" >
−
<div class="polaroid slideshow" style="width:100%; height:100%;">
+
[[{{{A image principale}}}|300px|link={{{1}}}]]
−
  <!-- Vos images ici -->
+
<div class="container-polaroid">
−
  <img class="slides" src="[[{{{4}}}]]" style="width:300px;" alt="{{{3}}}">
+
<p><div class="polaroid-title>[[{{{A légende}}}|{{{A titre}}}]]</div><br>{{{A description courte}}}</p>
−
  <!-- Ajoutez autant d'images que vous le souhaitez avec la classe 'slides' -->
+
</div>
−
 
 
−
  <div class="container-polaroid">
 
−
    <p>
 
−
      <div class="polaroid-title">[[{{{7}}}|{{{6}}}]]</div>
 
−
      <br>{{{3}}}
 
−
    </p>
 
−
  </div>
 
 
</div>
 
</div>
−
 
−
<!-- Ajoutez ce script à la fin de votre page ou dans un fichier JS externe -->
 
−
<script>
 
−
var slideIndex = 0;
 
−
showSlides();
 
−
 
−
// Fonction pour changer les diapositives automatiquement
 
−
function showSlides() {
 
−
  var i;
 
−
  var slides = document.getElementsByClassName("slides");
 
−
  for (i = 0; i < slides.length; i++) {
 
−
    slides[i].style.display = "none"; 
 
−
  }
 
−
  slideIndex++;
 
−
  if (slideIndex > slides.length) {slideIndex = 1}   
 
−
  slides[slideIndex-1].style.display = "block";
 
−
  // Change image every 5 seconds
 
−
  setTimeout(showSlides, 5000);
 
−
}
 
−
</script>
 

Version du 7 juin 2024 à 14:06

modèle pour afficher une belle liste responsive d'images

[[{{{A image principale}}}|300px|link={{{1}}}]]

[[{{{A légende}}}|{{{A titre}}}]]

{{{A description courte}}}

Récupérée de « https://wikilab.myhumankit.org/index.php?title=Modèle:ResponsivePolaroidImagesSlideShow&oldid=35495 »