Monoslideshow manual

Monoslideshow supports Flickr RSS feeds. You can find links to these. RSS feeds on group pages and personal pages on www. To load a Flickr album, just copy the URL of the. RSS file and paste it in your. XML file like so:.

RSS feed. The large version only exists for very large original images. You can dynamically load monoslideshow. To do this, you can insert this code in your main. Once monoslideshow. You can then instantiate this class and call the start function on the instance. This function takes three parameters which specify the width, the height of Monoslideshow and showLogo.

So to disable the logo, you have to write this:. Create a. SWF-file containing one or more fonts. Load this. SWF-file in Monoslideshow. Specify your custom font names in monoslideshow.

You can create the. TTF files. Let's quickly review both ways. The next step is to give each font symbol in the library an identifier name you can use in monoslideshow. This url should be relative to the. SWF-file that's loading it, in this case, monoslideshow.

You then have to place the symbol ForceShared on the stage. SWFMill takes as input an. XML-file and from this it produces a. It's operated from the command line. You can download SWFMill for free from www.

SWFMill is commonly used to create asset libraries that contain graphics, fonts and sounds. We'll use it here for the sole purpose to create an asset library of fonts. Let's take a look at the following example of an SWFMill. The above piece of code will generate an. SWF-file with a library that contains two fonts, arial and verdana. The name attribute says what this font should be called.

The font names in monoslideshow. SWF-file available for other. SWF-files that load this file. The url attribute should specify where the file is placed relative to the. SWF-file that loads it. So, in this example, fonts. Before Monoslideshow can display your custom fonts, you have to specify which font file to load. Generally, you would place the generated fonts. After this, you have to paste the following in monoslideshow. Inside monoslideshow. The global font attribute will be overridden by the following font attributes:.

XML file. There are a lot of options available. The following objects each have their own attributes: Global, images, image window, thumbnail window, loading icon, controls. All available attributes are defined below. The standard values are displayed between square brackets. Global attributes The following attributes are global attributes. Note: the sounds are preloaded to ensure direct playback. The more sounds you define in the XML file, the longer it lasts before the slideshow starts.

Main attributes backgroundColor color [ffffff] The background color of the slideshow. This album will be displayed when Monoslideshow loads. Note: will soon be deprecated, please use startWithAlbumID. This is the global sound for all hover actions.

It is overridden if you specify one of the other hover sounds below. This is the global sound for all select actions. It is overridden if you specify one of the other select sounds below. Main attributes title text Title of the image. Some examples of how scaleToFit and scaleToFill work:. Some examples:. The Ken Burns effect scales the images according to scaleToFit, the margins will be zero and imageAlign will be center.

This way, there's always room to smoothly pan and zoom across the image in the slideshow. There will be no left-over space. Use coordinates from the unscaled image. You can specify multiple mp3 files by separating them with a comma. You can set the rectangle by specifying the top left and bottom right coordinates separated by comma's.

Monoslideshow makes use of the latest web technologies. But each browser has different capabilities. That's why Monoslideshow looks at the capabilities of the browser it's running in, and automatically adapts to those. You can even specify a fallback list of transition types. Here's an overview of browser support for the technologies used by Monoslideshow:. Try online demo. Feature detection Monoslideshow makes use of the latest web technologies.

You can also generate a. XML file as a starting point for your own on the demo page: monoslideshow. To put Monoslideshow on your site, you have to embed it in your web page. Below is an example of how to do this:. The Monoslideshow Javascript file monoslideshow.

When your website is loaded, the function onLoadComplete is called as set by the onLoad attribute of the body tag. This function instantiates Monoslideshow as variable mss and tells it to load itself in the div tag with id attribute monoslideshowHolder. The second line in this function finally tells Monoslideshow to load the. Monoslideshow can be customized by altering the. In this chapter, a couple of the most typical customizations are presented. Monoslideshow has support for smart group layouting.

You can specify multiple images in a group tag and the slideshow will automatically find the optimal layout for the images it contains. The following slideshow contains two slideshow items, a group with two and another group with three images:. The contents tag of a group tag can only contain image tags. Monoslideshow is fully resizable. This makes Monoslideshow an ideal slideshow component for your responsive layouts. Whether Monoslideshow is viewed on your laptop, tablet or phone, it always displays its content in the most optimal way.

The only thing that has to be done is telling Monoslideshow to resize itself to the dimensions you want. The example below updates the dimensions of Monoslideshow every time the browser window is resized:. Monoslideshow even has support for different configurations per dimension specification, much like CSS Media Queries.

For example, have a look at this. XML file configuration:. Instead of one configuration tag, there are now two variant tags inside a configurations tag. These variant tags can contain all the tags and attributes that normal configuration tags can contain.

There's one important distinction: they override normal configuration settings, because they are targeted more specifcally. That is because of their size selection criteria. The criteria attributes applied in this case are minWidth and maxWidth. The above settings state: when Monoslideshow is pixels wide at a maximum, apply the transition type cube , in between and pixels wide, apply transition type push , and otherwise apply the default transition which is blend.

Making different configuration variants based on size selection criteria is a great way to ensure that your slideshow works perfectly on all devices you are targeting. When making Monoslideshow responsive, it's often desired to have a different set of images for a different type of screens.

For example, it's no use loading a high resolution image on a mobile device, as it's just wasting bandwidth. You can target devices with multiple image sources in a couple of ways. Let's take a look at image variants first:. This example shows two image tags, each having two different file sources. The width attribute of the image tags specifies in which case that specific source variant has to be displayed. When the slideshow is only pixels wide, the first variant with width is chosen.

If the slideshow is wider than pixels, the second variant with width is chosen. Similarly, you can use the height attribute to target the image variants to multiple devices, or you can use both. Note that the width and height attributes do not have to be the exact same dimensions of the images themselves.

They merely are an instruction for Monoslideshow for when to use which image variant. Specifying source variants is a great way to make Monoslideshow fully responsive to a wide array of devices.

For example, if smart group layouting is selected, there are multiple images on one slide, and Monoslideshow automatically chooses the best fitting image, i. Another, more concise way to have multiple source files for one image, is to make use of the filenameSuffix attribute.

This attribute appends text after the file's basename and before the file extension. Combining it with configuration variants, you'll end up with the configuration below. On smaller screens, the source "photo1. 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.