Diferencia entre revisiones de «Galería de imágenes»

De WikiCafe
 
Línea 1: Línea 1:
/* CSS Sliding Image Gallery for Mediawiki
+
{{#css:Slider.css}}
*
 
* @author: Unknown
 
* current version crafted together by [[User:Christharp]] from several CSS sites.
 
*/
 
  
.wrapper {
+
<div style="position: relative; height: 1%;">
  position: absolute;
+
<div style="position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 1%;"><!--YOU CAN ADD SHADING, BACKGROUND COLOR TO STYLE THIS  -->
  top: 1%;
+
   <div style="position: relative; margin: 0 auto; width: 742px;height: 1%;"><!-- RECOMMEND THE WIDTH IS SET TO LOOK GOOD ON IPADS ETC. THIS WILL BE THE TOTAL WIDTH VIEWABLE AREA -->
   width: 4000px;
+
<div style="position: relative; overflow: hidden; height: 300px;"><!-- RECOMMENDED THIS HEIGHT IS THE SAME AS THE HEIGHT SET FOR THE IMAGES -->
-webkit-animation: 60s credits linear infinite;
+
<div class='wrapper'>
-moz-animation: 60s credits linear infinite;
+
<gallery mode="packed" widths=200px heights=300px perrow=10><!-- PERROW SHOULD BE THE SAME NUMBER AS THE TOTAL NUMBER OF IMAGES IF YOU WANT THE GALLERY TO LOOK LIKE A SLIDING ROW OF IMAGES. -->
-ms-animation:60s credits linear infinite;
+
Image:Astronotus_ocellatus.jpg
-o-animation: 60s credits linear infinite;
+
Image:Salmonlarvakils.jpg
animation: 60s credits linear infinite;
+
Image:Georgia Aquarium - Giant Grouper.jpg
}
+
Image:Pterois volitans Manado-e.jpg
 +
Image:Macropodus opercularis - front (aka).jpg
 +
Image:Fishmarket 01.jpg
 +
Image:Pseudorasbora parva(edited version).jpg
 +
Image:MC Rotfeuerfisch.jpg
 +
Image:Cleaning station konan.jpg
 +
Image:Synchiropus splendidus 2 Luc Viatour.jpg
 +
File:Psetta maxima Luc Viatour.jpg
 +
File:Australian blenny.jpg
 +
</gallery>
  
.wrapper img:hover {
+
</div>
    -webkit-transform: scale(1.4);
+
</div> </div>
    -moz-transform: scale(1.4);
 
    -o-transform: scale(1.4);
 
    -ms-transform: scale(1.4);
 
    transform: scale(1.4);
 
    cursor: pointer;
 
}
 
@keyframes credits {
 
  0% {
 
    margin-left: 0px;
 
}
 
100% {
 
    margin-left: -4000px;
 
}
 
 
}
 
  
@-webkit-keyframes credits {
+
</div></div>
  0% {
 
  margin-left: 0px;
 
  }
 
100% {
 
    margin-left: -4000px;
 
  }
 
 
 
}
 
@-moz-keyframes credits {
 
  0% {
 
    margin-left: 0px;
 
}
 
100% {
 
    margin-left: -4000px;
 
}
 
 
}
 
@-o-keyframes credits {
 
  0% {
 
    margin-left: 0px;
 
}
 
100% {
 
    margin-left: -4000px;
 
}
 
 
}
 

Revisión actual del 18:54 2 mar 2021