Example 2: Basic animation with zooming and "fancy" control buttons
Here we do a simple animation, using image filenames that are explicitly named
in the config file. In addition, using CSS-style sytax, we provide
some styling to the buttons.
Finally, to keep the information label that is
embedded in the images (at the bottom), we use the 'image_preserve' option.
We also hide the bottom 12 lines of the image (annotation) when
zooming so the (zoomed) annotation does not appear.
The config file looks like this:
<![CDATA[
filenames = TVIS1.GIF, TVIS2.GIF, TVIS3.GIF
image_preserve = 0,388,499,399
hide_bottom =12
controls = first, backward, startstop, forward, last, speed, looprock, /zoom
controls_tooltip = Click to go to first image, Click to step backward, Click to start and/or stop the animation, Click to step forward, Click to go to last image, Use the buttons to adjust the animation speed, Click to toggle between looping and rocking, Click to enable zooming (then click mouse button on image to zoom and 'drag' the mouse to roam)
controls_style = padding:5px;background-color:green;
speed_labels = Slower, Faster
zoom_labels = Zoom, <span style='font-weight:bold;color:red;'>Un-zoom</span> ,90
initial_message = This is the initial message<br><i>Please wait for the images to load</i><p>Note the controls at the top<br>that you may use to control the display<p><p>Click to dismiss
initial_message_style = top:20px;left:50px;width:300px;height:150px;background-color:blue;color:white;border-style:solid;border-width:2px;
buttons_style=padding:5px;background:linear-gradient(white,orange);vertical-align:middle;margin-left:10px;font-family:arial;font-size:14px;padding:5px;border-radius:10px;
startstop_labels = Animate, Stop, 80
]]>