Created
November 23, 2017 21:32
-
-
Save pekka/7314de3fbf7a2beeacec00d763e3c9e7 to your computer and use it in GitHub Desktop.
Fancybox "scale to cover 100% width" function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Scale image to cover X | |
// =========================================== | |
scaleToCoverX : function( x, y, duration ) { | |
var self = this; | |
var current = self.current; | |
var $what = current.$content; | |
var imgPos, posX, posY, scaleX, scaleY; | |
var canvasWidth = parseInt( current.$slide.width(), 10 ); | |
var canvasHeight = parseInt( current.$slide.height(), 10 ); | |
var newImgWidth = current.width; | |
var newImgHeight = current.height; | |
newImgWidth = canvasWidth; | |
newImgHeight = current.height * (canvasWidth/current.width); | |
if ( !( current.type == 'image' && !current.hasError) || !$what || self.isAnimating) { | |
return; | |
} | |
$.fancybox.stop( $what ); | |
self.isAnimating = true; | |
x = x === undefined ? canvasWidth * 0.5 : x; | |
y = y === undefined ? canvasHeight * 0.5 : y; | |
imgPos = $.fancybox.getTranslate( $what ); | |
scaleX = newImgWidth / imgPos.width; | |
scaleY = newImgHeight / imgPos.height; | |
// Get center position for original image | |
posX = ( canvasWidth * 0.5 - newImgWidth * 0.5 ); | |
posY = ( canvasHeight * 0.5 - newImgHeight * 0.5 ); | |
// Make sure image does not move away from edges | |
if ( newImgWidth > canvasWidth ) { | |
posX = imgPos.left * scaleX - ( ( x * scaleX ) - x ); | |
if ( posX > 0 ) { | |
posX = 0; | |
} | |
if ( posX < canvasWidth - newImgWidth ) { | |
posX = canvasWidth - newImgWidth; | |
} | |
} | |
if ( newImgHeight > canvasHeight) { | |
posY = imgPos.top * scaleY - ( ( y * scaleY ) - y ); | |
if ( posY > 0 ) { | |
posY = 0; | |
} | |
if ( posY < canvasHeight - newImgHeight ) { | |
posY = canvasHeight - newImgHeight; | |
} | |
} | |
self.updateCursor( newImgWidth, newImgHeight ); | |
$.fancybox.animate( $what, { | |
top : posY, | |
left : posX, | |
scaleX : scaleX, | |
scaleY : scaleY | |
}, duration || 0, function() { | |
self.isAnimating = false; | |
}); | |
// Stop slideshow | |
if ( self.SlideShow && self.SlideShow.isActive ) { | |
self.SlideShow.stop(); | |
} | |
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment