Slideshow Script Centering Issue on Images of Varying Width

Question

I'm trying to build a slideshow script will work with images of any width. Not too surprisingly, I'm having some centering issues that cause the portrait mode images to start off on the left when they initially display and then immediately move to the center after a short delay (giving it a bit of a "shooting ducks at a carnival" feel) .

I think that the solution is to get the image width right before it displays and then use that to center it, but I've been having some trouble finding reliable code that does that correctly. I've seen some examples that get the dimensions on load, but since the page (obviously) only loads once before the slideshow starts, that doesn't help much. I put it into CodePen for anyone to view that is kind enough to try and assist me:

http://codepen.io/Realto619/pen/fhdwK

I'm also having a problem with the getPrev() and getNext() functions not working on the first click, They work fine after that, and they seem to be firing on those first clicks, but they don't do what they're designed to until the second click.

Thanks in advance...

Answer 1

As I suspected, the problem was due to the image dimensions / image container not changing for each slide, so the css couldn't center it without having an accurate width for margin:0 auto; to work properly.

I created the following function and then called it in each of the other functions:

function getDim() {
  iW = $(window).innerWidth();
  iH = $(window).innerHeight();
  natW = $(".fadein img").get(0).naturalWidth; 
  natH = $(".fadein img").get(0).naturalHeight;
  natR = natW/natH; 
  adjH = iH*0.98; 
  adjW = adjH * natR;
  $(".fadein").css('width',adjW);
  $(".fadein img").css('width',adjW);
  $(".fadein img").css('height',adjH);
}

Hopefully this will help someone else with a similar issue that comes here.