License

© 2008-2009 Paul Armstrong, Paul Armstrong Designs.

WebSlide by Paul Armstrong is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Based on a work at paularmstrongdesigns.com.
Permissions beyond the scope of this license may be available at http://paularmstrongdesigns.com/contact/

Please refer to the LICENSE file distributed with this package, or the Creative Commons License web page.

Installation

Copy the entire WebSlide directory to a publicly accessible location on your web site. That's it. No server-side technology is required. Awesome, isn't it?

Your folder structure should look like this:

webslide/                   The installation location of WebSlide.
webslide/application/   Holds files in order to make WebSlide run. 
                        Do not move or delete this.
webslide/demo/          Demo WebSlide show. Try loading this from your server to 
                        make sure it works.
webslide/my-webslide/   This will be your first configured WebSlide show. 
                        Follow the Configuration section to learn more.

Configuration

1. Place your slide images into my-webslide/images/
2. Open my-webslide/config.js
3. Set all variables as needed. Use the variable references below.

If your slideshow does not load or throws a JavaScript error, it's likely there is something wrong with the config.js file.

When you want to create another WebSlide show, just duplicate my-webslide/ to a new folder and upload new images. You can change all of the settings in the new config.js without interfering with your other WebSlide shows.

Sample Configuration

var wsConfig = {
client:         'Client Name',
project:        'Project Name',
date:           new Date('02/01/2009'), // MM/DD/YYYY
background:     '#FFF', // color behind slides
alignment:      'center top', // horizontal vertical
logo:           '', // optional logo image to display on startup screen
needsAuth:      false, // see documentation
autoHideNav:    false, // recommended false
server:         '', // blank for same-server
slides: [
        { title: '01', file: '01.png', description: 'description' },
        { title: '02', file: '02.png', description: 'description' } // do not include a comma after the last slide
]

Config Variable Reference

client

{string}

The name of the client for whom you are preparing this slideshow.

project

{string}

The name of the specific project.

date

{Date} new Date('MM/DD/YYYY')

The date of the presentation.

background

{string} '#FFFFFF'

CSS-acceptable color string that displays behind the slides.

alignment

{string} 'horizontal vertical'

Position on the screen to align each slide.

Allowed horizontals: center, left, right

Allowed verticals: center, top, bottom

logo

{string} 'logo.png'

Optional. This is the location of a logo image to place on the intro screen.

It is recommended to use a PNG image with alpha-transparency.

needsAuth

{boolean} false

Simple file-based authentication; "Lazy Authentication".

To use lazy authentication, first set this option to true.

Next, we'll assume that your password is awesome.

Rename the 'my-webslide/images/' directory to 'my-webslide/awesome/'.

Place all of your images in the 'my-webslide/awesome/' directory. This will override the default behavior of looking in the folder 'my-webslide/images/'.

autoHideNav

{boolean} false

Hides the navigation pane after a few seconds when the first slide displays.

slides

{Array, {Object title, file, description}}

Follow the template for setting the title, file location, and description for each slide.

file: The name of the image (01.png). Do not include the full path to this image. If not using authentication, WebSlide will automatically look in the folder 'images'.

title: The title that will appear for this image (optional)

description: An extra bit of text to describe the image separate from the title (optional)

User Controls

Intro No Authentication

click or press any key to continue to first slide

Intro Authentication

type password, hit return or press 'Log In' button to continue

Keyboard

Keyboard: ←

previous slide

Keyboard: →

next slide

Keyboard: Z

zoom in

Keyboard: X

zoom out

Keyboard: N

toggle the navigation bar

Keyboard: H

toggle the help menu

Mouse

• Click and Drag slide moves the slide around the viewport
• Click Navigate tab toggles up or down
• Click slide button in navigation bar changes to that slide
• Mouse over slide button shows title and description

Using Password Protection

WebSlide is equipped with a smart password protection option. This lets you distribute your WebSlides with peace-of-mind, knowing that only those who know the password can view the images. Configuration is very easy:

• Instead of placing your images in 'my-webslide/images/', place them in a directory named to what your password will be. So, if my password is awesome, the images should be placed in 'my-webslide/awesome/'.
• Next, in 'config.js', change the needsAuth setting to true.

Using Themes

WebSlide comes with two default themes: default and v6.

Changing themes is easy. Just open your index.html file in the particular project directory and find the following line:

class="sh_html">… link rel="stylesheet" href="../application/css/themes/default/theme.css" type="text/css" media="all" /> lip;

To change to the v6 theme, just change the word 'default' to 'v6', like this:

class="sh_html">… link rel="stylesheet" href="../application/css/themes/v6/theme.css" type="text/css" media="all" /> lip;

Creating Themes

Creating your own theme only requires knowledge of CSS. In order to make a new theme, go into application/css/themes/ and duplicate the 'default' folder and name it something else, like 'mynewtheme'.

Open the 'mynewtheme' folder. Here you should find 'loading.gif' and 'theme.css'.

If you want to replace the loading image, check out www.ajaxload.info to create free animated loading GIFs.

Now you are free to edit the 'theme.css' file and style to your liking.