Skip to content

Instantly share code, notes, and snippets.

@albertpak
Created August 8, 2013 21:12
Show Gist options
  • Select an option

  • Save albertpak/6188793 to your computer and use it in GitHub Desktop.

Select an option

Save albertpak/6188793 to your computer and use it in GitHub Desktop.
jQuery(window).ready(slideshowResize);
jQuery(window).resize(slideshowResize);
//function to resize and center images and slideshow
function slideshowResize() {
//SET CUSTOM VARIABLES
//set ratio value by dividing the images width by it height
//* I usually round this to 2 decmials
var imageRatio = "1.75";
//set containerName equal to the div containing the image or slideshow function will use this div to set height and width so use 100% width or height for responsive demensions
var containerName = ".slideshow";
//imageClass needs to specifcally target the actual image to center it properly in the container
var imageClass = "li.slides img";
//create variables equal to containers heigh and width
var ssWidth = jQuery(containerName).width();
var ssHeight = jQuery(containerName).height();
// creates width and height based on ratio and round off decimals
var nWidth = (ssHeight * imageRatio).toFixed(0);
var nHeight = (ssWidth / imageRatio).toFixed(0);
//set img height and width based on screen size and ratio
if (nWidth < ssWidth) {
var fnWidth = ssWidth;
var fnHeight = nHeight;
} else {
var fnWidth = nWidth;
var fnHeight = ssHeight;
}
//set images width and height
jQuery(".jw-slideshow img.slideImage").width(fnWidth).height(fnHeight);
// centers images horizontally and vertically
jQuery(imageClass).css("left", -((fnWidth - ssWidth) / 2)).css("top", -((fnHeight - ssHeight) / 2));
//MINIFIED FUNCTION
//var imageRatio="1.75",containerName=".slideshow",imageClass="li.slides img",ssWidth=jQuery(containerName).width(),ssHeight=jQuery(containerName).height(),nWidth=(ssHeight*imageRatio).toFixed(0),nHeight=(ssWidth/imageRatio).toFixed(0);if(ssWidth>nWidth)var fnWidth=ssWidth,fnHeight=nHeight;else var fnWidth=nWidth,fnHeight=ssHeight;jQuery(".jw-slideshow img.slideImage").width(fnWidth).height(fnHeight),jQuery(imageClass).css("left",-((fnWidth-ssWidth)/2)).css("top",-((fnHeight-ssHeight)/2));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment