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.

http://mediawiki.absolutewebdev.com/index.php?title=Special:Version

Download the JavascriptSlideshow-1.0.1.zip 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:
    JavascriptSlideshow

  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>
    </slideshow>

    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.

    {{#slideshow:
    <div>Tick</div><div>Tock</div>
    |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 "parent.style.position" to "relative".
    extensions/JavascriptSlideshow/slideshow.js

    Change the following line:

    parent.style.position = 'absolute';

    To the following:

    parent.style.position = '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:
    skins/vector/screen.css

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

    .slideshow {
    	top:0%;
    	height:150px;
    	float:left
    }

    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.
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2229
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5653

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

Need more Help?

Search

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: support@InMotionHosting.com
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!