HAniS Example 1g - Three HAniS animations on one page - two controling cluding zooming and roaming

Example 1g: This is similar to the previous example, with the left panel (instance) controlling animation, etc. However, this example now allows the right-most panel to also control the zooming and roaming of the first panel as well.

Extending the previous example, we now also want to control the zooming and roaming from the 3rd panel as well...

The "Zoom" control was also removed from the right-most panel (HAniSF instance "c", in favor of using the "active_zoom=true" parameter so zooming/roaming is always active in the panel.

Yes, you do need a tiny bit more JavaScript to accomplish this!

Note that the right panel's zoom/roam does not control the middle panel (it certain could, however!). The middle panel's zoom/roam is controlled by the user actions on the left panel.

The HTML inside the <body> first sets up three <div> elements for the animations, and then defines three "instances" of HAniS for each of the animations, followed by the JavaScript functions needed to connect the "master" animation to the other two:

<div id="handiv" style="display:inline-block;width:500px;"> </div>
<div id="handiv22" style="display:inline-block;width:200px;"> </div>
<div id="handiv33" style="display:inline-block;width:300px;"> </div>

<script>

var c = new HAniSF();
var b = new HAniSF();
var a = new HAniSF();

function aready() {
   a.frameChanged(changb);
   a.zoomChanged(zchangb);
   c.zoomChanged(zchangc);
}
function changb(frm) {
  b.showFrame(frm);
  c.showFrame(frm);
}
function zchangb(z) {
  b.showZoom(z);
  c.showZoom(z);
}

function zchangc(z) {
  a.showZoom(z);
}
function init() {


  b.setup('filenames = TIR1.GIF, TIR2.GIF, TIR3.GIF \n imagecan_style=border-radius:30px; \n start_looping=false \n' + 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n controls = overlay \n' + 
  ' overlay_labels=Map \n window_size=200,200 \n buttons_style = flex:auto;margin:2px;' , 'handiv22'); 

  c.setup('filenames = TSFC1O.gif, TSFC2O.gif, TSFC3O.gif \n imagecan_style=border-radius:30px; \n active_zoom=true \n start_looping=false \n' + 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n controls = zoom,overlay \n' + 
  ' overlay_labels=Map \n window_size=300,300 \n buttons_style = flex:auto;margin:2px;' , 'handiv33'); 

  a.setup('hanist1.txt','handiv', aready )
} 

window.onload = init();
</script>

(Note also in the last two instances, the overlay_filename (TMAP) need only be given once, since it applies to all frames.)

Go To Front Page
Next Example