InMotion Hosting Support Center

MediaWiki Extension:Javascript Slideshow download In MediaWiki, you can have multiple images fade or slide in an image slider. There are a few steps to do this, which involves editing source code files. Before we get started, you will need to obtain the "Extension:JavascriptSlideshow". The Extension can be obtained at the following URL.

Download the file to your local computer. Once you have the extension, follow the steps below to get the image slider extension working.

Steps to install the Extension:JavascriptSlideshow

  1. Upload the files MediaWiki Extension:JavascriptUpload and Extract the files in a directory called "JavascriptSlideshow" in your "extensions/" folder located in the root directory of your MediaWiki directory.
  2. Rename the folder MediaWiki Extension:JavascriptRename the folder to the following:

  3. Add code to LocalSettings.php MediaWiki Extension:JavascriptAdd the following code to the bottom of your LocalSettings.php file found in the root directory of your MediaWiki installation.
    require_once( "$IP/extensions/JavascriptSlideshow/JavascriptSlideshow.php" );

    Save the file.

  4. Add image code MediaWiki Extension:JavascriptNow that you have the line of code in your LocalSettings.php, you can add the code to your MediaWiki page that shows the images. Log into MediaWiki and edit the pagethat you want to put the slider in and add the following:
    <slideshow sequence="random" transition="fade" refresh="10000">
    <div>[[Image:Image1.jpg|thumb|right|128px|Caption 1]]</div>
    <div>[[Image:Image2.jpg|thumb|right|128px|Caption 2]]</div>
    <div>[[Image:Image3.jpg|thumb|right|128px|Caption 3]]</div>

    Important! You will need to upload your images to your MediaWiki site and change the image names in the code to your image names that you uploaded.

    You can also control the image slider functions by adding the following to your MediaWiki page that has the slideshow in it.

    |id=bar refresh=1000

  5. change to relative position MediaWiki Extension:JavascriptIn order for the slide show to position correctly, the JavaScript and CSS files will need to be edited. Navigate to the following location and change the "" to "relative".

    Change the following line: = 'absolute';

    To the following: = 'relative'; 

    Save the file.

  6. Add CSS code MediaWiki Extension:JavascriptNow navigate to the CSS file in your MediaWiki Skin. In this example we are editing the "Vector" skin screen.cssfile. The path is the following location:

    Add the following code to the bottom of your CSS file.

    .slideshow {

    Save the changes.

    Important! You will want to customize the height in the CSS to fit your specific image size.

    Final view of slider MediaWiki Extension:JavascriptNow you will see your image slider working like the snapshot to the right.

Optional parameters in the Slideshow plugin

Below are the available settings for configuring the behaviors in the Extension:JavascriptSlideshow plugin.

Slide show parameters
id Allows the slideshow to have CSS style applied using the id..
refresh This will transition each image milliseconds. 1000 milliseconds is one second.
sequence The following values will order the image sequence:
  • random: Changes the image randomly.
  • forward: Transitions in the order of the list.
  • backward: Transitions the opposite of the list.
transition The following values transition the images:
  • cut: Straight transition with not direction or fade.
  • fade: Fades images into each other.
  • blinddown: Scrolls the images from top down.
Was this article helpful?
Continued Education in Course 103: Changing the MediaWiki appearance
You are viewing Section 4: Inserting a slideshow in MediaWiki
Section 3: Editing the Footer in MediaWiki
Section 5: Changing the CSS in MediaWiki

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!