JSイメージはfullPage.jsと互換性があります

Question

このコードを統合しようとしています：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(); 

を、私はこの第二を使用していますjavacript 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は表示されません。

最初のJSコードをfullpage.jsのウェブサイトに挿入することができました：http://codepen.io/babybackart/pen/ONrbENしかし、私は本当に2番目のJSコードを挿入することはできません。

私は実際にはJSコーダーではないので、fullpage.jsでこれを行うことができ、両方のコード間に矛盾があった場合は、このコードを挿入するために何をする必要があるか知りたかったのです。

ありがとうございました！

Answer 1

第JSコードはこのようなフルページイベントに挿入されなければならない：

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

      calculateImageDimension(); 
     } 
    }); 
});