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

De WikiCafe
 
 
(No se muestra una edición intermedia del mismo usuario)
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 {
 
  position: absolute;
 
  top: 1%;
 
  width: 4000px;
 
-webkit-animation: 60s credits linear infinite; -moz-animation: 60s credits linear infinite; -ms-animation:60s credits linear infinite; -o-animation: 60s credits linear infinite; animation: 60s credits linear infinite; }
 
  
.wrapper img:hover {
+
<div style="position: relative; height: 1%;">
    -webkit-transform: scale(1.4);
+
<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  -->
    -moz-transform: scale(1.4);
+
  <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 -->
    -o-transform: scale(1.4);
+
<div style="position: relative; overflow: hidden; height: 300px;"><!-- RECOMMENDED THIS HEIGHT IS THE SAME AS THE HEIGHT SET FOR THE IMAGES -->
    -ms-transform: scale(1.4);
+
<div class='wrapper'>
    transform: scale(1.4);
+
<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. -->
    cursor: pointer;
+
Image:Astronotus_ocellatus.jpg
} @keyframes credits {
+
Image:Salmonlarvakils.jpg
  0% {
+
Image:Georgia Aquarium - Giant Grouper.jpg
    margin-left: 0px;
+
Image:Pterois volitans Manado-e.jpg
}
+
Image:Macropodus opercularis - front (aka).jpg
100% {
+
Image:Fishmarket 01.jpg
    margin-left: -4000px;
+
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>
  
@-webkit-keyframes credits {
+
</div>
  0% {
+
</div> </div>
  margin-left: 0px;
+
 
  }
+
</div></div>
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