remove jquery conflict

app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/details.phtml

@@ -110,7 +110,13 @@ $customtab_content = $_config->getProductDetail('customtab_content');
     top: 0;
     left: 0;
 }
+
+.flip {
+  transform: rotateY(180deg);
+
+}
 </style>
+
 <script>
 
 var DefVal = 350;
@@ -120,17 +126,19 @@ var positionLabel = 'Image Position';
 //jQuery('span:contains("Image Width")').parent().next('div').children('input').val();
 require([
             'jquery',
-            '//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js'
-        ], function ($) { 
-            
+            'selectareas'
+            //'//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js'
+        ], function (jQuery, selectareas) { 
+            jQuery.noConflict();
 
           if (jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').length && jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').length) {
             //jQuery('body').loader('show');
+            jQuery('label:contains("Flip Image")').first().hide();
             jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div  class="loader"></div></div>');
-            $("body").trigger('processStart');
+            
  function debugQtyAreas (event, id, areas) {
 
-                $.each(areas, function (id, area) {
+                jQuery.each(areas, function (id, area) {
                     console.log('area====',area);                   
                    jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').val('Xpos:'+(area.x).toFixed(2)+' :: Ypos:'+(area.y).toFixed(2));
                 });
@@ -138,16 +146,27 @@ require([
 
  function setPrice(p_w,p_h,t_w,t_h,rate,plugin){
     var final_price = ((Math.ceil(p_w/t_w)*Math.ceil(p_h/t_h))*rate) + plugin;
-    $('.price-final_price').html('<div id="prodPrice" style="font-size: 166.67%;color: #e74c3c;">₹'+final_price+'.00 </div>');
+    jQuery('.price-final_price').html('<div id="prodPrice" style="font-size: 166.67%;color: #e74c3c;">₹'+final_price+'.00 </div>');
  }
 
 
 
 
 //----------------------creating checkbox for tiles------------//
-$(
+jQuery(
 '<div style="height: 30px;width: 100%;position: unset;padding-bottom: 35px;"><input type="checkbox" id="tile_checkbox">&nbsp;Show Tiles</div>'
 ).insertBefore('.product-add-form');
+
+jQuery('label:contains("Flip Image")').first().next('div.control').children('div:nth-child(1)').children().children('input').on('change',function(){
+    if(jQuery(this).is(':checked')){
+       jQuery('img.fotorama__img').parent().addClass('flip');
+    }else{
+       jQuery('img.fotorama__img').parent().removeClass('flip');
+    }
+});
+
+
+
 //-------------------------------------------------------------//
 
 
@@ -160,7 +179,7 @@ jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').v
 jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(DefVal);
 jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').attr('disabled','disabled');
 
-if($('.gallery-placeholder').html('<img src="'+ $('img.fotorama__img').attr('src') +'" class="fotorama__img"/>')){
+if(jQuery('.gallery-placeholder').html('<div><img src="'+ jQuery('img.fotorama__img').attr('src') +'" class="fotorama__img"/></div>')){
 
 
 var tt = jQuery('img.fotorama__img').selectAreas({
@@ -216,11 +235,11 @@ function setChangeArea(){
 
             tt.selectAreas('reset');
             jQuery('img.fotorama__img').selectAreas('add', areaOptions);
-            $('.select-areas-resize-handler').remove();
-            $('.delete-area').remove();
-            $('#tile_checkbox').prop('checked', false);
+            jQuery('.select-areas-resize-handler').remove();
+            jQuery('.delete-area').remove();
+            jQuery('#tile_checkbox').prop('checked', false);
             setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,0);
-            $('.admin__control-radio').each(function(){$(this).prop('checked', false)});
+            jQuery('.admin__control-radio').each(function(){jQuery(this).prop('checked', false)});
     };
   //--------------------------hiding price span--------------------//
             jQuery('.price-notice').hide();
@@ -229,10 +248,10 @@ function setChangeArea(){
             jQuery('.fotorama__img').parent().css('top','25px');
  //------------------------- hiding price span--------------------//
  //----------------------appending price update on material options----------//
- $('.admin__control-radio').each(function(){$(this).change(
+ jQuery('.admin__control-radio').each(function(){jQuery(this).change(
      function(){
-        console.log('price==',$(this).attr('price'));
-        setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt($(this).attr('price')));
+        console.log('price==',jQuery(this).attr('price'));
+        setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt(jQuery(this).attr('price')));
       });
   });
  //--------------------------------------------------------------------------//
@@ -243,12 +262,12 @@ setTimeout(function(){
     jQuery(jQuery('span:contains('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
   
 
-$('.select-areas-resize-handler').remove();
-$('.delete-area').remove();
+jQuery('.select-areas-resize-handler').remove();
+jQuery('.delete-area').remove();
 //------------------creating tiles here---------------------------//
 
-$('#tile_checkbox').on('change',function(){
-    if($(this).is(':checked')){
+jQuery('#tile_checkbox').on('change',function(){
+    if(jQuery(this).is(':checked')){
     var htm = '<div style="background:white;color:white;"><ul>';
     var kk=0;
 
@@ -273,9 +292,9 @@ $('#tile_checkbox').on('change',function(){
            kk +=Math.round((wdPer/100)*wdc);         
         }
         htm += '</ul></div>';
-        $('.select-areas-background-area').html(htm);
+        jQuery('.select-areas-background-area').html(htm);
     }else{
-        $('.select-areas-background-area').html(' ');
+        jQuery('.select-areas-background-area').html(' ');
     }
 });
 
@@ -284,7 +303,7 @@ $('#tile_checkbox').on('change',function(){
 
 
 jQuery('#preloader').remove();
-      }, 4000);
+      }, 2000);
 
 
    
@@ -294,6 +313,7 @@ jQuery('#preloader').remove();
 
     });
 </script>
+
 <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?>
     <div class="product info detailed">
         <?php $layout = $block->getLayout(); ?>

pub/static/frontend/Sm/shop4u/en_US/js/darkroom.css

+.darkroom-container{position:relative}.darkroom-image-container{top:0;left:0}.darkroom-toolbar{display:block;position:absolute;top:-45px;left:0;background:#444;height:40px;min-width:40px;z-index:99;border-radius:2px;white-space:nowrap;padding:0 5px}.darkroom-toolbar:before{content:"";position:absolute;bottom:-7px;left:20px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #444}.darkroom-button-group{display:inline-block;margin:0;padding:0}.darkroom-button-group:last-child{border-right:none}.darkroom-button{box-sizing:border-box;background:transparent;border:none;outline:none;padding:2px 0 0 0;width:40px;height:40px}.darkroom-button:hover{cursor:pointer;background:#555}.darkroom-button:active{cursor:pointer;background:#333}.darkroom-button:disabled .darkroom-icon{fill:#666}.darkroom-button:disabled:hover{cursor:default;background:transparent}.darkroom-button.darkroom-button-active .darkroom-icon{fill:#33b5e5}.darkroom-button.darkroom-button-hidden{display:none}.darkroom-button.darkroom-button-success .darkroom-icon{fill:#99cc00}.darkroom-button.darkroom-button-warning .darkroom-icon{fill:#FFBB33}.darkroom-button.darkroom-button-danger .darkroom-icon{fill:#FF4444}.darkroom-icon{width:24px;height:24px;fill:#fff}

pub/static/frontend/Sm/shop4u/en_US/requirejs-config.js

@@ -30,11 +30,19 @@ var config = {
             'popupWindow':            'mage/popup-window',
             'validation':             'mage/validation/validation',
             'welcome':                'Magento_Theme/js/view/welcome',
-            'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs'
+            'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs',
+            // 'selectareas': 'jquery/selectareas'
+
         }
     },
     paths: {
-        'jquery/ui': 'jquery/jquery-ui'
+        'jquery/ui': 'jquery/jquery-ui',
+        'selectareas': 'jquery/selectareas'
+    },
+    shim: {
+        'selectareas': {
+            deps: ['jquery']
+        }
     },
     deps: [
         'jquery/jquery.mobile.custom',