wip #2747 @7

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index b007235572e18ee330bc694ee2a0cb0482cec58a..6aaecf6a980a3bae9a8d66af8484d948528a601c 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -60,7 +60,7 @@
                 </div>
                 <div class="column slide-content overlap-bottom relative">
                 <div class="slide-mask">
-                    <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
+                    <div class="bg-image h-full bg-cover bg-no-repeat slide-img ">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
                         <img class="img-slider" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
                         <!--</div>-->

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 056788bc41072c77fd900e138fa19b8306872fcc..5c4505372eefacd29a6705213c015cbe90b5c9f1 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -13,47 +13,57 @@ let getImg = new Image();
 let img = document.getElementsByClassName('.img-slider'),
     imgHeight = getImg.naturalHeight,
     imgWidth = getImg.naturalWidth;
+    // console.log('valeur initial img => '+imgWidth,imgHeight);
 
-let width = $('.slide-img').width(),
-    height = $('.slide-img').height(),
+let width = $('.slide-img').width(), // --> clip container width
+    height = $('.slide-img').height(), // --> clip container height
     init = 'rect(0px ',
     final = 'px 0px)';
 
-    // $(".slide-img").css('clip', 'rect(0px, '+width +'px,'+height +' px, 0px)');
-    console.log('SANS resize '+width,height);
-
-$('.img-slider').each(function () {
-    getImg = $(this).attr("src");
-    console.log(getImg);
-
-    let widthFactor= width / imgWidth,  // coef multiplicateur width
-        heightFactor=  height / imgHeight ; // coef multiplicateur height
-
-    console.log(widthFactor,heightFactor);
-    $(this).css({'width':imgWidth*Math.max(widthFactor, heightFactor), 'height':imgHeight*Math.max(widthFactor, heightFactor)});
-
-});
+resize();
 
 $(window).on('orientationchange',function () {
     resize();
     setTimeout(function () {
         resize();
-    },1000);
+    },500);
 });
 $(window).on('resize',function () {
     resize();
 });
-resize();
 
 // // RESIZE
 function resize() {
+    $('.img-slider').each(function () {
+        let width = $('.slide-img').eq(index).width(), // -->
+            height = $('.slide-img').eq(index).height();
+
+        let naturalHeight = $(this).prop('naturalHeight'),
+            naturalWidth = $(this).prop('naturalWidth');
+
+        let getAllImg = new Image();
+            getAllImg.src = $(this).attr("src");
+
+        console.log(getAllImg); // --> return toutes les img avec leur attributs src
 
-    let width = $('.slide-img').eq(index).width(),
-        height = $('.slide-img').eq(index).height();
+        console.log('img natural values: '+naturalWidth,naturalHeight);
 
-    console.log(width, height);
-    // $('.slide-img').css({'width': width ,'height':height});
+        let widthFactor = width / naturalWidth,  // coef multiplicateur width
+            heightFactor =  height / naturalHeight ; // coef multiplicateur height
 
+        TweenMax.set($(this),{width:naturalWidth*Math.max(widthFactor, heightFactor), height:naturalHeight*Math.max(widthFactor, heightFactor)});
+
+        // console.log('valeurs des facteurs de multiplication: '+widthFactor,heightFactor);
+    });
+
+    $('.slide-img').each(function () {
+        let width = $(this).width(), // --> container width (clip container)
+            height = $(this).height(); // --> container height (clip container)
+
+        TweenMax.set($(this),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+
+        console.log('container --> '+ width,height);
+    });
 }
 
 function GotoSlide(nextindex, direction){
@@ -72,13 +82,12 @@ function GotoSlide(nextindex, direction){
          nextContainerImg = $('.slide-img').eq(nextindex);
 
         console.log(nextindex, direction);
-        TweenMax.set('.slide-img',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+        TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
     let tl = new TimelineMax({onComplete: isSlideRunning});
     tl.set(currentSlideIndex,{zIndex: 97});
     tl.set(nextText,{opacity:1,x:0});
     tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
-
     tl.to(currentContainerImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
 
     tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
@@ -112,6 +121,7 @@ function GotoSlide(nextindex, direction){
 }
 
 $('.arrow').on('click',function () {
+    resize();
     if($(this).is('.next')){
         direction = 1;
     }
@@ -120,4 +130,4 @@ $('.arrow').on('click',function () {
     }
     let nextindex = (index +direction + slideLength)% slideLength;
     GotoSlide(nextindex,direction);
-});
+});
\ No newline at end of file