Slideshow+Build+details

[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**

> eg INDEX+BY+STYLE_SLIDEn > i.e. Abbotsford+Grandeur_Slide1
 * 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
 * 1) The images must be uploaded to this wiki as PageName_Slide1, PageName_Slide2, etc

Create a new page and call it SLIDESHOW > eg SLIDESHOW-640x480-6 (6 images w640xh480) > SLIDESHOW-600-400-12 (12 images w600xh400)
 * Step 1 - ** Create the slide show page - **you only have to do this once (for each format) **
 * 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
 * 1) SLIDESHOW_Banner has size w900xh300

code This holds the location of the default image that is used when the other images are loading, so edit this to suit your wiki
 * Step 2 **<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 style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Step 3 **<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - embed the following code using Widget | Other HTML

code code <span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"><script language="JavaScript" type="text/javascript"> //<![CDATA[

//]]> <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">This holds the javascript


 * <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Step 4 **<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - embed the following code using Widget | Other HTML

code code <span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;"> <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;" /> <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 style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Using the slide show page **<span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;"> - this is the simple bit

code > code <span style="background-color: #f5f5f5; color: #333333; font-family: Menlo,Monaco,Consolas,'Courier New',monospace;">include page="SLIDESHOW" code
 * 1) <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Create your page
 * 2) <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">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) <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">using wikitext enter the following at the point you want the slideshow to appear

code <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 style="color: #428bca; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">here <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 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 code
 * <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Limitations: **
 * <span style="background-color: #ffffff; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 15px;">Enjoy... **