Snippets/Sliding Image Gallery

How to use Snippets
List of Snippets

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

Recommendation

This snippet requires using the img html tag. A superior snippet to achieve the same thing and more is:Snippets/Sliding Image, Text or Gallery

Description

Enables an end user to post a gallery of images that layouts an infinite loop of moving slides of images. 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 repeat with the beginning image once it goes to the end of the width of the banner (which could be before or after all the images have been seen)

The Size of the Images will be controlled by CSS and any sizes set will effect nothing.

Technical Note

The first image must be referenced as the first, which requires use of the html img tag. The additionally images in the series can added with the normal Mediawiki image syntax. See usage example. To allow the html img tag follow the steps in Manual:$wgAllowImageTag (deprecated in 1.35).

Visual Example

Sliding Image Gallery:

Usage

Sliding Gallery must be between the following division tags:<div id="slidingphotocontainer"> </div> & the <div class="photobanner"> </div> with the "photobanner" inside the "slidingphotocontainer" divisor tags.

Example:

<div id="slidingphotocontainer">
   
    <div class="photobanner">
<img class="first" src="{{filepath: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]]

</div>
    </div>

Changing Size of Images

Go to the section labeled .photobanner img to change width and height of the images.

Changing the size of the banner

The width of the .photobanner is the total width of the banner of rotating images. If the images are repeating before getting to the end the images set the width higher and if you're seeing a lot of blank space set it lower. You'll need to play with to get it right for you.

You can set up lots of sizes by harding code into the css different names for different sizes. You could create .photobannerone in the css and a .photobannertwo in the css.

Changing the size & background color of the container

The width of the container can be changed by changing the width. Or ideally someone, maybe you, could re-write this snippet to express different size containers based on the size of the device viewing the the sliding gallery.

To change the background color of the container just change the color expressed after background: in the #slidingphotocontainer section.

Changing the speed of the sliding images

Change the keyframe animations from 30s to what you desire.

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 .photobanner img:hover section.

Code

Sliding Image.css:

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

#slidingphotocontainer {
    width: 1000px;
    overflow: hidden;
    margin: 10px auto;
    background: white;
}
 
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 10px;
}
 
.photobanner img {;
     height: 233px;
    width: 350px;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    transform: scale(1.4);
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
    animation: bannermove 30s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
 
}