Plugin Slide Show

This Tiki feature allows users to use the content of a Wiki Page to create a slideshow (presentation). Introduced in Tiki7 and improved later, the feature was Revamped in Tiki19 and a complementary plugin, the SlideShowSlide plugin was added to allow fine tuning per slide.

Plugin Slideshow is an existing Tiki Plugin to create a slideshow of a page. The Plugin was updated in the Tiki 19.0 and now has moved on to use Reveal.js. The PluginSlideShow is now more powerful than ever before. It has better transitions and control over individual slides.

Admin Settings

Go to Admin Control Panels and search for "Slideshow" and enable the Slideshow features mentioning Reveal.js the updated Slideshow component.

Click to expand

Parameters

Create a slideshow from the content of a wiki page
Introduced in Tiki 7.
Go to the source code
Preferences required: wikiplugin_slideshow, feature_slideshow

Parameters	Accepted Values	Description	Default	Since
`parallaxBackgroundHorizontal`		Number of pixels to move the parallax background per slide, Calculated automatically unless specified. Set to 0 to disable movement along an axis		19.0
`parallaxBackgroundSize`		syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)		19.0
`parallaxBackgroundVertical`				19.0
`autoSlide`	digits	Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides	0	19.0
`autoSlideStoppable`	y n	Stop auto-sliding after user input	y	19.0
`alignImage`	n y	Automatically move images to left hand side of slide text, will only align images greater than 200px in width	n	19.0
`backgroundTransition`	none fade slide convex concave zoom	Transition style for full page slide backgrounds	fade	19.0
`controls`	y n	Display presentation control arrows	y	19.0
`controlsBackArrows`	faded hidden visible	Visibility rule for backwards navigation arrows; "faded", "hidden" or "visible"	faded	19.0
`controlsLayout`	bottom-right edges	Determines where controls appear, "edges" or "bottom-right"	bottom-right	19.0
`fragmentClass`	grow shrink fade-out fade-up current-visible		grow	19.0
`fragmentHighlightColor`	none red green blue		blue	19.0
`fragments`	y n	Turns fragments on and off globally	y	19.0
`parallaxBackgroundImage`		URL of the background image to use in your slideshow, overrides `backgroundcolor`		19.0
`progress`	y n	Display a presentation progress bar	y	19.0
`slideNumber`	y n	Display the page number of the current slide	n	19.0
`theme`	black blood beige league moon night serif simple sky solarized	The theme you want to use for the slideshow, default will be what you choose from the admin panel under Look and Feel for jQuery UI	black	19.0
`headingLevelSlideSeparator`	1 2 3 4 5 6	Allows you to specify the heading levels to use to trigger a new slide (Included between h1 and h6)	3	26.0
`transition`	zoom fade slide convex concave (blank)	Transition style	zoom	19.0
`transitionSpeed`	default fast slow	Transition Speed		19.0

 Change of behavior from Tiki26

From Tiki26 it is possible to set precisely the Heading level from which will be created the slide with the parameter "headingLevelSlideSeparator". However this addition changed the default behavior when this parameter is not set to use only H1. As previously it was set from H1 to H3, if you need, add the "headingLevelSlideSeparator" with a value of 3 (for headings3)

Tiki Page to a Slideshow

The Plugin Slideshow converts a Tiki page to a slide show , every H1, H2, and H3 tag starts a new slide.

First, you must create a new Wiki page and save it. You can name it as you wish.
See Wiki and Using Wiki Pages for more information about wiki pages.
After creating the page, add the sections to it, each section must start with either an H1, H2 or H3 tag since each H1, H2 or H3 tag is the beginning of a new slide.
This is an example of a page with four H1 tags, each of which is a slide, the overview and code of which are shown below.

Overview

Click to expand

Code

Copy to clipboard

! Email and Calendar
 Plugin Image
File not found.


The Universal Communication Tool
 Calendar
 Newsletter
 Webmail
 Address Book
 IMAP / CardDAV / CalDAV
 Notifications of Changes
 Anti-Spam
 Filters

 OS and Network
 Plugin Image
File not found.


The Underlying Infrastructure
 Router / Gateway / Firewall / VPN
 Virtualization (Any Client OS)
 Unified Index / Search
 Server / Network
 Desktop / Mobile
 Natural Language Processing (NLP)
 Federated Search

 Commerce
Sell Memberships, Products or Services
 Plugin Image
File not found.


 Customer / Membership Management (CRM)
 Shopping Cart / Payment
 Sales Force Management
 Advertising / Social Networks
 Event Management
 Digital Signage
 Accounting (Alpha)

 Web and Intranet


Your Public and Private Web Content
 Website / CMS / Blog
 Wiki / Knowledge Base / Book
 Enterprise Social Networking
 Customer Support / Issue Tracker
 Web Framework / Workflows
 E-Learning / Quizzes
 Video Management
 Forums

Now it is time to transform the content of the page into SlideShow.
In edit mode, click on the help icon, when the window appears, click on the Plugin help tab then use the filter to find the Slideshow more quickly and click on it.

Click to expand

By clicking on the Slideshow icon, a window will appear.
At this step, customize the presentation of the Slideshow by changing the values of parameters such as Theme, Transition, Controls, etc. Then click on the Save button.

Click to expand

A code will appear in the Wiki page, save the page.

Copy to clipboard

