{"id":2235,"date":"2013-02-19T18:13:06","date_gmt":"2013-02-19T18:13:06","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/02\/19\/insert-slideshow-extension-javascriptslideshow\/"},"modified":"2021-08-16T23:21:22","modified_gmt":"2021-08-17T03:21:22","slug":"insert-slideshow-extension-javascriptslideshow","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/mediawiki\/insert-slideshow-extension-javascriptslideshow\/","title":{"rendered":"Inserting a slideshow in MediaWiki"},"content":{"rendered":"

\"MediaWiki<\/a><\/p>\n

<\/div>\n

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 \u201cExtension:JavascriptSlideshow<\/em>\u201c. The Extension can be obtained at the following URL.<\/p>\n

https:\/\/mediawiki.absolutewebdev.com\/index.php?title=Special:Version<\/pre>\n
Download the JavascriptSlideshow-1.0.1.zip<\/strong> file to your local computer. Once you have the extension, follow the steps below to get the image slider extension working.<\/p>\n
Steps to install the Extension:JavascriptSlideshow<\/h2>\n
    \n
  1. \"Upload<\/a>\n
  2. \"Rename<\/a>\n
    <\/div>\n
    Rename the folder to the following:<\/p>\n
    JavascriptSlideshow<\/pre>\n<\/li>\n
  3. \"Add<\/a>\n
    <\/div>\n
    Add the following code to the bottom of your LocalSettings.php<\/strong> file found in the root directory of your MediaWiki installation.<\/p>\n
    require_once( \"$IP\/extensions\/JavascriptSlideshow\/JavascriptSlideshow.php\" );<\/pre>\n
    Save the file.<\/p><\/li>\n
  4. \"Add<\/a>\n
    <\/div>\n
    Now that you have the line of code in your LocalSettings.php<\/strong>, you can add the code to your MediaWiki page that shows the images. Log into MediaWiki <\/a>and edit the page<\/a>that you want to put the slider in and add the following:<\/p>\n
    <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><\/pre>\n
    Important!<\/strong> You will need to upload your images to your MediaWiki<\/a> site and change the image names in the code to your image names that you uploaded.<\/p>\n
    You can also control the image slider functions by adding the following to your MediaWiki page that has the slideshow in it.<\/p>\n
    {{#slideshow: <div>Tick<\/div><div>Tock<\/div> |id=bar refresh=1000 }}<\/pre>\n<\/li>\n
  5. \"change<\/a>\n
    <\/div>\n
    In 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 \u201cparent.style.position<\/em>\u201d to \u201crelative<\/em>\u201c.<\/p>\n
    extensions\/JavascriptSlideshow\/slideshow.js<\/pre>\n
    Change the following line:<\/p>\n
    parent.style.position = 'absolute';<\/pre>\n
    To the following:<\/p>\n
    parent.style.position = 'relative';<\/pre>\n
    Save the file.<\/p><\/li>\n
  6. \"Add<\/a>\n
    <\/div>\n
    Now navigate to the CSS file in your MediaWiki Skin. In this example we are editing the \u201cVector<\/em>\u201d skin screen.css<\/strong>file. The path is the following location:<\/p>\n
    skins\/vector\/screen.css<\/pre>\n
    Add the following code to the bottom of your CSS file.<\/p>\n
    .slideshow {    top:0%;     height:150px;   float:left }<\/pre>\n
    Save the changes.<\/p>\n
    Important!<\/strong> You will want to customize the height in the CSS to fit your specific image size.<\/p>\n
    \"Final<\/a><\/p>\n
    <\/div>\n
    Now you will see your image slider working like the snapshot to the right.<\/p><\/li>\n<\/ol>\n
    Optional parameters in the Slideshow plugin<\/h2>\n
    Below are the available settings for configuring the behaviors in the Extension:JavascriptSlideshow plugin.<\/p>\n\n\n\n\n\n\n\n
    Slide show parameters<\/th>\n<\/tr>\n
    id<\/th>\nAllows the slideshow to have CSS style applied using the id..<\/td>\n<\/tr>\n
    refresh<\/th>\nThis will transition each image milliseconds. 1000 milliseconds is one second.<\/td>\n<\/tr>\n
    sequence<\/th>\nThe following values will order the image sequence:\n
      \n
    • random<\/strong>: Changes the image randomly.<\/li>\n
    • forward<\/strong>: Transitions in the order of the list.<\/li>\n
    • backward<\/strong>: Transitions the opposite of the list.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
    transition<\/th>\nThe following values transition the images:\n