Snippets/Image Slideshow created by CSS

From MediaWiki.org
Jump to navigation Jump to search
How to use Snippets
List of Snippets
Crystal Clear action run.png
Image Slideshow created by CSS
Language(s): CSS
Compatible with: MediaWiki 1.22+ (all)

Description[edit source]

This CSS creates the ability to create a slideshow of images using just CSS. It's an inferior method to creating a slideshow then Extension:JavascriptSlideshow but it never hurts to have more ways to do something. It expects to have five and only five photos in the slideshow. Of course you can play with the code and change that (and since it's CSS it's very easy to play with the code)

SPECIAL TECHNICAL ISSUE[edit source]

This snippet only works with the html img tag, which is normally not allowed in Mediawiki. However you can change that very easily by following the steps here:Manual:$wgAllowImageTag. Full path to the image must be written out. Use the filepath command {{filepath:{{{Name of Photo}}} }} to set that, which makes it easy to use in a template.

Older browsers, like ie 8 and down, may not play the slideshow correctly.


Usage[edit source]

Gallery, or Image, must be between the following division tags: <div class="containerphoto"> </div> and image must reference the class (see example). Just list your five images on the Page (like the example) and the Images will appear in the Slideshow.


Example:

 <div class="containerphoto">
  <img class='photoslide'  src="{{filepath:Astronotus_ocellatus.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Salmonlarvakils.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Georgia Aquarium - Giant Grouper.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Pterois volitans Manado-e.jpg}}"/>
 <img class='photoslide'  src="{{filepath:MC Rotfeuerfisch.jpg}}"/>

</div>


Code[edit source]

Image Slideshow.css:

/* CSS Image Slideshow created by CSS
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 */

.containerphoto{
   height: 500px;
   width: 500px;
  overflow:hidden;
  position:relative;
}

.photoslide{
  position:absolute;
  animation:round 20s infinite;
  opacity:0;
  
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(5){animation-delay:0s;}
img:nth-child(4){animation-delay:4s;}
img:nth-child(3){animation-delay:8s;}
img:nth-child(2){animation-delay:12s;}
img:nth-child(1){animation-delay:16s;}
}

Changing Image Size[edit source]

Just change the height and width to change the size.

Changing number of pics, timing, etc[edit source]

Play with the CSS it can be done via easily.