[Previous Post: Slideshow .... Next Post: ]

Here is a very simple way to add a slide show to your wiki
-
SimonTelescopium May 27, 2010

Basic Concepts

  1. The code for the slideshow is javascript this resides in it's own page - I call the Slideshow page http://federation-house.wikispaces.com/Slideshow
  2. Any page I want to add a slideshow to I simply 'include' the slideshow page
  3. This javascript will load ten images with names based on the pagename
    eg INDEX+BY+STYLE_SLIDEn
    i.e. Abbotsford+Grandeur_Slide1
  4. The images must be uploaded to this wiki as PageName_Slide1, PageName_Slide2, etc

Step 1 - Create the slide show page - you only have to do this once (for each format)
Create a new page and call it SLIDESHOW
  1. Check the size and number of images.
  2. This code allows 10 images of width 800, height 600 (w800xh600)
  3. To use different sizes or numbers of images, a new SLIDESHOW page is needed (copy code from SLIDESHOW and save as
    eg SLIDESHOW-640x480-6 (6 images w640xh480)
    SLIDESHOW-600-400-12 (12 images w600xh400)
  4. SLIDESHOW_Banner has size w900xh300

Step 2 - embed the following code using Widget | Other HTML
<span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"><img width="800" height="600" id="myImage" name="myImage"
src="
http://federation-house.wikispaces.com/file/view/06581974.jpg
" /><span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">This holds the location of the default image that is used when the other images are loading, so edit this to suit your wiki</span>
 
**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Step 3</span>**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - embed the following code using Widget | Other HTML</span>
 
</span>
<span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
 
var dimages=new Array();
var numImages=10;
var wiki="http://www."+wikispaces_spaceName+".wikispaces.com/file/view/"
var wikipage = wikispaces_page
var direction = 1; // direction = 1 = forward , -1 = backward
for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src=wiki+wikipage+"_SLIDE"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
  if (document.images)
  {
   var nextImage=curImage+direction;
   //check if next image is still in range
   if (nextImage>=numImages)
      nextImage=0;
   if (nextImage<0)
      nextImage=numImages-1;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }
      setTimeout("swapPicture()", 2000);
    }
    else
    {
   setTimeout("swapPicture()", 500);
    }
  }
}
setTimeout("swapPicture()", 1500);
function back()
{
direction = -1
//if (document.images.backbutton)
//        target=document.images.backbutton;
//      if (document.all && document.getElementById("backbutton"))
//        {
//      target=document.getElementById("backbutton");
//      target.src = "file/view/slideshowback2.png";
//      }
}
function forward()
{
direction = 1
}
function stop()
{
direction = 0
}
//-->
//]]>
</script><span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">This holds the javascript</span>
 
**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Step 4</span>**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - embed the following code using Widget | Other HTML</span>
 
</span>
<span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"><center>
<img id="backbutton" name="backbutton"
src="http://cmhas.wikispaces.com/file/view/slideshowback.png" onclick="back();" />
<img id="stopbutton" name="stopbutton"
src="http://cmhas.wikispaces.com/file/view/slideshowstop.png" onclick="stop();" />
<img id="forwardbutton" name="forwardbutton"
src="http://cmhas.wikispaces.com/file/view/slideshowforward.png" onclick="forward();" />
</center>
 <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">This holds the control buttons and the images for them edit to suit your wiki</span>
 
**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Using the slide show page</span>**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - this is the simple bit</span>
 
</span>
  1. Create your page
  2. upload 10, 800x600 images you must us the following naming convention PAGENAME_SLIDEn i.e. a slideshow on the page DANSON2009 would have images named DANSON2009_SLIDE1, DANSON2009_SLIDE2 ... DANSON2009_SLIDE10
  3. using wikitext enter the following at the point you want the slideshow to appear
    <span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;">[[include page="SLIDESHOW"]]</span>

<span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"><span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">all this actually does is include a page called SLIDESHOW into your page this page will use images for the slide show based on your pages' name (see 2 above)
 
To see this in action have a look </span><span style="color: #428bca; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">[[@www/KellingHeath2009|here]]</span>
**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Limitations:</span>**
<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">- 10 images no more no less
- 640x480 image size
- only one slideshow per page</span>
**<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Enjoy...</span>**
<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Simon
BTW the javascript isn't mine I just modified it to make it work with wikispaces variables</span></span>