History: PluginSlideshow
Source of version: 50 (current)
Copy to clipboard
! Plugin Slide Show
This [https://tiki.org|Tiki] feature allows users to use the content of a ((Using Wiki Pages|Wiki Page)) to create a slideshow (presentation). Introduced in ((Tiki7)) and improved later, the feature was Revamped in ((Tiki19)) and a complementary plugin, ((PluginSlideshowSlide|the SlideShowSlide plugin)) was added to allow fine tuning per slide.
{TABS(name="user_tabset_01" tabs="19.x|18.x and before")}
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 [https://revealjs.com/|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.
{img src="display1559" link="display1559" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
!! Parameters
{pluginmanager plugin="slideshow"}
{REMARKSBOX(type="warning" title="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){REMARKSBOX}
!!!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
{img src="display1560" link="display1560" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
!!!! Code
{CODE()}
! Email and Calendar
{img type="fileId" fileId="1"}
The Universal Communication Tool
* Calendar
* Newsletter
* Webmail
* Address Book
* IMAP / CardDAV / CalDAV
* Notifications of Changes
* Anti-Spam
* Filters
! OS and Network
{img type="fileId" fileId="4"}
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~hs~Services
{img type="fileId" fileId="2"}
* Customer / Membership Management (CRM)
* Shopping Cart / Payment
* Sales Force Management
* Advertising / Social Networks
* Event Management
* Digital Signage
* Accounting (Alpha)
! Web and Intranet
{img type="fileId" fileId="3"}
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
{CODE}
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.
{img src="display1561" link="display1561" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
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.
{img src="display1562" link="display1562" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
A code will appear in the Wiki page, save the page.
{CODE()}
{slideshow theme="black" transition="zoom" transitionSpeed="default" backgroundTransition="none" controls="y" controlsLayout="bottom-right" controlsBackArrows="faded" progress="y" slideNumber="y" fragments="y" fragmentClass="grow" fragmentHighlightColor="none" autoSlideStoppable="y" alignImage="n"}
{CODE}
After saving the page, a button __Start Slideshow Presentation__ will appear, click on it to start the slide.
{img src="display1563" link="display1563" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
This is the appearance of the Slideshow
{img src="display1564" link="display1564" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
You can then customize it, by changing the __Theme__ or the __Transition__ as shown in the image below
{img src="display1565" link="display1565" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
!!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.
{img fileId="1566" class="img-responsive"}
!!Change the parameters
You can choose to directly modify the parameters of the Slideshow Plugin.
This code:
{CODE()}
{slideshow theme="serif" transition="concave" transitionSpeed="fast" backgroundTransition="convex" controls="y" controlsLayout="bottom-right" controlsBackArrows="visible" progress="y" slideNumber="y" fragments="y" fragmentClass="fade-up" fragmentHighlightColor="none" autoSlideStoppable="y" alignImage="n"}
{CODE}
Will produce:
{img src="display1567" link="display1567" width="400" rel="box[g]" desc="Click to expand" styleimage="border"}
!!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.
{img fileId="1482"}
__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.
{img fileId="1485"}
!!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)).
!!Related Pages
* ((PluginSlideshowSlide))
*((Using Wiki Pages))
*((Wiki))
/////
Use this ((wiki plugin)) to configure a ((Slideshow|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.
!!# 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"
!!!# 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:
^{SPLIT(colsize="48%|2%|48%|2%")} This code would show the image as a small thumnail in the upper right corner of the slide:
{CODE(caption="code to allow resizing and relocating the image", wrap="1" colors="tiki")}
{img src="display2" rel="box[g]" width="500"}
{CODE}
---
~hs~
--- 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(caption="code to keep original size and position", wrap="1" colors="tiki")}
{img src="display2" rel="box[g]" width="500" class="fixedSize"}
{CODE}
---
~hs~
{SPLIT}^
!!!# 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
!!!!# Source Wiki page
This is the wiki page created in the local tiki site:
^{img fileId=600 thumb=y width=600 imalign=center rel=box[g]} ^
Identify these 3 areas, since they are specially relevant and take different roles when the page is shown as a slideshow:
~~red:(1)~~ Wiki page title
~~red:(2)~~ First section between headings
~~red:(3)~~ Second Section between headings
!!!!!# Title of the wiki page
In this case, this is "2011 UseR"
!!!!!# 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.
!!!!!# 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+-
!!!!# Second slide used as official presentation of the slideshow
{img fileId=606 thumb=y width=600 imalign=center rel=box[g]}
As seen in the previous slideshow, a few areas can be recognized from the source wiki page:
~~red:(2)~~ First section between headings
~~red:(3)~~ Second Section between headings
!!!!!# Wiki page title
"2011 UseR" is the text shown in the top bar of the browser (not seen in the previous screenshot)
!!!!!# First section between headings
Content of the first heading is shown as footer in the slideshow for all slides.
!!!!!# 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:
{img fileId=602 thumb=y width=600 imalign=center rel=box[g]}
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:
~~red:(4)~~. Slideshow Theme style
~~red:(5)~~. Notes
~~red:(6)~~. Slide list for quick jumps
~~red:(7)~~. Close the presentation and back to wiki page
~~red:(8)~~. (Missing in screenshot). Since ((Tiki9)), there is also an option to generate a ((PDF)) from the presentation (if the experimental [Slideshow#PDF_Export|feature is enabled]).
!!!!!# Slideshow Theme style
You can change the theme style for the presentation ( -+redmond+- style shown in the previous screenshot).
{img fileId=603 thumb=y width=300 imalign=center rel=box[g]}
!!!!!# 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.
{img fileId=604 thumb=y width=600 imalign=center rel=box[g]}
!!!!!# 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.
{img fileId=605 thumb=y width=600 imalign=center rel=box[g]}
!!!!!# 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.
!!Related pages
* For more information, see ((Slideshow))
!!Aliases
(alias(Plugin Slideshow))
{TABS}