Phosphor

A plugin that makes use of the phosphor framework - the one that lets you create an image based codec video for your website - just as Apple used on its websites.

Syntax - Single Movie

{{phosphor> %BASEIMAGE%[?%PARAMS%]|%BACKGROUND%|%TITLE%}}

e.g

{{phosphor> de:products:helpdesk:mobile:ios:phosphor:createnewrequest:createnewrequest.jpg |background=de:products:helpdesk:mobile:ios:iphone-masked.png?300&background-inset-left=61px&background-inset-top=128px&content-frame-zoom=1&background-overlay=de:products:helpdesk:mobile:ios:iphone-masked-overlay.png |Hover Title}}

• %BASEIMAGE% - is an the image generated by the phosphor app. In parallel there have to be all the additional files with their original names in lowercase
• %PARAMS% - see table
• %BACKGROUND% - another image that will be displayed as backdrop
• %TITLE% - a hover hint

Name	What it does
class	additional class to put on the root element
speed	a number that defines how fast the animation will run
loop	will loop the movie if set to "true"
content-frame-zoom	zoom factor of the inner movie that actually runs
background	an image where the movie frame will be embedded
background-inset-left	how far to push the movie frame from left to right
background-inset-top	how far to push the movie frame down
background-overlay	an optional overlay that will be put above the movie frame

Syntax - Multiple Movies

You can display a set of movies in a single frame as well. The syntax is like this:

<phosphor [%SIZE%] [%PARAMS%] [%CLASSNAME%]>

    <item %BASEIMAGE%[?%PARAMS%]|%TITLE%>
        %DISPLAYTEXT%
    </item>

    <item %BASEIMAGE%[?%PARAMS%]|%TITLE%>
        %DISPLAYTEXT%
    </item>

</phosphor>

• %SIZE% - e.g. 56%x36%
• %PARAMS% - see table
• %CLASSNAME% - additional class to put on the root element
• %BASEIMAGE% - is an the image generated by the phosphor app. In parallel there have to be all the additional files with their original names in lowercase
• %TITLE% - a hover hint