Test

From Wiki Shangri-La

Tabs from Foreground Website

Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.

orbit

orbit2

  • <img src="../img/demos/demo3.jpg" />
    ...
  • <img src="../img/demos/demo3.jpg" />
    ...
  • <img src="../img/demos/demo3.jpg" />
    ...





Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.



Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.

Caption1
Caption2
Caption3


Accordion

Adding an accordion class to the section container will show an accordion on both small and large screens.

Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.


Accordion with blockquote

Adding an accordion class to the section container will show an accordion on both small and large screens.

Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.


Tabs

Adding a tabs class to the section container will enable tabs on both small and large screens.

Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.



vertical-tabs


Lorem

Some text to show in the Lorem tab.

Eleifend

Some text to show in the Eleifend tab.

Urna

Some text to show in the Urna tab.

Magna

Some text to show in the Magna tab.


Vertical Nav/Accordion

Adding a vertical-nav class to the section container will enable vertical navigation elements on large screens and show an accordion on small screens. Vertical navigation elements usually appear within the grid so the width can be controlled on desktop. Use the side-nav class on the list to apply the Foundation navigation styles



Lorem

  • blabla1
  • blabla2
  • blabla3
  • blabla1

Elefendi

  • cuicui1CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
  • cuicui2>
  • cuicui3
  • cuicui4

Content to the right of the navigation.


Horizontal Nav/Nav Bar

Adding a horizontal-nav class to the section container will enable horizontal navigation elements on large screens and show an accordion on small screens. Horizontal navigation is a combination of the tab setting with vertical navigation drop downs. Use the side-nav class on the list to apply the Foundation navigation styles

Lorem

  • blabla 1
  • blabla2
  • blabla3
  • after the divider

Ipsum

  • Cuicui1
  • Cuicui2
  • Cuicui3
  • after the divider

orbit3

We'll Automatically Add HTML

To keep your markup really clean, we've let JS add what's needed for the navigation, bullets and other parts of the plugin. Once the page has been loaded, your markup will look different. Below is an example of the markup so you know what to target.

  • ...
  • ...
  • ...
  • ...
  • ...
Prev Next
1 of 3

magellan

test

Has Hover Dropdown

drop-down

Has Content Dropdown

section accordion

Section 1

Content of section 1.

Section 2

Content of section 2.

Tabs

Section 1

Content of section 1.

Section 2

Content of section 2.

Vertical tabs

Section 1

Content of section 1.

Section 2

Content of section 2.

Section 3

Content of section 3.

vertical nav accordion

Content to the right of the navigation.

horizontal nav/navbar

deep linking

Section 1

Content of section 1.

Section 2

Content of section 2.

nested section

ROOT: Section 1

Content 1 Summary Paragraphs

DETAIL: #1

Detail awesome stuff!

DETAIL: #2

Detail awesome stuff numeroe duo.

ROOT: Section 2

Content 2

Disqus

Ajouter votre commentaire

Label " Lire la suite"

<a>

Syntax minimale

Regular Label
Regular Label
Lire la suite

Foreground Label

Lire la suite

Syntax UrbanStyle Elements

En savoir plus

UrbanStyle Clickable Button


<div class="label" style="padding: 0.6rem 1.2rem 0.7rem 1.2rem;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default; 
  color:#fbfbfb; 
  background:#3498db">[[Accueil | <span style="color:white">En savoir plus]]</span></div>

test

button bar

drop down button

Default Button
Tiny Button
Small Button
Large Button


Secondary Button Success Button Alert Button

Radius Button Round Button

splitbutton

Default Button Tiny Button Small Button Large Button Secondary Button Success Button Alert Button Radius Button Round Button

=Table basics

<thead> </thead> <tbody> </tbody>
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Label horizontal

  • <a href="#">Home</a>
  • <a href="#">Pricing</a>
  • <a href="#">Contact Us</a>

Pagination

Essai 1Build With Predefined HTML Classes

Essai 2 Centered Pagination

Label HTML code

Regular Label

Regular Label

Radius Secondary Label

Radius Secondary Label

Round Alert Label

Round Alert Label

Warning Label

Warning Label

Success Label

Success Label

AddThis

1° essai

blabla

blabla
blabla


blabla

2°ESSAI

 Ajouter un Commentaire 



 Ajouter
Commentaire
 

3°essai

Fading image text or gallery

Modèle:Snippet

Description

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

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:Banner1.jpg,Capture d’écran 2017-11-07 à 23.04.00.jpg,Banner3.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:Banner1.jpg|thumb|right|242px|Caption 1]]</div>
<div>[[Image:Capture d’écran 2017-11-07 à 23.04.00.jpg|thumb|right|242px|Caption 2]]</div>
<div>[[Image:Banner3.jpg|thumb|right|242px|Caption 3]]</div>
</slideshow>
</div></div>

Gallery

<div style="width: 600px;">
<div class="fadingimages">
<gallery>
[[Image:Banner1.jpg| |Caption1]]
[[Image:Capture d’écran 2017-11-07 à 23.04.00.jpg| |Caption2]]
[[Image:Banner3.jpg| |Caption3]]
</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

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; }
}

Modèle:Snippet

New Snippet

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 here:Manual:$wgAllowImageTag.

Visual Example

Sliding Image Gallery:
500xpx

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;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}