Snippets/Fading Away Image or Gallery
Fading Away Image or Gallery | |
---|---|
Language(s): | CSS |
Compatible with: | MediaWiki 1.22+ (all) |
Description
[edit]Enables 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
[edit]Shrinking, 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
[edit]Fading 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; }
}