JS图像调整大小与fullPage.js兼容 [英] JS image resize compatible with fullPage.js

问题描述

我正在尝试集成以下代码： http://codepen.io/babybackart/pen/GZPjJd 使用fullpage.js在网站的一部分上。

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

此代码基于@ Seika85出色回答的先前问题：使.div像图片一样。
的目的是包含并调整容器 .plancheBox上的图像的大小，而不对其进行剪切。

在此示例中，猫图片的尺寸由容器使用以下第一个JavaScript代码驱动：

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

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

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

在第一个示例中可以看到，它不需要fullpage.js。

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

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

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.

我不是实际上是一个JS编码器，所以我想知道我需要做些什么来插入此代码，如果有可能用fullpage.js进行插入，以及两个代码之间是否存在冲突。

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.

谢谢您的回答！

推荐答案

第二个JS代码必须插入到fullPage事件中，如下所示：

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

这篇关于JS图像调整大小与fullPage.js兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！