0

I found a similar problem to mine in this question and I really like the solution that was given.

I'm trying to replicate this look on this page but I'm having problems.

It's looking 70% OK but I'm still having a problem getting the current/active image to be centred and the portrait images are not in their correct aspect ratio/height.

FYI - The portrait images have a max height of 664px with varying width.

Can anyone help point me in the write direction?

Many thanks in advance!

Community
  • 1
  • 1
pjoyce
  • 1

1 Answers1

0

Give this a try:

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery(window).resize(function(){
     var vpw = jQuery(".flex-viewport").width();
     var imw = jQuery(".flex-viewport img:first").width();
     if(vpw>imw){
       var delay = (vpw-imw)/2;
       jQuery(".flex-viewport ul").css("padding-left",delay+"px");
     }else jQuery(".flex-viewport ul").css("padding-left","0px");
   });
});
</script>

This will calculate a padding-left on the UL to compensate and center the active image, it will calculate it only when the flex-viewport is bigger than the max image resolution otherwise it will work as expected...

hyunkeln
  • 429
  • 2
  • 9