Snippets/Image Slideshow created by CSS

How to use Snippets
List of Snippets

Image Slideshow created by CSS
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

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

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 in Manual:$wgAllowImageTag (deprecated in 1.35). 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

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

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

Just change the height and width to change the size.

Changing number of pics, timing, etc

Play with the CSS it can be done via easily.