version 2.12
Introduction
Monoslideshow is a Flash® slideshow to view your images and videos in a web page. It can be placed on every website, in whatever size you want and filled with whatever content you like. It's designed for maximum flexibility, whether you want to have a professional looking portfolio, or a simple image rotator on your website.
Some features
- Professional transitions
- Ken Burns effect
- Color and resize interface element
- Easily navigate between photo albums
- Fully resizable
- API for Javscript and Actionscript 3
What you'll need
- Flash® player 10 or higher
- Text editor (e.g. Notepad)
- FTP client
- A website to embed the slideshow in
How does it work?
Monoslideshow is a single .SWF-file. There's no need to recompile or edit the slideshow in the Flash® IDE. Instead, all Monoslideshow needs is information that is directly read from a .XML-file. It's compact, extremely versatile and easy for web developers to integrate in existing websites.
The basics
One .XML file to customize
Monoslideshow is a single .SWF file. There’s no need to edit the slideshow in the Flash® IDE itself. Instead, all its information is directly read from a .XML file. It’s compact, extremely versatile and easy to set up. The fact that Monoslideshow uses XML to populate the albums and setting the preferences, means that it is flexible and easily integrated in your existing site. You only have to do one thing, and that's editing the .XML file in a text editor.
Tip: use the demo page on www.monoslideshow.com/demo to automatically set up .XML files.
A brief introduction to XML
Monoslideshow reads all its information from a single text file called monoslideshow.xml. To put images in your slideshow, you have to edit this file. This can be done easily by using a simple text editor such as Notepad or TextEdit.
What exactly is an .XML file? Well, basically it’s just a plain text file. But .XML files differ from ordinary files in that they use certain rules to structure the content. XML is a computer language, and actually it’s a bit like HTML. Just as with .HTML files, content in .XML files is placed inside tags.
Example 1
Let’s take a look at an example to illustrate how all this works.
|
<?xml version="1.0" encoding="utf-8"?> |
The first line says that this textfile is a file which uses the XML-language. You always have to include this line. The second line is an opening tag called <album>. It’s corresponding closing tag is located at the last line. Everything between these two tags is the content of it. An opening tag must always have the exact same name as the closing tag. The only way a closing tag differs from its opening tag, is an extra forward slash in front of it.
Inside the opening tag <album> are two attributes, called thumbnail and itemPath. Attributes are always placed inside a tag. The value of an attribute (in this case albumThumbnail.jpg and images, respectively) must always be enclosed between quotes (" or '). They are used to specify something about the tag they are contained in. In this case, the thumbnail of the album is albumThumbnail.jpg and the path to all its images is images.
The three next <image> tags are the actual image files. They all contain two attributes, called source and thumbnail. The attribute source specifies the link to the image inside the folder specified by itemPath. The link to the thumbnail is specified by the attribute thumbnail. As you’ve perhaps noticed, these tags lack a regular closing tag. Instead of writing <image source="photo1.jpg"></image>, you could also write <image source="photo1.jpg" />. These type of tags are called self closing tags. We use them here because the <image> tag has no content by itself. All the information is extracted out of its attributes.
You can completely build your own slideshow by writing your own .XMl file. You only have to know which attribute names Monoslideshow uses to customize the slideshow. They are all summed up in the XML reference.
Example 2
Let’s take a look at another example:
|
<?xml version="1.0" encoding="utf-8"?> |
This slideshow consists of two albums. You can place <album> tags inside other album's <contents> tags to create sub albums. In this way, you can also create sub sub albums, and you can go to even deeper levels as well.
Two new tags are introduced here: the <configuration> and the <transition> tag. Here you would insert the configuration attributes which you’d like to apply for the elements inside the <contents> tag. In this case, the delay is set to three seconds and the transition is set to type "shatter". These attributes also apply to sub albums. However, you can define a <configuration> tag in each <album> tag, so that each album can have its own configuration. Configuration attributes inserted at a lower level override those at a higher level. In this case, there's only one configuration defined, and it applies to both its sub albums.
There's also a new attribute introduced in the second <album> tag, called thumbnailPath. This attribute defines the path to all the thumbnail images. Now, if an <image> tag doesn’t contain a thumbnail attribute, it looks for a thumbnail file in the folder albumThumbnails2 with the exact same name as defined in the source attribute of that image. This way, you could easily set up two folders: One for all the images (in this case album2), and one for all the thumbnails (in this case albumThumbnails2). Each folder would have the exact same file names.
Implementation
Monoslideshow is made to be implemented on in a web page. You can do this by inserting code in a HTML page. So, as a global overview, there's three steps you have to follow:
- prepare folder structure
- create .XML file
- put Monoslideshow on your site
Prepare folder structure
The following example shows a basic structure for your folders:
|
/index.html |
Create .XML file
After the folder structure is prepared, and the files are in their place, put all references to all images and thumbnails in your .XML file. Then you can further extend your .XML file by inserting titles, descriptions and by modifying layout settings. There's a multitude of options available for you to adjust. Please use the examples and the XML reference to see how the .XML file is structured and which options are available. You can also generate a template .XML file as a basis for your own on the demo page: monoslideshow.com/demo.
Put Monoslideshow on your site
To put Monoslideshow.swf on your site, you have to embed it in your webpages. Flash® content is mostly placed in websites via Javascript. A good technique for this is using SWFObject. You can download the latest version and find instructions of how to use it here: code.google.com/p/swfobject.
Customization
Monoslideshow can be customized by altering the .XML file, and by passing Flash® variables to the SWFObject call. In this chapter, a couple of the most typical customizations are presented.
Embedding the .SWF file in your page
Here's a basic example that shows how to embed Monoslideshow into your HTML page, using SWFObject:
|
<html> |
Firstly, the SWFObject.js script has to be loaded in the <head> tag. Then you can call the SWFObject script to put monoslideshow.swf into the <div> tag with the id attribute flashContent. Basically, the SWFObject script replaces the content of that <div> with code to load Monoslideshow. The <p> tag inside the <div> tag will therefore be erased. It only remains visible if the SWFObject call didn't complete, either due to a script error, or due to unavailability of Javascript in the browser of the end user.
Custom dimensions
Monoslideshow can take any dimensions you like. Just specify the width and height in the SWFObject call and Monoslideshow will scale accordingly. Monoslideshow is fully flexible and even scales along with content areas that are scaled real time in the browser. This makes Monoslideshow perfect for liquid layouts.
Below is an example that sets the width to 100% of the browser window and the height to 500 pixels:
|
<script type="text/javascript"> |
Changing background color
Because of the way Flash® works, you have to define the background color twice. Once in the SWFObject call, and once in the .XML file. Here's how you set the background color to red, or #ff0000, in the SWFObject call:
|
<script type="text/javascript"> |
And here's how to change to the same background color in the .XML file:
|
<<album> |
Loading custom .XML file
By default, Monoslideshow looks for a file named monoslideshow.xml. You can also load your own file, as long as it's formatted according to the XML format of Monoslideshow. The file does not have to end with .xml, it can just as well be a PHP script that outputs XML formatted content. To specify your own file, you have to pass a variable dataFile to Monoslideshow:
|
<script type="text/javascript"> |
Starting with a specified item or album
You can start your slideshow with a specified item or album by instructing Monoslideshow to look for a .XML node with a specific ID. You can do this by specifying startWithImageID or startWithAlbumID in the album configuration node. For example, the following code instructs Monoslideshow to start with the item with ID "myPhoto":
|
<album> |
This example shows how to start with the album "myAlbum":
|
<<album> |
It does not matter how deeply nested the item with the specified ID is, as long as you define startWithItemID or startWithAlbumID in the top album configuration node.
Loading RSS feeds
Monoslideshow can read any RSS file that is set up according to the Media RSS specification. Media RSS is a specific type of RSS that contains media files, such as images, audio and video. For example, Flickr RSS feeds are formatted according to the specifications of Media RSS. You can find the specifications of Media RSS feeds here: search.yahoo.com/mrss/
You can embed Media RSS feeds in Monoslideshow, by defining a feed element in the contents node of an album. You can place multiple feeds in an album. The following .XML file setup embeds two feeds between two user defined images.
|
<album> |
The second feed is actually the Flickr Monoslideshow pool. Flickr hosts multiple sizes of your uploaded photos. You can select a size for the Flickr feed images, by specifying both that the feed is of type "flickr", and by defining the size attribute ("medium" in this case).
Note: Monoslideshow must read the feed contents before the slideshow is started. The more feed elements you add, the more time Monoslideshow needs to initialize the slideshow.
Custom fonts
By default, Monoslideshow uses system fonts. However, you can use custom fonts as well. Custom fonts are loaded by creating .SWF files of your custom fonts and load these into Monoslideshow. Instructions for Flash®:
- go to your library and add a new font
- right click on the newly created font in your library and select "linkage"
- in the "class" input field, choose a class name for your font, for example "MyFont"
- check "Export for Actionscript" and "Export in first frame"
- publish the Flash file for Flash Player 9, Actionscript 3 and choose a file name, for example "myFont.swf"
Now that you have your font .SWF file, you have to load it in Monoslideshow. You can do this by defining the font attribute as your class name (in this case "MyFont"), and by defining the fontFile attribute, which holds the specified font:
|
<<album> |
You can define multiple font classes in one fontFile, or split them up accross multiple files. You can also mix system fonts and custom fonts together.
Custom controller buttons
You can create your own button images for all the buttons in Monoslideshow. You have to do this by creating a button file which holds the graphical states of each button. The button file has to be saved as a transparent .PNG file. This is a typical example of a button file:
|
|
The buttons are ordered as folows, from left to right:
|
|
Each button can have 3 or 4 states, and are ordered as follows, from top to bottom:
- up: the normal state of the button
- over: displayed when the user hovers over the button
- down: displayed when the user clicks the button
- disable: displayed when the option is not available
|
|
Each button state graphic must be placed in a rectangle with a stroke of exactly 1 pixel that has the color #000000 (black). There has to be exactly 1 transparent pixel between the button state graphic and the rectangular stroke. The top rectangle (the "up" state) defines the dimensions of the other states of that button. So, the rectangles in one column must have the exact same dimensions. You can however, define different rectangular dimensions per button. |
When you've created your .PNG file, you can load the button file in Monoslideshow by defining this code in the .XML file:
|
<<album> |
Disabling start up logo
By default, Monoslideshow shows a logo during the initialization process of the slideshow. During this process the .XML file is loaded, feeds are parsed, sound and font files are preloaded, etc. To disable the display of the Monoslideshow logo, you have to pass the variable showLogo to Monoslideshow and set it to "false":
|
<script type="text/javascript"> |
Disabling registration info
By default, Monoslideshow shows registration info in the right click context menu. To disable this, you have to pass the variable showRegistration to Monoslideshow and set it to "false":
|
<script type="text/javascript"> |
Monoslideshow API
You can communicate with Monoslideshow via Javascript and via Actionscript 3. Monoslideshow can receive function calls that instruct the slideshow to perform certain actions. Monoslideshow also sends certain messages, which your program code can receive. This way, you can synchronize your actions to Monoslideshow events, and Monoslideshow can perform actions on your command.
The following events are broadcasted by Monoslideshow to Javascript and Actionscript 3:
- error, an error has occurred, the following attribute is available:
message, the error message
- itemClick, an item is clicked upon, the following event attributes are available:
title, the title
description, the description
id, the unique user specified ID
link, the link to go to after a user clicks the item
target, the target window to load the link in
- itemLoaderComplete, an item has completed loading, the following event attributes are available:
source, the source as defined in the .XMl file
url, the resolved URL to the file
title, the title
description, the description
id, the unique user specified ID
link, the link to go to after a user clicks the item
target, the target window to load the link in
bitmapData, the bitmap data of an item, as BitmapData type
- itemLoaderError, an item has not been correctly loaded, the following event attributes are available:
source, the source as defined in the .XMl file
url, the resolved URL to the file
title, the title
description, the description
id, the unique user specified ID
link, the link to go to after a user clicks the item
target, the target window to load the link in
- navigationClose, the navigation window is closed
- navigationShow, the navigation window is shown
- monoslideshowInitialized, monoslideshow is fully initialized and ready to receive API calls
- albumFinished, the last item in the album has finished playing
The following methods are available in Javascript and Actionscript 3:
- previousImage(), go to previous image
- nextImage(), go to next image
- jumpToImage(index:int), jump to a specified image index (starting at 0)
- toggleMute(), mutes or unmutes the slideshow
- togglePause(), pause or resume the slideshow
- showNavigation(), show the navigation window
- closeNavigation(), close the navigation window
- addListener(event:String, callBack:Function), call a function if Monoslideshow broadcasts an event
- removeListener(event:String, callBack:Function), remove the event listener and the callback associated with it
- loadDataFile(file:String)
- isPlaying():Boolean, returns true if the slideshow currently is playing
The following methods are available in Actionscript 3 only:
- loadXML(xml:XML)
- setViewport(x:Number, y:Number, width:Number, height:Number), set the viewing rectangle in which Monoslideshow is being displayed
- reset(), resets Monoslideshow completely and removes the display
- showLogo, a boolean attribute that can either be assigned true or false
- showRegistration, a boolean attribute that can either be assigned true or false
- setCurrentTransitionAttributes(string:String), a string containing attribute-value pairs, separated by a semicolon, can be used just after the event itemLoaderComplete is dispatched to alter the transition attributes of the current item, for example: "attribute1=value1; attribute2=value2"
Actionscript 3
Loading Monoslideshow into your Flash® project
The following example loads Monoslideshow into your own Flash® project.
|
var loader:Loader = new Loader(); |
As you can see in the example above, Monoslideshow is loaded as an object. When the loading is complete, you can perform function calls on this object. In this example, firstly the viewport is defined to be 480 pixels wide by 360 pixels high, placed on the top left coordinates 50, 50. Secondly, the data file monoslideshow.xml is loaded.
Instead of loading an external file, you can also let Monoslideshow parse a XML object that you can create on the fly. The next example illustrates how. It also shows how to disable the Monoslideshow logo used during the initialization process.
|
var loader:Loader = new Loader(); |
Listening to events
To listen to Monoslideshow events in Actionscript 3, you have to add listeners to Monoslideshow. You can do this by calling the function addListener(event:String, function:Function) on the Monoslideshow instance. Once the event is received in the function specified, you can read out certain attributes of the event. Each event has its own attributes. Please refer to the list mentioned above. The example below instructs Monoslideshow to send the event itemLoaderComplete to the function onItemLoaderComplete and reads out all attributes associated with the event object.
|
var loader:Loader = new Loader(); |
Javascript
Pass XML data directly to Monoslideshow
By passing the Flash® variable xml via SWFObject, you can directly pass a Monoslideshow formatted XML string to the Monoslideshow instance. This variable overrides the data file specified in the attribute dataFile. Below is an example of passing a XML string to Monoslideshow.
|
var flashvars = {xml: |
Listening to events
To listen to Monoslideshow events in Javscript, you have to add listeners to Monoslideshow. You can do this by calling the function addListener(event, function) on the Monoslideshow instance. The example below instructs Monoslideshow to send the event itemLoaderComplete to the function onItemLoaderComplete.
|
swf = document.getElementById("Monoslideshow"); |
Before you can add listeners to the Monoslideshow instance, Monoslideshow has to be fully loaded. To be sure of this, Monoslideshow calls a Javacscript function that you can specify, directly after Monoslideshow is loaded. You can specify this callback function using the variable callBackFunction in the SWFObject embed code. In the example below, Monoslideshow calls the function initializeMonoslideshow directly after Monoslideshow has been loaded.
|
var flashvars = {callBackFunction: "initializeMonoslideshow"}; |
The following example traces out a couple of events that have been called. It requires that you have a HTML template with:
- a div with id flashContent, where Monoslideshow is loaded in
- a form with a textarea element with id textArea, where text output is traced to
- the necessary files (monoslideshow.swf, swfobjects.js).
|
var swf; |
Calling methods
You can also call certain methods via Javascript. Again, you have to wait before Monoslideshow has been fully loaded to call a method. You can use the initializeMonoslideshow variable to determine which Javascript function to load after Monoslideshow has been initialized. Below you find an example of how to control Monoslideshow via Javascript.
|
<div id="flashContent"></div> |
XML reference
Interface elements
Below you see two screenshots of a typical Monoslideshow setup. The main visual objects are shown, and you can manipulate their position, size, color and a whole lot more.
|
|
This is a screenshot of the main interface. The item is displayed in the viewport. The viewport also holds the reflection. Outside the viewport, and in the slideshow area, there's the caption, which holds the title and description of the currently displayed item. You'll also see the progress, which indicates the amount of bytes loaded. And, finally, there's the controller, which lets you navigate through item thumbnails. |
|
|
When you click the navigation button, the slideshow pauses, the controller flips and the navigation window controls appear. You're now in navigation mode, and you can click on the item thumbnails in the navigation window to load a specific item. When you click on an item thumbnail, the navigation window disappears and the slideshow will resume playing. |
Attributes per XML node
Album element
<contents>
<album>
<configuration />
</album>
</contents>
The album element contains the contents of the slideshow. Images, .SWF files, videos and RSS feed elements can be used to populate an album. In addition, you can place albums inside other albums. There’s practical no limit on how many items an album can contain, as Monoslideshow loads items only when they are needed.
|
attribute |
default |
type |
description |
|
description |
string |
description text. |
|
|
highResPath |
url |
path to the high resolution folder. the high resolution items are displayed when the slideshow is in full screen mode. note: when high resolution items are loaded, the source attribute value is prepended with highResPath. only images are displayed in their high resolution version, not .SWF files. specify type="image" in the <image> node to instruct Monoslideshow that the file is an image, instead of a swf. |
|
|
id |
string |
you can give an album an ID that you can use together with startWithAlbumID |
|
|
itemPath |
string |
the path to the folder that contains all the items. the source attribute value of an item is prepended with this attribute. |
|
|
thumbnail |
url |
the URL of a thumbnail of an album. note: this attribute is not prepended with itemPath or thumbnailPath |
|
|
thumbnailPath |
url |
the path to the folder that contains all the thumbnails of the images. the source attribute value of an item is prepended with this attribute. |
|
|
title |
string |
title text. |
Album configuration element
<album>
<configuration>
<caption />
<controller />
<navigation />
<progress />
<reflection />
<shadow />
<sound />
<transition />
</configuration>
</album>
The album configuration element holds the configuration of an album. The global properties are defined here, such as the background color of the slideshow, the scale mode of items and what to do when the album finishes.
|
attribute |
default |
type |
description |
|
backgroundColor |
#000000 |
color |
background color, can be set to transparent |
|
backgroundImage |
url |
background image note: this attribute does not use itemPath and is scaled in mode scaleToFill. |
|
|
bufferTime |
2 |
number 0–MAX |
seconds to buffer the video before playing |
|
colorCorrection |
false |
boolean |
determines if color correction should be applied if available |
|
delay |
3 |
number 0–MAX |
seconds of pause between items |
|
errorImageColor1 |
#272822 |
color |
background color of an error image |
|
errorImageColor2 |
#f92672 |
color |
foreground color of an error image |
|
followImageLinks |
false |
boolean |
determines if images should be clickable |
|
framesPerSecond |
30 |
number 1—MAX |
frames per second of the Flash® movie |
|
fullScreenScaleMode |
scaleToFit |
option |
scale the image so that it fits inside the viewport scale the image so that it fills the entire viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
onAlbumEnd |
loop |
option |
loads an URL defined by onAlbumEndURL in target defined by onAlbumEndTarget loops the album reloads the data file shows the navigation window shows the album that contains the current album(s) |
|
onAlbumEndURL |
string |
the URL that is loaded if onAlbumEnd is "loadURL" |
|
|
onAlbumEndTarget |
string |
the target that the URL onAlbumEndURL is loaded into |
|
|
onLoadError |
displayErrorImage |
option |
displays an error image if a load error occurs skips to the next image if a load error occurs note: if the consecutive number of errors exceeds 5, the error image is displayed. |
|
preloadItems |
0 |
number 0—MAX |
items to preload note: a value of 0 does not preload any items |
|
randomize |
false |
boolean |
randomizes the contents and albums of the slideshow |
|
renderQuality |
high |
option |
the higher the quality, the more CPU power is used. |
|
reloadTimeThreshold |
0 |
number 0–MAX |
the number of seconds after which dataFile is forced to reload when the album is ended. note: setting this value to 0 does not reload the data file. |
|
scaleMode |
scaleToFill |
option |
scale the image so that it fits inside the viewport scale the image so that it fills the entire viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
startSlideshowOnAlbumSelect |
false |
boolean |
when set to true, clicking an album plays the slideshow without showing the thumbnails first, except when the album contains other sub albums |
|
startWithAlbumID |
text |
starts the slideshow with the album with the specified id. |
|
|
startWithItemID |
text |
starts the slideshow with the item with the specified id. |
|
|
startWithNavigationWindow |
false |
boolean |
start with displaying the navigation window, so you can start the slideshow by selecting an item |
|
viewport |
0, 0, 0, 0 |
offset |
specifies the viewport where the items are displayed in. The format is x, y, width, height, where x, y are the top left coordinates of the viewport. You can also specify the viewport as left, top, right, bottom, "offset", in which case the viewport scales along with the Flash® window and the 4 coordinates function as margins. For example, a value of 10, 20, 30, 40, offset will place the viewport 10 pixels from the left, 20 from the top, 30 from the right and 40 from the bottom of the Flash® window. note: a value of 0, 0, 0, 0 means the viewport is defined as the complete Flash® window. |
|
viewportRoundness |
0 |
number 0–MAX |
the roundness of the viewport |
|
volume |
1 |
number 0–1 |
the sound volume |
|
waitForSound |
true |
boolean |
if a sound is playing during an item, wait for the sound to complete, before moving on to the next item |
Feed element
<album>
<feed />
</album>
The feed element can be used to load Media RSS feeds into an album. Media RSS is a specific type of RSS that contains media files, such as images, audio and video. For example, Flickr RSS feeds are formatted according to the specifications of Media RSS. You can find the specifications of Media RSS feeds here: search.yahoo.com/mrss/
|
attribute |
default |
type |
description |
|
number |
0 |
number 0—MAX |
maximum number of images to insert from the feed. use 0 for all the images in the feed. note: every web service determines how many items to serve in their RSS feed. For example, Flickr inserts only the latest 20 items. So this is also the maximum number of items that Monoslideshow has access to. |
|
size |
medium |
option |
the size used for flickr type feeds |
|
type |
generic |
option |
used for Flickr type RSS feeds used for Tumblr RSS feeds. URL example: generic Media RSS feeds |
|
url |
url |
the URL of the feed |
Image element
<album>
<image>
<configuration />
</image>
</album>
The image element contains an image file or a Flash® .SWF file. Supported types: JPG, PNG, GIF, SWF.
|
attribute |
default |
type |
description |
|
action |
none |
option |
after this image, the slideshow is paused. click on the image to resume the slideshow after this image, show the navigation window after this image, click to show the navigation window after this image, pause the slideshow no specific action is performed |
|
description |
string |
description text |
|
|
id |
string |
you can give an image an ID that you can use together with startWithItemID in the album’s configuration node |
|
|
link |
url |
when an image is clicked, go to this link |
|
|
sound |
url |
url to an MP3 file to play during the time an image is displayed. nore: you can use the waitForSound attribute in the configuration node to let Monoslideshow know that it should wait for the sound to complete, before advancing to the next item. |
|
|
source |
url |
url of the image |
|
|
target |
string |
target frame to load the link in, for example "_blank" or "_parent" |
|
|
thumbnail |
url |
url to a thumbnail of this image, used in the navigation window. |
|
|
title |
string |
title text |
|
|
type |
image |
option |
item is an image item is a .SWF file captures the .SWF file as a bitmap, so bitmap effects can be used (like the Ken Burns effect and some transitions) note: this attribute is used to instruct Monoslideshow which item type this is in full screen mode. if not specified, Monoslideshow looks at the file extension of the file. |
Image configuration element
<image>
<configuration>
<caption />
<progress />
<transition />
</configuration>
</image>
The image configuration element holds the configuration of an image.
|
attribute |
default |
type |
description |
|
delay |
3 |
number 0–MAX |
seconds of pause between images |
|
errorImageColor1 |
#272822 |
color |
background color of the error image |
|
errorImageColor2 |
#f92672 |
color |
foreground color of the error image |
|
fullScreenScaleMode |
scaleToFit |
option |
scale the image so that it fits inside the viewport scale the image so that it fills the entire viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
margin |
0, 0, 0, 0 |
margin |
margin around the image |
|
onLoadError |
displayErrorImage |
option |
displays an error image if a load error occurs skips to the next image if a load error occurs note: if the consecutive number of errors exceeds 5, the error image is displayed. |
|
position |
center |
option |
|
|
scaleMode |
scaleToFill |
option |
scale the image so that it fits inside the viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
volume |
1 |
number 0–1 |
the sound volume |
|
waitForSound |
true |
boolean |
if a sound is playing during an item, wait for the sound to complete, before moving on to the next item |
Video element
<album>
<video>
<configuration />
</video>
</album>
The video element contains a video file. Supported codecs: adobe.com/go/kb402866
|
attribute |
default |
type |
description |
|
action |
none |
option |
after this video, the slideshow is paused. click on the image to resume the slideshow after this video, show the navigation window after this video, click to show the navigation window after this video, pause the slideshow no specific action is performed |
|
description |
string |
description text |
|
|
id |
string |
you can give a video an ID that you can use together with startWithItemID in the album’s configuration node |
|
|
link |
url |
when a video is clicked, go to this link |
|
|
sound |
url |
url to an MP3 file to play during the time a video is displayed. nore: you can use the waitForSound attribute in the configuration node to let Monoslideshow know that it should wait for the sound to complete, before advancing to the next item. |
|
|
source |
url |
url of the video |
|
|
target |
string |
target frame to load the link in, for example "_blank" or "parent" |
|
|
thumbnail |
url |
url to a thumbnail of this video, used in the navigation window. |
|
|
title |
string |
title text |
Video configuration element
<video>
<configuration>
<caption />
<progress />
<transition />
</configuration>
</video>
The video configuration element holds the configuration of a video.
|
attribute |
default |
type |
description |
|
bufferTime |
1 |
number 0–MAX |
seconds to buffer the video before playing |
|
delay |
3 |
number 0–MAX |
the delay between images |
|
errorImageColor1 |
color |
background color of the error image |
|
|
errorImageColor2 |
color |
foreground color of the error image |
|
|
fullScreenScaleMode |
scaleToFit |
option |
scale the image so that it fits inside the viewport scale the image so that it fills the entire viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
margin |
0, 0, 0, 0 |
margin |
margin around the video |
|
onLoadError |
displayErrorImage |
option |
displays an error image if a load error occurs skips to the next image if a load error occurs note: if the consecutive number of errors exceeds 5, the error image is displayed. |
|
position |
center |
option |
|
|
scaleMode |
scaleToFill |
option |
scale the image so that it fits inside the viewport does not scale the image scales the image to fit the viewport only if the resulting image has smaller dimensions than the original scales the image to fill the viewport only if the resulting image has smaller dimensions than the original |
|
volume |
1 |
number 0–1 |
the sound volume |
|
waitForSound |
true |
boolean |
if a sound is playing during an item, wait for the sound to complete, before moving on to the next item |
Transition element
<configuration>
<transition />
</configuration>
The transition element determines which transition to perform when loading and displaying a new item. Use the tag <firstTransition> and set its type attribute to define the first transition of the slideshow, which only plays once. This tag has the same syntax as the regular <transition> tag.
|
attribute |
default |
type |
description |
|
channel1 |
red |
option |
pixel channel 1 to use if type is melt, noise, selfMelt, shatter, water, waterDrop |
|
channel2 |
blue |
option |
pixel channel 2 to use if type is melt, noise, shatter, water, waterDrop |
|
direction |
leftToRight |
option |
used if type is flow, lightRays, swap, wipe |
|
easing |
easeInOut |
option |
determines the easing mode during the transition |
|
kenBurnsEndRectangle |
rectangle |
the viewing rectangle defined on the item to end the Ken Burns transition with note: rectangle defined as x, y, width, height. that rectangle is then scaled to fill the viewport (with mode scaleToFill) |
|
|
kenBurnsMode |
none |
option |
randomly pans accross the item randomly zooms the item randomly zoom or pans accross the item always show the entire item by panning horizontally or vertically gently rotates the item in 3D randomly rotates the item in 3D or in backwards 3D randomly chooses a Ken Burns Mode, except for autoPan or autoPanBackwards don't apply the Ken Burns effect |
|
kenBurnsStartRectangle |
rectangle |
the viewing rectangle defined on the item to start the Ken Burns transition with note: rectangle defined as x, y, width, height. that rectangle is then scaled to fill the viewport (with mode scaleToFill): |
|
|
kenBurnsStrength |
0.15 |
number 0—1 |
how much the Ken Burns effect will apply |
|
kenBurnsTime |
6 |
number 0—MAX |
time in seconds the Ken burns effect is playing |
|
pauseTransitionTime |
0 |
number 0—MAX |
the transition time of items if the slideshow is paused |
|
performOutro |
false |
booelean |
perform transition outro or start with intro of next item |
|
pivotPoint |
topLeft |
option |
used if type is pivot |
|
size |
0.1 |
number 0—1 |
the size of the transition type applied (if type is noise, spark, water, waterDrop, wipe) |
|
strength |
0.1 |
number 0—1 |
the strength of the transition type (if type is noise, spark, water, waterDrop) |
|
time |
0.5 |
number 0—MAX |
transition time in seconds |
|
type |
blend |
option |
note: the following transitions overwrite the Ken Burns effect: melt, swap, flow |
Caption element
<configuration>
<caption>
<description />
<shadow />
<title />
<transition />
</caption>
</configuration>
The caption element displays a title and a description of an item. You can use your own fonts or you can use a system font. For a list of safe system fonts, you can check en.wikipedia.org/wiki/Core_fonts_for_the_Web
|
attribute |
default |
type |
description |
|
backgroundAlpha |
0.75 |
number 0—1 |
the opacity of the background |
|
backgroundColor |
#000000 |
color |
the background color of the caption element |
|
backgroundRoundness |
10 |
number 0—MAX |
the roundness of the caption element |
|
backgroundType |
fitTextLines |
option |
fits the background around the complete text field. this results in a rectangular shape. fits the background around the individual text lines. this results in multiple rectangular shapes. |
|
countSeparator |
/ |
string |
displayed between current image and total images |
|
displayMode |
always |
option |
always display the caption only display caption when the mouse hovers over the slideshow never display the caption |
|
gridFitType |
subPixel |
option |
defines the grid fit type for rendering fonts to the screen |
|
margin |
10, 10, 10, 10 |
margin |
margin around the caption element |
|
padding |
5, 5, 5, 5 |
padding |
padding inside the caption element |
|
position |
topLeft |
option |
|
|
showCount |
false |
boolean |
shows the index of an image and the total number of images in front of the caption title |
|
spacing |
0 |
number 0—MAX |
spacing between the title and the description text |
|
strokeColor |
#fffef1 |
color |
color of the stroke around the caption element |
|
strokeType |
round |
option |
|
|
strokeWidth |
0 |
number 0—MAX |
width of the stroke around the caption element |
|
textAlign |
left |
option |
|
|
textAlpha |
1 |
number 0—1 |
opacity of the text |
|
titleSeparator |
: |
string |
displayed between image count and title |
|
width |
0 |
number 0—MAX, or percentage |
width of the caption. if the value is not 0, the backgroundType is set to fitCompleteText and the caption gets a fixed width. You can also enter a percentage, which stretches the caption to the corresponding part of the Flash® window. |
Caption transition element
<caption>
<transition />
</caption>
The transition element determines which transition to perform when displaying a caption.
|
attribute |
default |
type |
description |
|
delayIn |
0 |
number 0–MAX |
delay before the caption fades in |
|
delayOut |
0 |
number 0–MAX |
delay before the caption fades out, a value of 0 is ignored |
|
direction |
leftToRight |
option |
used if type is moveIn |
|
easing |
easeInOut |
option |
determines the easing mode during the transition |
|
time |
0.5 |
number 0—MAX |
transition time in seconds |
|
type |
blend |
option |
Caption title element
<caption>
<title />
</caption>
This element holds the title configuration of a caption.
|
attribute |
default |
type |
description |
|
color |
#fffef1 |
color |
color of the text |
|
condenseWhiteSpace |
false |
boolean |
condenses white space in case of xml nodes in text |
|
font |
Arial, sans-serif |
string |
name of a system font, or a custom defined font class loaded via fontFile |
|
fontFile |
url |
a font file containing one or more font classes. use the font attribute to specify which font class to use. |
|
|
leading |
0 |
number |
space between text lines |
|
letterSpacing |
0 |
number |
space between letters |
|
size |
22 |
number 1—MAX |
font size |
|
style |
normal |
option |
|
|
type |
normal |
oprion |
|
|
weight |
normal |
option |
Caption description element
<caption>
<description />
</caption>
This element holds the description configuration of a caption.
|
attribute |
default |
type |
description |
|
color |
#7f7f78 |
color |
color of the text |
|
condenseWhiteSpace |
false |
boolean |
condenses white space in case of xml nodes in text |
|
font |
Arial, sans-serif |
string |
name of a system font, or a custom defined font class loaded via fontFile |
|
fontFile |
url |
a font file containing one or more font classes. use the font attribute to specify which font class to use. |
|
|
leading |
0 |
number |
space between text lines |
|
letterSpacing |
0 |
number |
space between letters |
|
size |
12 |
number 1—MAX |
font size |
|
style |
normal |
option |
|
|
type |
normal |
oprion |
|
|
weight |
normal |
option |
Controller element
<album>
<controller>
<scrubBar />
<shadow />
</controller>
</album>
The controller element holds the buttons to navigate through the slideshow. If the navigation window that contains the thumbnails is shown, the controller flips and shows the buttons for the navigation window.
|
attribute |
default |
type |
description |
|
appearTime |
1 |
number 0—MAX |
appear transition in seconds |
|
autoHide |
true |
boolean |
auto hides the controller after disappearDelay seconds |
|
autoPlay |
true |
boolean |
automatically plays the slideshow |
|
backgroundAlpha |
0.75 |
number 0—1 |
background opacity of the controller element |
|
backgroundColor |
#000000 |
color |
background color of the controller element |
|
backgroundRoundness |
30 |
number 0—MAX |
roundness of the controller element |
|
buttonFile |
url |
a file containing bitmap sprites for the controller icons |
|
|
disappearDelay |
3 |
number 0—MAX |
time in seconds before the controller element hides away. time starts running when there’s no mouse interaction. |
|
disappearMode |
vertical |
option |
specifies if the controller should disappear horizontally, vertically. or fade out in place |
|
iconColorDisable |
#7f7f78 |
color |
color of icons that are disabled |
|
iconColorDown |
#fffef1 |
color |
color of icons when clicked |
|
iconColorOver |
#f92672 |
color |
color of icons when hovered over |
|
iconColorUp |
#fffef1 |
color |
normal color of icons |
|
iconHeight |
17 |
number 0—MAX |
height of an icon |
|
iconSpacing |
2 |
number 0—MAX |
spacing between icons |
|
iconWidth |
17 |
number 0—MAX |
width of an icon |
|
margin |
20, 20, 20, 20 |
margin |
margin around controller element |
|
padding |
10, 10, 10, 10 |
padding |
padding inside the controller element |
|
position |
bottomCenter |
option |
position of the controller element in the slideshow |
|
resizeTime |
0.3 |
number 0—MAX |
resize transition time when the scrub bar is displayed and the controller element changes its width |
|
showFullScreenButton |
false |
boolean |
show full screen button |
|
showMuteButton |
false |
boolean |
show mute button |
|
showNavigationAlbumUpButton |
true |
boolean |
show album up button in the navigation window |
|
showNavigationButton |
true |
boolean |
show navigation button |
|
showNavigationCloseButton |
true |
boolean |
show close button in the navigation window |
|
showNavigationNextButton |
true |
boolean |
show next button in the navigation window |
|
showNavigationPreviousButton |
true |
boolean |
show previous button in the navigation window |
|
showNextButton |
true |
boolean |
show next button |
|
showPlayButton |
true |
boolean |
show play button |
|
showPreviousButton |
true |
boolean |
show previous button |
|
showScrubBar |
true |
boolean |
show scrub bar |
|
startHidden |
false |
boolean |
hides the controller at start |
|
strokeColor |
#fffef1 |
color |
color of the stroke around the controller element |
|
strokeType |
round |
option |
|
|
strokeWidth |
2 |
number 0—MAX |
width of the stroke around the controller element |
|
transitionTime |
0.25 |
number 0—MAX |
show and hide transition time in seconds |
|
type |
normal |
option |
do not display the controller display the controller |
Controller transition element
</configuration>
<transition />
</configuration>
The scrub bar element will expand when a video is displayed. You can use the scrub bar to navigate through the timeline of a video.
|
attribute |
default |
type |
description |
|
easingPhase1 |
easeIn |
option |
determines the easing mode during the fade out of the first side of the controller |
|
easingPhase2 |
easeOut |
option |
determines the easing mode during the fade in of the second side of the controller |
|
blur |
16 |
number 0—MAX |
amount of blur applied if type is flip |
|
direction |
leftToRight |
option |
used if type is flip |
|
time |
0.25 |
number 0—MAX |
transition time in seconds |
|
type |
flip |
option |
Scrub bar element
</configuration>
<scrubBar />
</configuration>
The scrub bar element will expand when a video is displayed. You can use the scrub bar to navigate through the timeline of a video.
|
attribute |
default |
type |
description |
|
backgroundColor |
#000000 |
color |
background color |
|
height |
8 |
number 0—MAX |
height |
|
interactionEnabled |
true |
boolean |
determines if the scrub bar has mouse interaction |
|
loadingColor |
#fffef1 |
color |
color of the loader indicator |
|
margin |
4, 0, 4, 0 |
margin |
margin around the element |
|
progressColor |
#f92672 |
color |
color of the progress indicator |
|
width |
50 |
number 0—MAX |
width |
Navigation element
<configuration>
<navigation>
<albums />
<caption />
<items />
<pageIndicator />
</navigation>
</configuration>
The navigation element displays the thumbnails of the contents of an album. You can navigate to sub albums and select items to display.
|
attribute |
default |
type |
description |
|
backgroundOverlayAlpha |
0.65 |
number 0—1 |
the opacity of the overlay behind the navigation |
|
backgroundOverlayColor |
#000000 |
color |
the color of the overlay behind the navigation |
|
backgroundOverlayFadeInTime |
0.3 |
number 0—MAX |
the fade in time of the overlay behind the navigation |
|
backgroundAlpha |
0.75 |
number 0—1 |
opacity of background |
|
backgroundColor |
#000000 |
color |
color of background |
|
backgroundRoundness |
30 |
number 0—MAX |
roundness of background |
|
margin |
80, 80, 80, 80 |
margin |
space around element |
|
errorImageColor1 |
#fffef1 |
color |
background color of an error image |
|
errorImageColor2 |
#f92672 |
color |
foreground color of an error image |
|
padding |
20, 20, 20, 20 |
padding |
space inside element |
|
position |
center |
option |
|
|
strokeColor |
#fffef1 |
color |
color of line around element |
|
strokeType |
round |
option |
|
|
strokeWidth |
2 |
number 0—MAX |
width of line around element |
Navigation caption element
<navigation>
<caption>
<description />
<title />
</caption>
</navigation>
The navigation caption element displays the title of the album of which the contents are being displayed.
|
attribute |
default |
type |
description |
|
albumTitlePlaceholder |
… |
string |
in sub albums, place this in front of the title, to signify that the current album is placed inside other albums |
|
albumTitleSeparator |
/ |
string |
in sub albums, separate album titles with this string |
|
backgroundAlpha |
0.75 |
number 0—1 |
the opacity of the background color |
|
backgroundColor |
#000000 |
color |
the background color of the caption element |
|
backgroundRoundness |
10 |
number 0—MAX |
the roundness of the caption element |
|
backgroundType |
fitTextLines |
option |
fits the background around the complete text field. this results in a rectangular shape. fits the background around the individual text lines. this results in multiple rectangular shapes. |
|
countSeparator |
/ |
string |
displayed between current image and total images |
|
delay |
0 |
number 0–MAX |
delay before the caption fades out |
|
displayFullTitles |
false |
boolean |
in sub albums, display full titles, or, if false, display albumTitlePlaceholder |
|
displayParentAlbums |
true |
boolean |
in sub albums, display parent albums in front of the current title |
|
gridFitType |
subPixel |
option |
defines the grid fit type for rendering fonts to the screen |
|
margin |
0, 0, 0, 10 |
margin |
margin around the caption element |
|
padding |
0, 0, 0, 0 |
padding |
padding inside the caption element |
|
position |
left |
option |
|
|
showCount |
false |
boolean |
shows the index of an image and the total number of images in front of the caption title |
|
spacing |
0 |
number 0—MAX |
spacing between the title and the description text |
|
strokeColor |
#fffef1 |
color |
color of the stroke around the caption element |
|
strokeType |
round |
option |
|
|
strokeWidth |
2 |
width of the stroke around the caption element |
|
|
textAlign |
left |
option |
|
|
textAlpha |
1 |
number 0—1 |
opacity of the text |
|
type |
normal |
option |
display caption do not display caption |
Navigation albums element
<navigation>
<albums>
<caption />
<shadow />
<transition />
</albums>
</navigation>
The navigation album configuration element holds the configuration of albums in the navigation window. An album contains a thumbnail and a caption.
|
attribute |
default |
type |
description |
|
backgroundAlpha |
1 |
number 0—1 |
the opacity of the background color |
|
backgroundColor |
#272822 |
color |
the background color of an album |
|
backgroundRoundness |
8 |
number 0—MAX |
the roundness of an album |
|
columns |
0 |
number 0—MAX |
the number of columns note: use a value of 0 to let Monoslideshow calculate the optimal number of columns |
|
fadeInTime |
0.25 |
number 0—MAX |
album fade in time in seconds |
|
height |
60 |
number 0—MAX |
height of an album element |
|
horizontalSpacing |
2 |
number 0—MAX |
horizontal space between albums |
|
imageBackgroundAlpha |
0 |
number 0—1 |
background opacity of the thumbnail image in an album |
|
imageBackgroundColor |
#000000 |
color |
background color of the thumbnail image in an album |
|
imageRoundness |
6 |
number 0—MAX |
roundness of the thumbnail image in an album |
|
imageScaleMode |
scaleToFill |
option |
the scale mode of the thumbnail image in an album |
|
padding |
5, 5, 5, 5 |
padding |
padding inside the album |
|
rows |
0 |
number 0—MAX |
the number of rows. note: use a value of 0 to let Monoslideshow calculate the optimal number of rows |
|
strokeColor |
#3b3c36 |
color |
color of the stroke around the album |
|
strokeType |
round |
option |
|
|
strokeWidth |
0 |
number 0—MAX |
width of the stroke around the album |
|
verticalSpacing |
2 |
number 0—MAX |
vertical space between albums |
|
width |
60 |
number 0—MAX |
width of an album |
Navigation album caption element
<albums>
<caption>
<description />
<title />
</caption>
</albums>
The album caption element of an album in the navigation window.
|
attribute |
default |
type |
description |
|
backgroundAlpha |
0 |
number 0—1 |
the opacity of the background color |
|
backgroundColor |
#000000 |
color |
the background color of the caption element |
|
backgroundRoundness |
10 |
number 0—MAX |
the roundness of the caption element |
|
backgroundType |
fitTextLines |
option |
fits the background around the complete text field. this results in a rectangular shape. fits the background around the individual text lines. this results in multiple rectangular shapes. |
|
height |
60 |
number 0—MAX |
height of the caption. note: a value of 0 is for autosizing the height based on the width |
|
gridFitType |
subPixel |
option |
defines the grid fit type for rendering fonts to the screen |
|
margin |
5, 0, 0, 0 |
margin |
margin around the caption element |
|
padding |
0, 0, 0, 0 |
padding |
padding inside the caption element |
|
spacing |
0 |
number 0—MAX |
spacing between the title and the description text |
|
strokeColor |
#fffef10 |
color |
color of the stroke around the caption element |
|
strokeType |
round |
option |
|
|
strokeWidth |
width of the stroke around the caption element |
||
|
textAlign |
left |
option |
|
|
textAlpha |
1 |
number 0—1 |
opacity of the text |
|
width |
120 |
number 0—MAX |
width of the caption |
Navigation transition element
<*>
<transition>
<shadow />
</transition>
</*>
This element defines the transition type when hovering over an album or item in the navigation window.
|
attribute |
default |
type |
description |
|
distanceX |
0 |
number 0—MAX |
hover horizontal translation |
|
distanceY |
0 |
number 0—MAX |
hover vertical translation |
|
highlight |
overlay |
option |
hover highlight mode |
|
highlightStrength |
0.25 |
number 0—1 |
hover highlight strength |
|
scale |
1.1 |
number 1—2 |
scale factor when hovering over the element |
|
time |
0.1 |
number 0—MAX |
highlight transition time in seconds |
|
type |
highlight |
option |
hover highlight mode |
Navigation items element
<navigation>
<items>
<shadow />
<transition />
</items>
</navigation>
This element defines the characteristics of item thumbnails in the navigation window.
|
attribute |
default |
type |
description |
|
columns |
0 |
number 0—MAX |
the number of columns note: use a value of 0 to let Monoslideshow calculate the optimal number of columns |
|
fadeInTime |
0.25 |
number 0—MAX |
item fade in time in seconds |
|
height |
50 |
number 0—MAX |
height of an album element |
|
horizontalSpacing |
2 |
number 0—MAX |
horizontal spacing between items |
|
imageBackgroundAlpha |
0 |
number 0—1 |
background opacityof the thumbnail image |
|
imageBackgroundColor |
#000000 |
color |
background color of the thumbnail image |
|
imageRoundness |
4 |
number 0—MAX |
roundness of the thumbnail image |
|
imageScaleMode |
scaleToFill |
option |
the scale mode of the thumbnail image in an album |
|
rows |
0 |
number 0—MAX |
the number of rows. note: use a value of 0 to let Monoslideshow calculate the optimal number of rows |
|
strokeColor |
#fffef1 |
color |
color of the stroke around the navigation element |
|
strokeType |
round |
option |
|
|
strokeWidth |
0 |
number 0—MAX |
width of the stroke around the navigation element |
|
verticalSpacing |
2 |
number 0—MAX |
horizontal spacing between items |
|
width |
50 |
number 0—MAX |
width of an album |
Page indicator element
<navigation>
<pageIndicator />
</navigation>
The page indicator shows how many pages are in the navigation window and which one is currently active.
|
attribute |
default |
type |
description |
|
autoHide |
true |
boolean |
auto hides if all items are visible |
|
color |
#3b3c36 |
color |
color of background |
|
colorActive |
#fffef1 |
color |
roundness of background |
|
indicatorType |
round |
option |
|
|
margin |
15, 15, 15, 0 |
margin |
margin around element |
|
position |
bottom |
option |
|
|
size |
5 |
number 0—MAX |
icon width |
|
spacing |
8 |
number 0—MAX |
space around element |
|
type |
normal |
option |
display this element don’t display the element |
Thumbnail navigation element
<configuration>
<thumbnailNavigation>
<items />
</thumbnailNavigation>
</configuration>
The thumbnail navigation window is a permanent navigation window that only contains items and a previous and next button.
|
attribute |
default |
type |
description |
|
backgroundAlpha |
0.75 |
number 0—1 |
opacity of background |
|
backgroundColor |
#000000 |
color |
color of background |
|
backgroundRoundness |
10 |
number 0—MAX |
roundness of background |
|
iconHeight |
17 |
number 0—MAX |
icon height |
|
iconMargin |
5, 5, 5, 5 |
margin |
margin around icon |
|
iconMode |
horizontal |
option |
|
|
iconWidth |
17 |
number 0—MAX |
icon width |
|
margin |
5, 5, 5, 5 |
margin |
space around element |
|
errorImageColor1 |
#fffef1 |
color |
background color of an error image |
|
errorImageColor2 |
#f92672 |
color |
foreground color of an error image |
|
padding |
5, 5, 5, 5 |
padding |
space inside element |
|
position |
bottomCenter |
option |
|
|
showNextButton |
true |
boolean |
show next button |
|
showPreviousButton |
true |
boolean |
show previous button |
|
strokeColor |
#fffef1 |
color |
color of line around element |
|
strokeType |
round |
option |
|
|
strokeWidth |
0 |
number 0—MAX |
width of line around element |
|
type |
none |
option |
display this element don’t display the element |
Progress element
<configuration>
<progress />
</configuration>
The progress element shows the loading progress of the next item.
|
attribute |
default |
type |
description |
|
backgroundAlpha |
0.75 |
number 0—1 |
opacity of the background |
|
backgroundColor |
#000000 |
color |
color of the background |
|
delay |
0.25 |
number 0—MAX |
delay in seconds before progress is shown |
|
easingTime |
0.5 |
number 0—MAX |
time in seconds to animate to the next load value |
|
height |
5 |
number 0—MAX |
height of the progress element |
|
margin |
20, 20, 20, 20 |
margin |
margin around the progress element |
|
padding |
6, 6, 6, 6 |
padding |
padding inside the progress element |
|
position |
bottomRight |
option |
|
|
progressColor |
#fffef1 |
color |
color of the progress indicator |
|
radius |
12 |
number 0—MAX |
radius in case of type pie |
|
strokeColor |
#fffef1 |
color |
color of line around element |
|
strokeType |
round |
option |
|
|
strokeWidth |
2 |
number 0—MAX |
width of line around element |
|
transitionTime |
0.5 |
number 0—MAX |
time in seconds to fade the progress element in and out |
|
type |
pie |
option |
display a rectangular progress indicator display a round progress indicator won't display indicator |
|
width |
100 |
number 0—MAX |
width of the progress element |
Reflection element
<configuration>
<reflection />
</configuration>
The reflection element defines a reflection of the items in the viewport.
|
attribute |
default |
type |
description |
|
alpha |
0.5 |
number 0—1 |
opacity of the reflection |
|
height |
0 |
number 0—MAX |
height of the reflection |
|
offset |
1 |
number 0—MAX |
space between the item and the reflection |
Mark element
<configuration>
<mark>
<shadow />
<mark>
</configuration>
The mark element instructs Monoslideshow to display a graphic or .SWF file on top of the slideshow.
|
attribute |
default |
type |
description |
|
alpha |
1 |
number 0—1 |
opacity of the object |
|
margin |
10, 10, 10, 10 |
margin |
space around the object |
|
position |
topRight |
option |
|
|
source |
url |
url to the mark file (image or .SWF) |
|
|
transitionTime |
0.5 |
number 0—MAX |
time in seconds to fade in |
Shadow element
<*>
<shadow />
</*>
The shadow element can be applied to various elements. Refer to the XML list below to see which ones. You can disable the shadow element by setting the alpha to 0.
|
attribute |
default |
type |
description |
|
alpha |
1 |
number 0—1 |
opacity of the effect |
|
angle |
45 |
number 0—360 |
angle |
|
color |
#000000 |
color |
color of the effect |
|
distance |
0 |
number 0—MAX |
distance |
|
quality |
3 |
number 1—15 |
quality of the effect. a higher number means more quality, but consumes more CPU |
|
sizeX |
12 |
number 1—100 |
horizontal blur size |
|
sizeY |
12 |
number 1—100 |
vertical blur size |
|
strength |
1 |
number 1—100 |
amount of strength / spreading of the effect |
Sound element
<configuration>
<sound />
</configuration>
The sound element defines background music and sounds on button interaction. There are two global sound attributes: hover and select, which define sounds when hovering over and clicking on a button, respectively. The other attributes override these global sound attributes.
|
attribute |
default |
type |
description |
|
backgroundMusic |
url |
url to a mp3 file to play in the background note: to play multiple mp3 files after each other, separate multiple url's by commas |
|
|
backgroundMusicVolume |
1 |
number 0—1 |
volume of the background music |
|
backgroundMusicNavigationVolume |
0.25 |
number 0—1 |
volume of the background music when the navigation window is displayed |
|
fullScreenHover |
url |
sound when hovering over full screen button |
|
|
fullScreenSelect |
url |
sound when clicking on full screen button |
|
|
hover |
url |
global sound when hovering over a button |
|
|
onBackgroundMusicEnd |
loop |
option |
loop the background music stop the background music |
|
navigationAlbumHover |
url |
sound when hovering over an album |
|
|
navigationAlbumSelect |
url |
sound when clicking on an album |
|
|
navigationAlbumUpHover |
url |
sound when hovering over album up button |
|
|
navigationAlbumUpSelect |
url |
sound when clicking on album up button |
|
|
navigationCloseHover |
url |
sound when hovering over navigation close button |
|
|
navigationCloseSelect |
url |
sound when clicking on navigation close button |
|
|
navigationHover |
url |
sound when hovering over navigation button |
|
|
navigationItemHover |
url |
sound when hovering over an item |
|
|
navigationItemSelect |
url |
sound when clicking on an item |
|
|
navigationNextHover |
url |
sound when hovering over navigation next button |
|
|
navigationNextSelect |
url |
sound when clicking on navigation next button |
|
|
navigationPreviousHover |
url |
sound when hovering over previous button |
|
|
navigationPreviousSelect |
url |
sound when clicking on previous button |
|
|
navigationSelect |
url |
sound when clicking on navigation button |
|
|
nextHover |
url |
sound when hovering over next button |
|
|
nextSelect |
url |
sound when clicking on next button |
|
|
pauseHover |
url |
sound when hovering over pause button |
|
|
pauseSelect |
url |
sound when clicking on pause button |
|
|
playHover |
url |
sound when hovering over play button |
|
|
playSelect |
url |
sound when clicking on play button |
|
|
previousHover |
url |
sound when hovering over previous button |
|
|
previousSelect |
url |
sound when clicking on previous button |
|
|
select |
url |
global sound when clicking on a button |
|
|
thumbnailNavigationNextHover |
url |
sound when hovering over next button in thumbnail navigation |
|
|
thumbnailNavigationNextSelect |
url |
sound when clicking on next button in thumbnail navigation |
|
|
thumbnailNavigationPreviousHover |
url |
sound when hovering over previous button in thumbnail navigation |
|
|
thumbnailNavigationPreviousSelect |
url |
sound when clicking on previous button in thumbnail navigation |
List of available XML nodes
Below is the hierarchy of all XML nodes used in Monoslideshow. Note: you can also create sub albums by placing album nodes in the content node of the parent album.
<album>
<configuration>
<caption>
<description />
<shadow />
<title />
<transition />
</caption>
<controller>
<scrubBar />
<transition />
</controller>
<firstTransition />
<mark>
<shadow />
</mark>
<navigation>
<albums>
<caption>
<description />
<title />
</caption>
<shadow />
<transition>
<shadow />
</transition>
</albums>
<caption>
<description />
<title />
</caption>
<items>
<shadow />
<transition>
<shadow />
</transition>
</items>
<pageIndicator />
</navigation>
<progress />
<reflection />
<shadow />
<sound />
<thumbnailNavigation>
<items>
<shadow />
<transition>
<shadow />
</transition>
</items>
<shadow />
</thumbnailNavigation>
<transition />
</configuration>
<contents>
<image>
<configuration>
<caption>
<description />
<shadow />
<title />
<transition />
</caption>
<progress />
<transition />
</configuration>
</image>
<feed>
<video>
<configuration>
<caption>
<description />
<shadow />
<title />
<transition />
</caption>
<progress />
<transition />
</configuration>
</video>
</contents>
</album>
