Snippets/Fading Away Image or Gallery
![]() | |
---|---|
Language(s): | CSS |
Compatible with: | MediaWiki 1.22+ (all) |
Description
editEnables an end user to post an Image, text, or gallery that fades, shrinks away before looping to start over. Will not show correctly on lower versions of ie (ie 9 & down, I think). Tested in the Foreground skin, but should work in all Mediawiki skins. Looks best with a slideshow.
To help visualize picture the text below fading away from you (like it's traveling away from you):
1.
2.
3.
4.Vanish (END)
5.Start over
Usage
editShrinking, Fading Image, text, or gallery must be between the following division tags:<div id="fadingimages"> </div> & for good alignment, centering and for avoiding possible strange previews I suggest you wrap the fadingimages divisor inside another divisor.
Slideshow Example:(using the Extension:JavascriptSlideshow & an arraymaptemplate from Extension:Semantic Forms with the sizes being defined as a variable via the Extension:Variables
<div style="width: 242px;"> <div class="fadingimages">{{#vardefine:width|242}} {{#vardefine:height|200}} {{#slideshow: {{#arraymaptemplate:Image1.jpg,Image2.jpg,Image3.jpg|Slideshow Image|,|}} |refresh=2000 sequence=random transition=blindDown }} </div></div>
Less Complex Slideshow example:
<div style="width: 242px;"> <div class="fadingimages"> <slideshow sequence="random" transition="fade" refresh="10000"> <div>[[Image:Image1.jpg|thumb|right|242px|Caption 1]]</div> <div>[[Image:Image2.jpg|thumb|right|242px|Caption 2]]</div> <div>[[Image:Image3.jpg|thumb|right|242px|Caption 3]]</div> </slideshow> </div></div>
Gallery
<div style="width: 600px;"> <div class="fadingimages"> <gallery> Image:Astronotus_ocellatus.jpg Image:Salmonlarvakils.jpg 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> </div></div>
One Image:
<div style="width: 242px;"> <div class="fadingimages"> [[File:Image.jpg|242px]] </div></div>
Text:
<div style="width: 242px;"> <div class="fadingimages"> Mediawiki is amazing!!! </div></div>
Code
editFading Away Image or Gallery.css:
/* Fading Away Image or Gallery for Mediawiki
*
* @author: Unknown
* current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
*/
.fadingimages
{
animation: fade 5s ease-out 2.5s infinite;
}
@keyframes fade {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}