HAniS Example 1j - Two HAniS instances on one page for sliding and fading

Example 1j: Two HAniS instances on one page for sliding and fading -- with one controlling the other

Here we have two instances of HAniS -- one for the "slide" control and the other for the "fade" control. Using some JavaScript, we let the "slide" panel control the "fade" panel. Also, we have the images and overlays be pre-defined, so the user doesn't have any extra things to select.

Also, we used the framelabel control to simply add a label to the right-side image so that it gets properly aligned with the left one.

Here is the HTML for this:

<div id="handiv" style="display:inline-block;width:520px;"> <div>
<div id="handiv22" style="display:inline-block;width:520px;"> <div>

<script>
var a = new HAniSF();
var b = new HAniSF();

function aready() {
   a.frameChanged(fchangb);
   a.zoomChanged(zchangb);
   a.slidefadeChanged(sfchangb);
}
function fchangb(frm) {
  b.showFrame(frm);
}
function zchangb(z) {
  b.showZoom(z);
}
function sfchangb(p) {
  b.setSlidefade(p);
}


function init() {

  a.setup('filenames = TVIS1.GIF, TVIS2.GIF, TVIS3.GIF \n' +
  'start_looping=true \n' + 
  'overlay_filenames=TIR1.GIF&TIR2.GIF&TIR3.GIF \n' +
  'active_slide=t \n' + 
  'active_zoom=t \n' + 
  'controls=startstop, zoom, overlay \n' + 
  'overlay_labels=IR/always \n' +
  'slidebar_style=orange,2,40,20 \n' +
  'buttons_style = flex:auto;margin:2px;' , 'handiv', aready); 

  b.setup('filenames = TVIS1.GIF, TVIS2.GIF, TVIS3.GIF \n' +
  'start_looping=false \n' +
  'controls = framelabel, overlay \n' + 
  'overlay_filenames=TIR1.GIF&TIR2.GIF&TIR3.GIF \n' +
  'active_fade=t \n' + 
  'fadebar_style=#00000000,1,30,30,none \n' + 
  'overlay_labels=IR/always \n' +
  'frame_labels=Drag the slidebar in the other panel and this panel fades between the Vis & IR \n' +
  'buttons_style=flex:auto;margin:2px; \n' +
  'framelabel_style=background-color:white;border:none; \n' , 'handiv22'); 
} 

window.onload = init();
<script>

Go To Front Page
Next Example