JS image resize compatible with fullPage.js

问题

I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js.

This code is based on a previous question brilliantly answered by @Seika85 : Make a .div act like an image. The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it.

In this example, the cat picture's dimensions are driven by the container using this first javascript code:

var calculateImageDimension = function() {

  $('.plancheBox img').each(function() {

    var $img = $(this),
      $plancheBox = $img.closest('.plancheBox');

    $img.css({
      'max-height': $plancheBox.height() + 2,
      /* (+2px) prevent thin margins due to rendering */
      'max-width': $plancheBox.width()
    });

    $img.closest('.container').css({
      'position': 'relative'
    });

  });
}

calculateImageDimension();

In order to set these dimensions instantaneously (without a page refresh), I am using this second javascript code:

var resizeEnd;
$(window).on('resize', function() {
  clearTimeout(resizeEnd);
  resizeEnd = setTimeout(function() {
    $(window).trigger('resize-end');
  }, 200);
});

$(window).on('resize-end', function() {

  $('.plancheBox img').css({
    'max-height': 'none',
    'max-width': 'none'
  })
  $('.plancheBox .container').css({
    'position': ''
  });

  calculateImageDimension();
});

As you can see in the first example, it works without fullpage.js.

I managed to insert the first JS code in a fullpage.js website : http://codepen.io/babybackart/pen/ONrbEN but I don't really manage to insert the second one.

I'm not actually a JS coder so I wanted to know what I needed to do to insert this code, if it was possible to do this with fullpage.js and if there were any conflict between both codes.

Thank you for your answer !

回答1:

The second JS code must be inserted in a fullPage event like this:

$(document).ready(function() {
    $('#fullpage').fullpage({
        //events
        afterResize: function(){
            $('.plancheBox img').css({
            'max-height' : 'none',
            'max-width'  : 'none'
          })
          $('.plancheBox .conteneur').css({'position' : ''});

          calculateImageDimension();
        }
    });
});

来源：https://stackoverflow.com/questions/37034518/js-image-resize-compatible-with-fullpage-js

标签

javascript

compatibility

fullpage.js