Script link

q4.slideshow.1.1.6.min.js

Source file

q4.slideshow.js, line 2

Requires

• Mustache.js
• viewer.html
• pdf-js.zip (optional)

Examples

$('.module_slideshow').slideshow({
    aspectRatio: [4,3],
    tpl: (
        '<div class="module-slideshow_viewer">' +
            '<div class="module-slideshow_ratio">' +
                '<iframe style="position: absolute; width: 100%; height: 100%;" src=\'/files/js/pdf-js/viewer.html?file={{url}}#zoom=page-fit\' allowfullscreen webkitallowfullscreen></iframe>' +
            '</div>' +
        '</div>' 
    ),
});

Options

url string

The base URL to use for API calls. By default, calls go to the current domain, so this option is usually unnecessary.

relativeLevel

Relative level can be change if the index.html is not uploaded to the default location (/files/js/pdf-js) Default value '../../'

Default value

../../

tags array.<string>

an array of tags used to filter presentation results

Default value

[]

Example

['featured', 'latest']

aspectRatio array

an array of integers used to define an aspect ratio for the iframe window

Default value

[4,3]

Example

[16, 9]

languageId

A number representing which language to pull data from. By default it auto detects language.

slideShowContainer string

Iframe container to which the padding is applied depending on the aspect ratio.

Default value

'.module-slideshow_ratio'

dateFormat stringObject

A date format string, which can be used in the template as `{{date}}`. Can alternately be an object of format strings, which can be accessed with `{{date.key}}` (where key is the object key corresponding to the string you want to use). By default, dates are formatted using jQuery UI's datepicker.

Default value

MM d, yy

Example

'MM d, yy'

Example

{
    full: 'MM d, yy',
    short: 'mm/dd/y',
    month: 'MM',
    day: 'd'
}

tpl string

Template used to generate the presentation iframe and a link to the presentation file.

Example

linkTpl: (
'<div class="module-slideshow_viewer">' +
    '<div class="module-slideshow_ratio">' +
        '<iframe src=\'/files/js/pdf-js/viewer.html?file={{url}}#zoom=page-fit\' allowfullscreen webkitallowfullscreen title={{title}}></iframe>' +
    '</div>' +
'</div>' +
'<div class="module-slideshow_link-container">' +
    '<a class="module-slideshow_link" href="{{url}}" target="_blank"><i class="q4-icon_pdf"></i> Download PDF <span class="sr-only">(opens in new window)</span></a>' +
'</div>'
)
The following mustache variables are available: 
<pre>
{{title}} - The title of the presentation
{{date}} - The date of the presentation
{{body}} - The body of the presentation
{{tags}} - An array of tags given to the presentation
{{url}} - A link to the presentation document
{{relativeUrl}} - A link to the presentation document relative to the viewer.html document
{{thumb}} - A link to the thumbnail image
{{size}} - The size of the presentation document
{{type}} - The type of file for the presentation document
</pre>

loadingClass string

A CSS class to add to the widget while data is loading. This can be used to show and hide elements within the widget.

loadingMessage string

A message or HTML string to display while first loading the widget.

itemNotFoundMessage string

A message or HTML string to display in the container if no items are found.

Default value

<p><i class="q4-icon_warning-line"></i> There is no presentation available.</p>

complete function

A callback fired once the widget has finished running