Home -> FPP plugins page -> panosync.swf
This plugin is completely free for use in any context or connection.
panosync.swf
With this plugin you can synchronize the panning and zooming of two or several panos. It uses the Flash ExternalInterface that allows direct communication between Flash applications (and JavaScript functions in your HTML page). Obviously, you can only click and drag one pano at a time, and the clicked pano will be set up as master and the others as slaves. If you click another pano, then that pano will take over the role as master. The panning and zooming of the master pano will of course be a lot smoother, but in a resonably modern PC the slave panos will follow in a quite acceptable manner.

To make the panos being able to talk to each other and to FPP, you have to assign a name and an ExternalInterfaceID (EIID) to each pano. The name is specified in an attribute in your HTML file, and the EIID is set in the <global> tag in your FPP XML file. In the example below I have used "pano1, pano2,..." as names and "FPP1, FPP2,..." as EIID's.

The following hotspot attributes are supported:

syncsync="pano1/FPP1:pano2/FPP2"list of panos to be synchronized, see below
onMasteronMaster="selPano1"optional JavaScript command to be executed
when pano is set as master



NOTES:

The list of panos to be synchronized is specified in the sync="..." attribute. It is a colon (:) separated list, and each pano has to be included as "name/EIID". The order of the panos is not important, and the easiest way is to use the same list in all panos.

The onMaster="..." attribute can be used to execute a JavaScript function when a pano is assigned as master.




Example of synchronizing two panos:


HTML file:
   ...
   <script type="text/javascript" src="../swfobject.js"></script>
   <script type="text/javascript" >
      var flashvars1 = {
         xml_file: "synctest31.xml"
      };
      var attributes1 = {
         name: "pano1"
      };
      var flashvars2 = {
         xml_file: "synctest32.xml"
      };
      var attributes2 = {
         name: "pano2"
      };
      var params = {
         allowscriptaccess: "always",
      };

      swfobject.embedSWF("../pano.swf", "flashspring", "480", "280", "9.0.0", false, flashvars1, params, attributes1);
      swfobject.embedSWF("../pano.swf", "flashsummer", "480", "280", "9.0.0", false, flashvars2, params, attributes2);
   </script>
</head>

<body>
   ...
      <div id="spring" class="pano">
         <div class="info">
            <div class="season">Spring</div>
         </div>
         <div id="flashspring">
            <p>
               This content requires <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a> and a browser with JavaScript enabled.<br />
            </p>
         </div>
      </div>

      <div id="summer" class="pano">
         <div class="info">
            <div class="season">Summer</div>
         </div>
         <div id="flashsummer">
            <p>
               This content requires <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a> and a browser with JavaScript enabled.<br />
            </p>
         </div>
      </div>

      <div id="description">
         <div class="heading">
            Testing a FPP pano sync plugin
            <p class="smalltext"><a href="eniro.html"></a></p>
         </div>
      </div>
   ...
</body>
</html>

FPP XML file1:
   ...
   <global ExternalInterfaceID="FPP1" onStart="goSpring()"
      goSpring="loadPano(panoName=../arstaviken/img/arstaviken_100506)"
   >

      <!-- synchro spot -->
      <spot id="synchronizer" url="panosync.swf" sync="pano1/FPP1:pano2/FPP2" />

   </global>
   ...

FPP XML file2:
   ...
   <global ExternalInterfaceID="FPP2" onStart="goSummer()"
      goSummer="loadPano(panoName=../arstaviken/img/arstaviken_100602)"
   >

      <!-- synchro spot -->
      <spot id="synchronizer" url="panosync.swf" sync="pano1/FPP1:pano2/FPP2" />

   </global>
   ...


Version history:

2.0.1:
Fixed bug when changing panos.