User Tools

Site Tools



The ImageViewer is a component that is primarily meant to display an Image on the front side and meta-data on the back side.

An image viewer with a frame and interactive buttons.
ImageViewer screenshot


Type Interactive Display Object
Category Component
Scope Local
Position *
Parents Container
Children *
Gestures *
Requirements The nesting structure and class attributes must match the example below.



image object reference the Image element

See Also: Display Attributes

<ImageViewer id="image-viewer-1" x="700" y="120" rotation="10">
    <TouchContainer id="tc_img1" class="image_container" visible="true" targetParent="true" mouseChildren="false">
        <Image id="img1" class="image_element" src="images/train.jpg" scale=".4"/>
    <!-- Info panel container (back). -->
    <TouchContainer id="image_info" class="info_container" visible="false" targetParent="true" mouseChildren="false" >
        <Graphic color="0x6699FF" alpha="0.6" lineStroke="0" class="info_bg" shape="rectangle"/>		
        <Text id="title" class="title" border="false" selectable="false" text="The Gare Montparnasse"/>				
        <Text id="description" x="10" width="580" wordWrap="true" color="0xFFFFFF" class="info_description" selectable="false" text="The Gare Montparnasse became famous for the derailment on 22 October 1895 of the Granville–Paris Express, which overran the buffer stop."/>				

    <!-- This is just the frame for the whole viewer. Thick frames are very useful for objects with context-specific touch, as it gives a touchable border. The ImageViewer does not have context specific touch, so feel free to style it however you like. -->
    <TouchContainer id="frame-c" class="frame_container" visible="true" targetParent="true" mouseChildren="false">
        <Frame frameColor="0x999999" frameAlpha="0.3" frameThickness="30" frameShape="rectangle" class="frame_element"/>
    <!-- Here is where the menu is structured.-->
    <Menu id="menu-1" class="menu_container" x="0" y="0" alpha="0.6" position="bottomRight" paddingLeft="0" paddingBottom="-50" paddingRight="20" autoHide="true" visible="false">
        <Button id="info-btn" class="info_btn" dispatch="down:info" hit="info-hit" initial="info-up" down="info-down" up="info-up" out="info-up">
            <Container id="info-up">
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x282E33" />	
                <SWF alpha="1" x="15" y="8" color="0xFFFFFF" scale="1.6" classRef="org.openexhibits.assets.Info" />
            <Container id="info-down">
                <Graphic id="info-bg-down" shape="circle" radius="20" lineStroke="1.5" color="0x495E67" />	
                <SWF alpha="1" x="15" y="8" color="0xCCCCCC" scale="1.6" classRef="org.openexhibits.assets.Info" />
            <Container id="info-hit">
                <Graphic id="info-hit-bg" shape="circle" radius="20" color="0x666666" alpha="0" />
        <Button id="close-btn" class="close_btn" dispatch="down:close" hit="close-hit" initial="close-up" down="close-down" up="close-up" out="close-up">
            <Container id="close-up" class="up" >
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x282E33" />	
                <SWF alpha="1" x="11" y="11" color="0xFFFFFF" scale="1.6" classRef="org.openexhibits.assets.Close"/>
            <Container id="close-down" class="down">
                <Graphic alpha="1" shape="circle" radius="20" lineStroke="1.5" color="0x495E67" />	
                <SWF alpha="1" x="11" y="11" color="0xCCCCCC" scale="1.6" classRef="org.openexhibits.assets.Close" />
            <Container id="close-hit" class="hit">
                <Graphic id="close-hit-bg" shape="circle" radius="20" alpha="0" />
        <Gesture ref="n-drag" gestureOn="true"/>
        <Gesture ref="n-scale" gestureOn="true"/>
        <Gesture ref="n-rotate" gestureOn="true"/>
imageviewer.txt · Last modified: 2015/09/18 13:48 by glass