PropertyChanged Event

Most of the properties of this ImageViewer will fire the PropertyChanged event when the value changes. When this happens, the value of PropertyChangedEventArgs.PropertyName of the event data will be set to the name of the property that was changed. For example, the PropertyChangedEventArgs.PropertyName will be set to "ScaleFactor" when ScaleFactor changes and "ScrollOffset" when ScrollOffset changes.

Start with the ImageViewer example, remove all the code inside the example function (search for the // TODO: add example code here comment) and insert the following code:

Open the HTML page in your browser, now as after you click the Example button and whenever you pan or zoom the image, the values are displayed in the label.

JavaScript

example: function SiteLibrary_DefaultPage$example(viewer) {
   var exampleLabel = document.getElementById("exampleLabel");

   // Hook to the property changed event of the viewer
   viewer.add_propertyChanged(function(sender, e) {
      // Check the property name, we are interested in "ScaleFactor" and "ScrollOffset"
      var propertyName = e.get_propertyName();
      if(propertyName == "ScaleFactor" || propertyName == "ScrollOffset") {
         exampleLabel.textContent = propertyName + "Changed";
      }
   });
},

Parameter	Type	Description
sender	'var'	The source of the event.
e	PropertyChangedEventArgs	The event data.

Reference

ImageViewer Object
ImageViewer Members