If you prefer to have your image variants across different folders, then you can use a setup like this:. You can start your slideshow with a specified item or album by instructing Monoslideshow to look for a.
XML node with a specific id. For example, the following code instructs Monoslideshow to start with the item myPhoto :. The next example shows how to start with the album myAlbum :. 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.
By default, Monoslideshow displays a caption element over the image. It uses the title and description attributes of the image tags for that. Monoslideshow also provides a caption template system for defining which meta information is displayed in the title and description. The caption template is defined by the template attribute in the title and description tag.
This attribute is formatted as text that holds certain variables. These variables are enclosed within curly brackets. Here is an example of templates for titles and descriptions:. As you can see, there a few variables defined between curly brackets.
In the example above, the title template defines that titles always start with the current index, followed by the total album size. Then the title as defined in the image tag is displayed, with information about the aperture value in parentheses. The description template defines that all descriptions start with the copyright notice of the current image, followed by information about the equipment used to shot it.
It doesn't insert the original description. You can use square brackets to define groups. If a variable inside a group doesn't contain any information, the entire group is left out.
Monoslideshow fills in the defined variables with built in information and EXIF data if present in the image file. By default, Monoslideshow shows a logo during the initialization process of the slideshow. During this process the. XML file is loaded and the layout is initialized.
To disable the Monoslideshow logo, you have to pass the variable showLogo to Monoslideshow and set it to "false":.
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":. Sometimes it's convenient to set a base folder to which all files referenced in the.
XML file are relative to. If the base attribute is set, all files in the. XML file are prepended by the folder defined in the base tag. Be sure to end the base attribute with a folder separator forward slash. Monoslideshow can receive function calls that instruct the slideshow to perform certain actions.
Monoslideshow also broadcasts events, that your program can listen to. This way, you can synchronize your actions to Monoslideshow events, and Monoslideshow can perform actions on your command. Monoslideshow has initialized itself and is ready to receive API calls.
The following attributes are available by default when Monoslideshow broadcasts an event:. XML file to Javascript listeners. When item is a video, type contains video type. When type is group , the attributes definedSources and sources are contained in an object called group. To listen to Monoslideshow events in Javascript, you have to add listeners to Monoslideshow.
You can do this by calling the function addListener event, function on the Monoslideshow instance. Below you find an example of how to trigger the next and previous buttons via Javascript.
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 slideshow.
There's also a caption , which holds the title and description of the currently displayed item. You'll see the loadIndicator , which indicates that an item is being loaded. And finally there's the controller , which lets you navigate through the slideshow. 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. The album element contains the contents of the slideshow. Images, videos and group elements can be used to populate an album.
In addition, you can place albums inside other albums. You can specify as many items as you like, as Monoslideshow only loads items when they are needed. 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. 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" without quotes , in which case the viewport scales along with the dimensions of the div 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.
The video element contains a video file. Not every device supports all video formats. Please use the sources tag to specify multiple sources for all the devices you are targeting. Displayed when loading takes too long, and on devices that won't play inline video automatically. The url is affected by itemPath, just like regular items. The video sources variant specifies a variant of the same video. This is useful to target multiple browsers with different video playback capabilities..
The video posters variant defines a variant of the same poster image of a video. Normally, videos are played instantly when they load. Whenever it takes too long, a video play button is displayed. The same button is also used on mobile devices that don't support automatic playback of videos. The group's contents contain multiple images to be displayed on one slide. Group contents can not contain videos or other groups. The smart group layout determined by Monoslideshow is placed on the group grid, so there's a always a design consistency.
The transition element determines which transition to perform when loading and displaying a new item. 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. If backgroundType is fitTextLines , gradient isn't allowed. You can also enter a percentage, which stretches the caption to the corresponding part of the slideshow window. The transition element determines which transition to perform when displaying a caption. If the template attribute is not set, the caption uses the normal title, as defined in the image node.
If a variable is not present for example, not all images have all EXIF data , the variable is left out in the resulting text. If no variable in the template is found, the template is not used. If the template attribute is not set, the caption uses the normal description, as defined in the image node. 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. Determines the transition of the controller when the navigation window is shown. 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. It can be used as a simpler alternative to the controller element. The navigation element displays the thumbnails of the contents of an album. You can navigate to sub albums and select items to display. The navigation caption element displays the title of the album of which the contents are being displayed.
This element defines the characteristics of item thumbnails in the navigation window. This element defines the transition type when hovering over an album or item in the navigation window. The navigation album configuration element holds the configuration of albums in the navigation window. An album contains a thumbnail and a caption. The thumbnail navigation window is a permanent navigation window that only contains items and a previous and next button.
The load indicator element is a spinner that's displayed when items take long to load. The page indicator shows how many pages are in the navigation window and which one is currently active. The shadow element can be applied to various elements. You can disable the shadow element by setting the alpha to 0. The gloss element can be applied to various elements.
You can disable the gloss element by setting the strength to 0. The emboss element can be applied to various elements. You can disable the emboss element by setting the strength to 0. Colors are defined in hex, and are always preceded by a , like this: rrggbb. The syntax for defining a gradient is as follows: type,degrees-color,ratio,alpha-color,ratio,alpha.
The triplet color,ratio,alpha can be repeated more than two times. The values of the components are defined as:. This example fills an element with a vertical fade from red to green: linear, ff,0- 00ff00,1. The following table lists the EXIF attributes you can use in the caption template system of Monoslideshow. Please note that they are case-sensitive and all start with an uppercase character instead of the native Monoslideshow attributes.
The list is partly based on the EXIF 2. Monoslideshow Manual 3. Notepad, Sublime Text A website to embed the slideshow in How does it work? The basics A single. XML file to customize Monoslideshow is a single Javascript file that uses information from a XML file to configure the contents and layout of the slideshow.
It's suitable for desktops, tablets and phones. Monoslideshow can display multiple images on one slide. It automatically finds the most optimal layout. Monoslideshow works in all major browsers.
Whenever a transition feature is not available WebGL for example , Monoslideshow gracefully degrades to a less advanced alternative. Monoslideshow has been built from the ground up with mobile devices in mind. Both iOS tablets and phones are supported. And Android will be supported in the future. Monoslideshow is a single Javascript file and does not depend on jQuery or other libraries.
It's only 64Kb when GZipped.
0コメント