JS 图像大小调整与 fullPage.js 兼容答案

【问题标题】：JS image resize compatible with fullPage.jsJS 图像大小调整与 fullPage.js 兼容
【发布时间】：2016-05-04 17:39:59
【问题描述】：

我正在尝试将此代码：http://codepen.io/babybackart/pen/GZPjJd 集成到使用 fullpage.js 的网站部分中。

此代码基于 @Seika85 出色回答的先前问题：Make a .div act like an image。目的是“包含”并调整其容器“.plancheBox”上的图像而不剪切它。

在本例中，猫图片的尺寸由容器使用第一个 javascript 代码驱动：

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();

为了即时设置这些尺寸（无需刷新页面），我正在使用第二个 javascript 代码：

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();
});

正如您在第一个示例中看到的，它可以在没有 fullpage.js 的情况下工作。

我设法在 fullpage.js 网站中插入了第一个 JS 代码：http://codepen.io/babybackart/pen/ONrbEN，但我并没有真正设法插入第二个。

我实际上不是 JS 编码器，所以我想知道插入此代码需要做什么，是否可以使用 fullpage.js 执行此操作，以及两个代码之间是否存在任何冲突。

感谢您的回答！

【问题讨论】：

标签： javascript compatibility fullpage.js

【解决方案1】：

第二个 JS 代码必须像这样插入到 fullPage 事件中：

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

          calculateImageDimension();
        }
    });
});

【讨论】：