After saving the page, a button Start Slideshow Presentation will appear, click on it to start the slide.

Click to expand

This is the appearance of the Slideshow

Click to expand

You can then customize it, by changing the Theme or the Transition as shown in the image below

Click to expand

Slides Thumbnail View

On the desktop you can reach the Slides Thumbnail View by hitting ESC on the keyboard. Use arrow keys to choose the slide you want to show.
List Slides

Change the parameters

You can choose to directly modify the parameters of the Slideshow Plugin.
This code:

Copy to clipboard

Will produce:

Click to expand

Custom Backgrounds

Plugin Slideshow enables you setup different types of backgrounds as follows:

Static background image for all slides
Different background images for individual slides using Plugin Slide
Parallax background image
Video backgrounds

Mobile touch enabled

The slideshow is optimised for smart phones and tablets. It’s touch gestures enable you to easily browse the slideshow or jump to a screen.

Go to next or previous slides
Simply drag right or left to move forward or backwards in the slideshow.
TikislideshowmobileArtboard 1

View thumbnails of all the slides and choose a slide to browse
Use two fingers zoom in and zoom out gestures to view slide thumbnails or browse a slide you choose.
Tikislideshowmobile2Artboard 1 Copy

Different behaviour for each slide

The slideShow plugin allow a global configuration for the slides behaviour or design (all slide will look and do the same). In case you need to specify options or design element per slide You can use the (PluginSlideshowSlide|SlideShowSlide plugin)).

Use this wiki plugin to configure a Slideshow in Tiki from the content of the wiki page using the headings in it. It extends the existing wiki page slideshow with notes & styles.

1.1. Setup

You need to enable it by means of marking these two checkboxes:

"Settings > Control Panels > Wiki > Features > Slideshow"
"Settings > Control Panels> Editing and plugins > Plugins > Slideshow"

1.1.1. Avoid images being resized and relocated

This s5 slideshow engine in Tiki resizes and relocates images automagically by default, in order to allow quickly show content, and a small thumbnail of the image at the upper right corner of the slide.

If you prefer to have the image shown at its original size and position, you can add the parameter class="fixedSize" to your img call. Example:

This code would show the image as a small thumnail in the upper right corner of the slide:

code to allow resizing and relocating the image

Copy to clipboard

But this code would allow the image to be shown at the original size of 500px and at the same position where this code was written.

code to keep original size and position

Copy to clipboard

1.1.2. Tutorial

See this presentation as example, create with the JQuery S5 Slideshow Feature in Tiki7 in a localhost, and then converted into pdf in a later stage, as seen here:
http://ueb.ir.vhebron.net/UseR+2011

1.1.2.1. Source Wiki page

This is the wiki page created in the local tiki site:

Identify these 3 areas, since they are specially relevant and take different roles when the page is shown as a slideshow:

(1) Wiki page title
(2) First section between headings
(3) Second Section between headings

1.1.2.1.1. Title of the wiki page

In this case, this is "2011 UseR"

1.1.2.1.2. First section between headings

First section between headings of levels 1 to 3 (of level 2 in the case shown at the previous screenshot (created with standard !! syntax).

Limited text is added here since this first heading and its content until the next heading will be used as a footer for the presentation when in slideshow mode.

1.1.2.1.3. Second section between headings

Second section between headings, of second level in this case (created with standard !! syntax). This will be used as the entry point for the presentation.

At this point, you click at the "slideshow" button that will show up in the bottom of the wiki page, which will lead you to an url similar tiki-slideshow.php

1.1.2.2. Second slide used as official presentation of the slideshow

As seen in the previous slideshow, a few areas can be recognized from the source wiki page:

(2) First section between headings
(3) Second Section between headings

1.1.2.2.1. Wiki page title

"2011 UseR" is the text shown in the top bar of the browser (not seen in the previous screenshot)

1.1.2.2.2. First section between headings

Content of the first heading is shown as footer in the slideshow for all slides.

1.1.2.2.3. Second Section between headings

Content of the second heading can be used as a normal presentation of the slideshow. Next headings will be used as indicators of new slides.

Control bar at the bottom

When you pass your mouse over the footer of any slide, a control bar will be shown at the footer instead:

In this bar you will find some buttons and controls that will allow you to manage the play, forward, reverse, etc. of the presentation, plus a few other things:

(4). Slideshow Theme style
(5). Notes
(6). Slide list for quick jumps
(7). Close the presentation and back to wiki page
(8). (Missing in screenshot). Since Tiki9, there is also an option to generate a PDF from the presentation (if the experimental feature is enabled).

1.1.2.2.4. Slideshow Theme style

You can change the theme style for the presentation ( redmond style shown in the previous screenshot).

1.1.2.2.5. Notes

You can show the notes for the slides, that will appear in a spare browser window, so that when used in a multi-monitor environment, they can be shown in the local monitor while the presentation is shown in the public screen.

1.1.2.2.6. Slide list for quick jumps

You show the slide list, which allows you to click in any of them and jump into it straight away.

1.1.2.2.7. Close the presentation and back to wiki page

You can also close the presentation and return to the wiki page which acted as a source of the presentation.

For more information, see Slideshow

Aliases

Plugin Slideshow

History Source

List Slides

Export PDF

Handouts

Exit Slideshow

Plugin Slide Show

Admin Settings

Parameters