Snippets/Sliding Image, Text or Gallery

How to use Snippets
List of Snippets

Sliding Image, Text or Gallery
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

Enables an end user to post a gallery of images that layouts an infinite loop of moving slides of images, or text. Will not show correctly on lower versions of ie (ie 9 & down, I think). Additionally it expands the image upon hover.Tested in the Foreground skin, but should work in all Mediawiki skins. It loops back to the beginning after it finishes.

This CSS right to left scroll can work with any normal Mediawiki Gallery and/or Text. Additionally it will expand the image upon hovering over it (that can be removed by removing the hover part in the css). I added a second section if you wish to pause the Slide upon Hover (for text presentations).

Visual Example

Sliding Image Gallery:

Usage

Sliding Gallery must be between the following division tags:<div id="wrapper"> </div>. Due to issues of how the preview functions it is recommended that you wrap the whole sliding gallery inside some other divisors (it's very confusing to see images, etc., sliding behind the edit field when one is in the preview mode). See inline notes for more changes & notes below.

Technically the gallery, text, etc. is not sliding, the divisor is, which means any normal wiki syntax can be used inside the divisor and be seen to be sliding. For example if you're using the Widgets extension you could, in theory, have a row of YouTube Videos sliding (not sure of the value of that, but it can be done)

With Text you could set up a series of tables and effectively have a slideshow presentation (the css can be re-written with pause points to make this more effective. or it can stopped upon hover --added the code below for this)

Example without the extra divisors to seal it off:(NOT RECOMMENDED)

<div class='wrapper'>
<gallery mode="packed" widths=200px heights=300px perrow=10>
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>

Recommended use:

<div style="position: relative; height: 1%;">
<div style="position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 1%;"><!--YOU CAN ADD SHADING, BACKGROUND COLOR TO STYLE THIS  -->
  <div style="position: relative; margin: 0 auto; width: 742px;height: 1%;"><!-- RECOMMEND THE WIDTH IS SET TO LOOK GOOD ON IPADS ETC. THIS WILL BE THE TOTAL WIDTH VIEWABLE AREA -->
<div style="position: relative; overflow: hidden; height: 300px;"><!-- RECOMMENDED THIS HEIGHT IS THE SAME AS THE HEIGHT SET FOR THE IMAGES -->
<div class='wrapper'>
<gallery mode="packed" widths=200px heights=300px perrow=10><!-- PERROW SHOULD BE THE SAME NUMBER AS THE TOTAL NUMBER OF IMAGES IF YOU WANT THE GALLERY TO LOOK LIKE A SLIDING ROW OF IMAGES. -->
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> </div>

</div></div>

Changing Size of Images

Syntax for changing the image size is normal Mediawiki syntax. However adjust divisors so overflow is not hidden.

Changing the size of the wrapper

The width of the wrapper should be more then the total width of all the images if you want to make sure all the photos are seen in the slide. You will need to play with it.

Changing the direction of the slide

The slide can function with three direction modes:normal (right to left), reverse (left to right) and alternate (starts one way switches at the end of every cycle). See code to change directions below.

Changing the speed of the sliding

Animation speed is set at 60s but you change it.Play with to find the optimal speed for you.

Changing the hover size

Image expands when someone hovers over it. You can change the size of the expanded image by changing the scale in the .wrapper img:hover section.

Stopping Slide on Hover

See second css section.

Recommendation when playing with this

It is very handle to be able to make changes and see the effectiveness of those changes immediately therefore I recommend the Extension:CSS during, at least, testing.

Code

Sliding Image, Text or Gallery.css:

/* CSS Sliding Image Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites.
 */

.wrapper {
  position: absolute;
  top: 1%;
  width: 4000px;
  animation: 60s credits linear infinite;
}

.wrapper img:hover {
    transform: scale(1.4);
    cursor: pointer;
}
@keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -4000px;
 }
 
}

For Stopping Upon Hover for text Presentations

.wrapper:hover{
    animation-play-state: paused;
    cursor: pointer;
}

To change the direction of slide: (add to wrapper section):

default:right to left:

    animation-direction:normal;

Left to right:

    animation-direction:reverse;

Alternate

    animation-direction:alternate;

Alternate-reverse

    animation-direction: alternate-reverse;