Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save LinzardMac/c20d2696eda93f8137255e24f70fef6b to your computer and use it in GitHub Desktop.
Save LinzardMac/c20d2696eda93f8137255e24f70fef6b to your computer and use it in GitHub Desktop.
var windowWidth = jQuery(window).innerWidth(),
// Get the width of the slider space
containerWidth = jQuery('#slideContainment').width(),
// Get the height of the slider space
containerHeight = jQuery('.variable-width').height(),
// rename function arguments (actual image dimensions) for clarity
imageWidth = width,
imageHeight = height;
// Padded height calculated to account for additional of social media links
paddedHeight = containerHeight - 50;
/*
* Resizing their css so that they are the right aspect ratio to hold their place.
*/
// If the image is landscape
if(imageWidth >= imageHeight){
obj.css('width', containerWidth, 'important');
obj.css('height', 'auto', 'important');
// calculate the forced image dimensions based on new CSS rules
var newImageHeight = obj.height(),
newImageWidth = obj.width();
// if the image's forced height is taller than it's container AFTER the above CSS rules are applied
// this is where I have an issue with very panoramic images.
if(newImageHeight >= containerHeight -50 ){
// Reapply CSS that will define the height in pixels and auto-set the width
obj.css('width', 'auto', 'important');
obj.css('height', paddedHeight, 'important');
}
obj.parent('.item').css('width', 'auto');
var ah = obj.height();
var ph = obj.parent().height();
var mh = Math.ceil((ph - ah) / 2);
//console.log(jQuery(this));
//console.log(jQuery(this).height());
// console.log( ah + '-' + ph + '=' + mh);
if (mh > 0) {
obj.css('margin-top', mh);
} else {
obj.css('margin-top', 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment