lost zoom position on click with preserveViewport = true

[johnico]

Hi .
regrading the following issue
#1105 that.

when I upload my code I have the following code block to keep the zoom on 2 images :

`var viewer1 = OpenSeadragon({
             id: "id1",
             maxZoomPixelRatio:6,
           defaultZoomLevel: 	0.75,
           minZoomLevel: 	0.75,
           visibilityRatio: 	1,
             preserveViewport: true, 
             prefixUrl: "img",
   });
var viewer2 = OpenSeadragon({
                id: "id2",
                maxZoomPixelRatio:6,
                defaultZoomLevel: 	0.75,
                minZoomLevel: 	0.75,
                visibilityRatio: 	1,
                preserveViewport :true,
                prefixUrl: "img/",
      });

  var viewer1Leading = false;
  var viewer2Leading = false;

  var viewer1Handler = function() {
    if (viewer2Leading) {
      return;
    }

    viewer1Leading = true;
    viewer2.viewport.zoomTo(viewer1.viewport.getZoom());
    viewer2.viewport.panTo(viewer1.viewport.getCenter());
    viewer1Leading = false;
  };

  var viewer2Handler = function() {
    if (viewer1Leading) {
      return;
    }

    viewer2Leading = true;
    viewer1.viewport.zoomTo(viewer2.viewport.getZoom());
    viewer1.viewport.panTo(viewer2.viewport.getCenter());
    viewer2Leading = false;
  };

  viewer1.addHandler('zoom', viewer1Handler);
  viewer2.addHandler('zoom', viewer2Handler);
  viewer1.addHandler('pan', viewer1Handler);
  viewer2.addHandler('pan', viewer2Handler);`

that is work and both image working great together but somthing else with the keep zoom went wrong.
I have a button to show and hide on of the image, but in each click of the button i lost some of the zoom event i added preserveViewport = true; in each click or without it
so when i click the button i gout the second image and both are got the zoom, but after i click the hide button in the first click everything is ok but if I continue to show and hide the zoom is not at the same point. after 3 or 4 click the zoom return to the start point.

onclick i have the following code

`  var tileSource={
                            type: 'image',
                            url:  img
                      }

                      viewer1.open(tileSource);`

also i have css that i perform on click that divide the div to be 50%(each image is 50%) to show 2 images side by side side so i think maybe its related to css, but how can we keep the zoom event we change divs or with of divs ?

thx for the support

[johnico]

found autoResize:false,
but the second image became gray and the size is broken

so i think it something related that i resize the div in 50% but did not find a solution for that
thx

[iangilman]

You might have to listen for additional events, like the open event and maybe watching for resizes, and then call one of the viewer handlers to make them line up.

And you might have to do some compensation if the two viewers aren't the same size... is that part of what's going on?

[johnico]

the 2 viewers are in the same size 50% side by side ,
how can I use the event to keep the zoom as i want in close and when i open the dice ? how can I use the open listener ? Maybe i need to calculate the zoom again in each click ? is it possible
do you have any examples for that?
thx for helping

[iangilman]

Regarding the open event I was thinking something like this:

viewer1.addHandler('open', viewer2Handler); // When Viewer 1 is opened we want Viewer 2 to lead
viewer2.addHandler('open', viewer1Handler);

You shouldn't need to do anything extra on click, since the zoom and pan events should already cover it.

I'm having a hard time visualizing the scenario where things are breaking. Can you share a link to your code, or maybe a simplified version that shows the problem directly? You can fork my Codepen if you'd like, for instance.

[johnico]

@iangilman hi i opened a new issue with all the details , can you help me there ?
#1141

the codepen is :
http://codepen.io/anon/pen/RpWoar