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:

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

Go To Front Page
Next Example
This webapp Copyright© 2014-2017 by Tom Whittaker