These are chat archives for openseadragon/openseadragon

30th
Jun 2017
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 16:29
Hey all, I've quick question, what you suggest as a best option to make image both vertical or horizontal fit to the container? I'm still reading previous messages but there's a lot. if you refer me, I'll be really happy.
Ian Gilman
@iangilman
Jun 30 2017 17:00
@mdtanrikulu Any shape image fits the container by default... what are you trying to do that's different than that?
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:01
Hey @iangilman , thanks for the response.
I'm trying to make a viewer which will show pictures vertically or horizontally fit based on their resolution, i.e. 1200x300 gonna be fit as horizontally to 700 x 400 container
but 300 x 1200 also should be fit as vertically into the same 700 x 400 container
Ian Gilman
@iangilman
Jun 30 2017 17:04
A single image in an OpenSeadragon viewer, or something else?
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:04
single image
Ian Gilman
@iangilman
Jun 30 2017 17:05
And it doesn't just do it by default?
That's the standard behavior
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:05
I think no, if I don't miss something. It's always fitting images horizontally
Ian Gilman
@iangilman
Jun 30 2017 17:05
Can you share a link and/or code?
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:06
umm it's really hard but I can share options of the viewer
Ian Gilman
@iangilman
Jun 30 2017 17:06
Cool
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:09
viewer = this.viewer = OpenSeadragon({
                id: id,
                visibilityRatio: 1,
                constrainDuringPan: false,
                defaultZoomLevel: 1,
                minZoomLevel: 1,
                maxZoomLevel: 10,
                zoomInButton: 'zoom-in',
                zoomOutButton: 'zoom-out',
                homeButton: 'reset',
                //fullPageButton: 'full-page',
                nextButton: 'next',
                previousButton: 'previous',
                showNavigator: false,
                tileSources: {
                    type: type,
                    levels: [{
                        url: image,
                        height: data.naturalHeight, //height of image
                        width: data.naturalWidth  //width of image
                    }]
                },
                gestureSettingsMouse: {
                    clickToZoom: false,
                    dblClickToZoom: true
                }
            })
Ian Gilman
@iangilman
Jun 30 2017 17:10
By fitting the image, do you mean with extra space on the sides or top/bottom so you can see the entire image? Or do you mean zoomed in so that parts of the image are cut off but the viewer is filled with image with no empty spaces?
At any rate, I think you just need to kill the defaultZoomLevel
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:11
any image should perfectly fit in the container and shown entirely. that's what I want
Ian Gilman
@iangilman
Jun 30 2017 17:13
Cool. I believe you should get that if you remove defaultZoomLevel from your options
Muhammed Tanrıkulu
@mdtanrikulu
Jun 30 2017 17:14
yeah it was that easy :) thank you so much. Sometimes trying so hard and don't know actually solution is that simple :)
Ian Gilman
@iangilman
Jun 30 2017 17:23
Excellent... glad it worked :)