These are chat archives for openseadragon/openseadragon

Aug 2016
Aug 05 2016 06:56

Just wanted to point out what i meant with that picture. The blue highlighted element is the canvas element created inside the OSD container. My test images have the size of width:498px and height:646px.
When creating .dzi files of those files I get the following size in my dzc_output.xml (created with DeepZoomComposer):

<?xml version="1.0" encoding="utf-8"?><Image TileSize="256" Overlap="1" Format="jpg" ServerFormat="Default" xmlns=""><Size Width="498" Height="646" /></Image>

So the .dzi file ratio seems to be right for my perspective.
When I inspect the canvas-elements on my page the width and height properties are also right:

<canvas style="background: transparent none repeat scroll 0% 0%; border: medium none; margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%;" width="498" height="646"></canvas>

On each side of the image there is a "margin" of 25px, so the actuall size of my filled image is width:448pxand height:596px.
Just noticed when I remove the showNavigationControl: false option from my viewer the upper-margin inside my canvas element is reserved for the navigation. So can it be that the OSD always keeps a 25px "circle" around the filled_image to have a place to display the navigation?

Chris Engberg
Aug 05 2016 06:58
When you zoom the margin remains?
Aug 05 2016 11:55
@chris-engberg Yes, because I disabled the viewer zoom and only increase the my own outer div-container when I zoom in.
Chris Engberg
Aug 05 2016 13:09
Can you share what configurations you have in the OSD object?
Aug 05 2016 13:20
This is the function I use to draw all viewer:
$(this).data("picture") is the path to my .dzi file
  var openseadragon_viewports = document.querySelectorAll('#flipbook div');
  $(openseadragon_viewports).each(function(index){ = index;
    var source = $(this).data("picture");
    var source_xml_file = source + "/dzc_output.xml"
    var viewer = OpenSeadragon({
      id: index,
      mouseNavEnabled: false,
      showNavigationControl: false,
      tileSources: source_xml_file
Chris Engberg
Aug 05 2016 13:23
If you add defaultZoomLevel = 1, does it change anything?
Aug 05 2016 14:50
When I add that option the "front" pages of my book seem allright, but as soon as I try to turn the page of by book it happens again. Seems to be something between OSD and turnjs that doesn't work out. Need to look into this further next week.
Chris Engberg
Aug 05 2016 14:54
You can use sequenceMode for the various pages and preserveViewport to keep it zoomed properly between page flips.
Are you hosting "pages" in individual viewports?
Oh I see turn.js
Ian Gilman
Aug 05 2016 16:18
@Flexflexible_twitter OSD doesn't add any padding or margin to the viewer... maybe there's something else going on in your CSS?
Is it possible to share a link to your work in progress?