test pinch zoom

Hemisphere-Project · Jul 15, 2021 · eaf5f29 · eaf5f29
1 parent 2070702
commit eaf5f29
Show file tree

Hide file tree

Showing 3 changed files with 579 additions and 51 deletions.
diff --git a/WebApps/S6-MULTIPLAYER/index.html b/WebApps/S6-MULTIPLAYER/index.html
@@ -16,6 +16,9 @@
     <script src="/assets/libs/hammer.min.js"></script>
     <script src="/assets/libs/jquery.hammer.js"></script>
 
+    <script src="/assets/libs/pinch-zoom.js"></script>
+    <!-- https://github.com/GoogleChromeLabs/pinch-zoom -->
+
     <!-- STYLE -->
     <link rel="stylesheet" href="/assets/common.css" />
     <link rel="stylesheet" href="/style.css" />
@@ -87,11 +90,11 @@
       <div class="btn" id="btn_close_gallery"> <img src="/assets/img/retour.png" alt=""> </div>
       <div class="btn" id="btn_next"> <img src="/assets/img/next.png" alt=""> </div>
       <div class="gallery">
-        <div class="gallery_item">
-          <img src="/medias/S6/fileries/1 Tranche Ligne Ariane HT.jpg">
+        <div class="gallery_item pinch-zoom">
+          <pinch-zoom><img src="/medias/S6/fileries/1 Tranche Ligne Ariane HT.jpg"></pinch-zoom>
           <div class="legend text_small">Tranche Ligne Ariane HT</div>
         </div>
-        <div class="gallery_item">
+        <div id="mypinchzoom"class="gallery_item">
           <img src="/medias/S6/fileries/2 Tranche ligne Ariane HT.jpg">
           <div class="legend text_small">Tranche ligne Ariane HT</div>
         </div>

diff --git a/WebApps/S6-MULTIPLAYER/script.js b/WebApps/S6-MULTIPLAYER/script.js
@@ -130,7 +130,7 @@ function gotoIndex(index){
     $('.gallery_item:nth-child('+index+')').addClass('active');
     $('.gallery_item:nth-child('+index+')').fadeIn(200);
 
-    attachPinch(indexDisplay);
+    // attachPinch(indexDisplay);
   })
 }
 
@@ -145,66 +145,86 @@ $('#page_gallery_list .list_item').click(function(){
   $('.gallery_item:nth-child('+indexDisplay+')').addClass('active');
   $('.gallery_item:nth-child('+indexDisplay+')').fadeIn(200);
 
-  attachPinch(indexDisplay);
+  // attachPinch(indexDisplay);
 })
 
 
-//////////////// PINCH ZOOM ////////////////
-
-// inspired from
-// https://stackoverflow.com/questions/10802176/pinch-to-zoom-with-css3
-// -- ?
-
-// var hammertime = new Hammer($('body')[0]);
-// hammertime.get('pinch').set({ enable: true });
-// hammertime.on("pinch", function(e) { });
-
-// RESET PINCH
 
-function attachPinch(indexDisplay){
 
+//////////////// PINCH-ZOOM ////////////////
 
-  var wrapper = $('.gallery_item:nth-child('+indexDisplay+')')
-  var image = $(wrapper).children('img')
+const pinchZoom = $('#mypinchzoom')[0];
 
-  var  width = image.width();
-  var  height = image.height();
-  console.log(width);
-  var  newX = 0;
-  var  newY = 0;
-  var  offset = wrapper.offset();
+// pinchZoom.setTransform({
+//   scale: 1,
+//   x: 0,
+//   y: 0,
+//   // Fire a 'change' event if values are different to current values
+//   allowChangeEvent: false,
+// });
 
-  // ENABLE PINCH
-  var hammerObj1 = new Hammer($(wrapper)[0]);
-  hammerObj1.get('pinch').set({ enable: true });
-  $(wrapper).data("hammer", hammerObj1);
-  // ENABLE PINCH
-  var hammerObj2 = new Hammer($(image)[0]);
-  hammerObj2.get('pinch').set({ enable: true });
-  $(image).data("hammer", hammerObj2);
 
 
-  $(image).hammer().on("pinch", function(event) {
-    console.log('pinching');
-    var photo = $(this);
 
-    newWidth = photo.width() * event.gesture.scale;
-    newHeight = photo.height() * event.gesture.scale;
 
-    // Convert from screen to image coordinates
-    var x;
-    var y;
-    x -= offset.left + newX;
-    y -= offset.top + newY;
+//////////////// PINCH ZOOM ////////////////
 
-    newX += -x * (newWidth - width) / newWidth;
-    newY += -y * (newHeight - height) / newHeight;
+// inspired from
+// https://stackoverflow.com/questions/10802176/pinch-to-zoom-with-css3
+// -- ?
 
-    photo.css('-webkit-transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");
-    wrapper.css('-webkit-transform', "translate3d("+newX+"px, "+newY+"px, 0)");
+// var hammertime = new Hammer($('body')[0]);
+// hammertime.get('pinch').set({ enable: true });
+// hammertime.on("pinch", function(e) { });
 
-    width = newWidth;
-    height = newHeight;
-  });
+// TO DO
+// PINCH AND MOVE
+// RESET PINCH
 
-}
+// function attachPinch(indexDisplay){
+//
+//
+//   var wrapper = $('.gallery_item:nth-child('+indexDisplay+')')
+//   var image = $(wrapper).children('img')
+//
+//   var  width = image.width();
+//   var  height = image.height();
+//   console.log(width);
+//   var  newX = 0;
+//   var  newY = 0;
+//   var  offset = wrapper.offset();
+//
+//   // ENABLE PINCH
+//   // var hammerObj1 = new Hammer($(wrapper)[0]);
+//   // hammerObj1.get('pinch').set({ enable: true });
+//   // $(wrapper).data("hammer", hammerObj1);
+//   // ENABLE PINCH
+//   var hammerObj2 = new Hammer($(image)[0]);
+//   hammerObj2.get('pinch').set({ enable: true });
+//   $(image).data("hammer", hammerObj2);
+//
+//
+//   $(image).hammer().on("pinch", function(event) {
+//     console.log('pinching');
+//     var photo = $(this);
+//
+//     newWidth = photo.width() * event.gesture.scale;
+//     newHeight = photo.height() * event.gesture.scale;
+//
+//     // Convert from screen to image coordinates
+//     var x;
+//     var y;
+//     x -= offset.left + newX;
+//     y -= offset.top + newY;
+//
+//     newX += -x * (newWidth - width) / newWidth;
+//     newY += -y * (newHeight - height) / newHeight;
+//
+//     photo.css('-webkit-transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");
+//     wrapper.css('-webkit-transform', "translate3d("+newX+"px, "+newY+"px, 0)");
+//
+//     width = newWidth;
+//     height = newHeight;
+//   });
+//
+// }