Snippets/Fading Away Image or Gallery

From MediaWiki.org
Jump to navigation Jump to search
How to use Snippets
List of Snippets
Crystal Clear action run.png
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
{
	
        -webkit-transfom: translateZ (0);
	-webkit-animation: fade 5s ease-out 2.5s infinite;
	-moz-animation: fade 5s ease-out 2.5s infinite;
	-ms-animation: fade 5s ease-out 2.5s infinite;
	-o-animation: fade 5s ease-out 2.5s infinite;
	animation: fade 5s ease-out 2.5s infinite;
}

@-webkit-keyframes fade {

	0% { -webkit-transform: scale(1.5); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes fade {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes fade {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes fade {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes fade {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}