MediaWiki

Snippets/Fading Away Image or Gallery

< Snippets
How to use Snippets
List of Snippets
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.

PHOTO OR TEXT STARTING


2.

PHOTO OR TEXT MIDDLE OF TIME PERIOD


3.

PHOTO OR TEXT ALMOST END


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; }
}
Retrieved from "https://www.mediawiki.org/w/index.php?title=Snippets/Fading_Away_Image_or_Gallery&oldid=5564631"