Documentation
Slideshow
Description
The Slideshow module allows users to embed a slideshow presentation together with the corresponding audio recording.
Note: Image Viewer supports the following graphic formats: JPG, PNG, BMP. Vector formats are not supported.
Note: It is recommended to use files with 64 kb/s bitrate or higher. The files with lower quality could experience some difficulties in reproduction.
Properties
The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Audio | A collection of audio files played by the module. Only the first item is taken into consideration as narration for the Slideshow. Supported formats are: MP3 and OGG Vorbis.
This property allows online resources. Find out more » |
| Slides | A collection of slides composed of an image file (slide) and starting time in MM:SS format. The first slide always starts at 00:00 regardless of the user's input.
This property allows online resources. Find out more » |
| Texts | A collection of text labels shown at the given time of presentation. Each Text is composed of a text string, starting and ending time (in MM:SS format), and its position (counted from the slide's upper-left corner) in pixels. |
| No audio | When checked, no audio file will be played during the presentation. "Audio" property is no longer required, but the "Presentation duration" property must be filled out. |
| Presentation duration | The duration of the presentation without an audio file (in seconds). This property is required when "No audio" is checked, but will be ignored otherwise. |
| Slide animation | Selecting this property will result in showing and hiding slides with additional animation (except for selecting a specific slide with the Previous and Next buttons). |
| Text animation | Selecting this property will result in showing and hiding text labels with additional animation (except for selecting a specific slide with the Previous and Next buttons). |
| Hide progressbar | Selecting this property will result in hiding the progress bar (which results in more space for other Slideshow controls elements). |
| Show slide | This option works only at the level of the editor! It allows you to view a specific slide (numbered from 1 to Frames). |
| Group next and previous buttons | Wrap the Next and Previous buttons in an additional DIV element. |
| Narration | Narration of the recorded audio. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Base width | Base width' and 'Base height' properties are used for positioning texts. Suppose the current dimensions of the module differ from those provided in the 'Base width' / 'Base height' property (because the module has a different size depending on the selected layout). In that case, the position of the texts will be scaled appropriately. If the properties are left empty, the position of the texts will be the same regardless of the size of the module. |
| Base height | This property is used for positioning texts. See 'Base width' property for more details. |
Events
The end event occurs when the Slideshow's playback is finished.
| Field name | Description |
|---|---|
| Item | end |
| Value | N/A |
| Score | N/A |
The playing event occurs when the Slideshow is playing.
| Field name | Description |
|---|---|
| Item | N/A |
| Value | playing |
| Score | N/A |
The pause event occurs when the Slideshow is paused.
| Field name | Description |
|---|---|
| Item | N/A |
| Value | pause |
| Score | N/A |
The stop event occurs when the Slideshow is stopped.
| Field name | Description |
|---|---|
| Item | N/A |
| Value | stop |
| Score | N/A |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| play | --- | Plays the module. |
| pause | --- | Pauses the module. |
| stop | --- | Stops the module. |
| next | --- | Changes the slide to the next one, if available. Sets audio to the time set in the next slide. |
| previous | --- | Changes the slide to the previous one, if available. Sets audio to the time set in the next slide. |
| moveTo | Slide index | Changes the slide to the provided slide index, if such a slide exists. Sets audio to the time set in the selected slide. |
Advanced Connector integration
Each command supported by the Slideshow module can be used in the Advanced Connector module's scripts. The example below demonstrates how to show the module when it is hidden.
EVENTSTART
Source:Text2
SCRIPTSTART
var slideShowModule = presenter.playerController.getModule('Slideshow1');
slideShowModule.show();
SCRIPTEND
EVENTEND
CSS classes
| Class name | Description |
|---|---|
| slideshow-container | DIV surrounding all the Slideshow elements. Slides, texts, and control panel elements are direct children of this element. |
| slideshow-container-slide | Slides are DIV elements (with background-image property set to image) which are shown/hidden accordingly to the Slideshow's time. Do not change/set the position attributes for these elements! |
| slideshow-container-text | Texts are span elements which are shown/hidden accordingly to the Slideshow's time. Do not change/set position attributes for these elements! |
| slideshow-controls-container | DIV containing all the control elements. Its width is adjusted to the module's Width property. Height is by default 50px (with horizontal padding, each 5px), but can be freely changed by the user. Each child element has a height equal to 40px (except for the progress bar components). |
| slideshow-controls-timer | DIV containing spans for the current playback time and audio duration. The default width is 120px and should not be diminished by the user. |
| slideshow-controls-timer-time | SPAN element containing the current time. |
| slideshow-controls-timer-duration | SPAN element containing the audio file's duration. |
| slideshow-controls-play | The button to start the Slideshow. Its default width is 40px. |
| slideshow-controls-play-pause | The button to pause the Slideshow. Its default width is 40px. |
| slideshow-controls-stop | The button to stop the Slideshow. Its default width is 40px. |
| slideshow-controls-previous | The button to select the previous slide (if possible) and change the Slideshow's time to the time specified in the configuration. Its default width is 40px. |
| slideshow-controls-previous-inactive | The button to select the previous slide if there are no previous slides available. |
| slideshow-controls-next | The button to select the next slide (if possible) and change the Slideshow time to the one specified in the configuration time. Its default width is 40px. |
| slideshow-controls-next-inactive | The button to select the next slide if there are no more slides available. |
| slideshow-controls-navigation | The Next and Previous buttons container when the 'Group next and previous buttons' option is checked. |
| slideshow-controls-progressbar | DIV element which contains the Slideshow's progress bar. Its width is automatically set to use all spare space in the control sections. |
| slideshow-controls-progressbar-slider | DIV element which serves as a slider. By default, its shape is a circle, but it can be freely changed by the user. Do not change/set position attributes for this element! |
| slideshow-controls-progressbar-line | DIV element which serves as a horizontal line. Do not change/set position attributes for this element! |
| slideshow-loading-image | Loading image displayed while loading the resources. The image is placed in the slide's center. Default width and height are 80px. Do not change/set position attributes for this element! |
| slideshow-loading-text | Loading status displayed while loading the resources. The element is placed at the slide's bottom. The default width is 250px, and the height is 40px. Do not change/set position attributes for this element! |
| slideshow-controls-play-mouse-hover, slideshow-controls-play-pause-mouse-hover, slideshow-controls-stop-mouse-hover, slideshow-controls-previous-mouse-hover, slideshow-controls-previous-inactive-mouse-hover, slideshow-controls-next-mouse-hover, slideshow-controls-next-inactive-mouse-hover |
Buttons states on mouse hover |
Demo presentation
Demo presentation contains examples of how to use the Slideshow module.