Skip to content

Instantly share code, notes, and snippets.

@bdalziel
Created November 9, 2012 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bdalziel/4046956 to your computer and use it in GitHub Desktop.
Save bdalziel/4046956 to your computer and use it in GitHub Desktop.
Sizing the zoom ratio
var sizeZoomRatio = function (gallery) {
var zoomBodyNode = gallery.one('.zoomBody');
var zoomBodyRatioNode = zoomBodyNode.one('.zoomBoundaryRatio');
zoomBodyRatioNode.addClass('nudging');
var imgWidth = Y.Util.getClassValue(zoomBodyRatioNode, 'imgW');
var imgHeight = Y.Util.getClassValue(zoomBodyRatioNode, 'imgH');
if (imgWidth == '' || imgHeight == '') {
// Most likely haven't got an image loaded into the zoom yet
return;
}
var wrapWidth = zoomBodyNode.get('offsetWidth');
var wrapHeight = zoomBodyNode.get('offsetHeight');
var targetDimensions = getImageDimensionsToFitContainer(imgWidth, imgHeight, wrapWidth, wrapHeight);
// Set ratio container to correct size
zoomBodyRatioNode.setStyles({
'width': targetDimensions.width + 'px',
'height': targetDimensions.height + 'px'
});
zoomBodyRatioNode.removeClass('nudging');
}
// This should look familiar from the photo sizing in Part 2
var getImageDimensionsToFitContainer = function (imgWidth, imgHeight, wrapWidth, wrapHeight) {
var targetImgHeight = imgHeight;
var targetImgWidth = imgWidth;
var verticalScalingFactor = (wrapHeight/imgHeight);
// Scale
if ((imgWidth*verticalScalingFactor) <= wrapWidth) {
// Height is the limiting dimension
targetImgWidth = Math.round(imgWidth * verticalScalingFactor);
targetImgHeight = wrapHeight;
Y.log("Fitting vertically, scale=" + verticalScalingFactor + ". W=" + targetImgWidth + " H=" + targetImgHeight);
}
else if ((imgWidth*verticalScalingFactor) > wrapWidth) {
var horizontalScalingFactor = (wrapWidth/imgWidth);
// Width is the limiting dimension
targetImgWidth = wrapWidth;
targetImgHeight = Math.round(imgHeight * horizontalScalingFactor);
Y.log("Fitting horizontally, scale=" + horizontalScalingFactor + ". W=" + targetImgWidth + " H=" + targetImgHeight);
}
return {
width: targetImgWidth,
height: targetImgHeight
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment