Last active
December 25, 2017 20:37
-
-
Save balazimichal/0894fce3ab0ac5f42d755e47dd4274a5 to your computer and use it in GitHub Desktop.
jQuery image positioning after css rotation
This file contains 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
var $img = $('.imagerotate img'); | |
$img.on('load', function(){ | |
var item_width = $(".pingster-gallery-item-image").width(); | |
var image_width = $(".imagerotate img").width(); | |
var image_height = $(".imagerotate img").height(); | |
var scale = image_width / image_height; | |
var image_rotated_height = item_width * scale; | |
var correct_position = (image_width - image_height) * scale + 1; | |
$(".imagerotate img").height(item_width); | |
$(".imagerotate").width(image_rotated_height); | |
$(".imagerotate img").width(image_rotated_height); | |
$(".imagerotate").height(image_rotated_height); | |
$(".imagerotate img").css('position','relative').css('bottom', -Math.abs(correct_position)); | |
console.log('frame width: ' + item_width); | |
console.log('image width: ' + image_width); | |
console.log('image height: ' + image_height); | |
console.log('scale: ' + scale); | |
console.log('image height after rotation: ' + image_rotated_height); | |
console.log('correct position: ' + correct_position); | |
console.log('memory usage:' + memorySizeOf(window.performance.memory)); | |
}); | |
// FUNCTIONS ON RESIZE | |
jQuery( window ).resize(function() { | |
rotate_images(); | |
}); | |
// ROTATE IMAGES ON HOME PAGE | |
function rotate_images() { | |
var iw = jQuery('.pingster-gallery-item').width(); | |
var ih = jQuery('.pingster-gallery-item').height(); | |
jQuery(".pingster-gallery-item-image img.portrait").css({'transform': 'rotate(+90deg)','height' : iw}); | |
} | |
rotate_images(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment