Skip to content

Instantly share code, notes, and snippets.

@balazimichal
Last active December 25, 2017 20:37
Show Gist options
  • Save balazimichal/0894fce3ab0ac5f42d755e47dd4274a5 to your computer and use it in GitHub Desktop.
Save balazimichal/0894fce3ab0ac5f42d755e47dd4274a5 to your computer and use it in GitHub Desktop.
jQuery image positioning after css rotation
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