How to Disable Magnifying Effect in Virtuemart?

Hello,

How do you disable the magnifying effect in the storefront template for virtuemart? I'm using Joomla 3, VM3 and the URL link is http://www.now-i-know-why.com/index.php/buy-book. I have been searching, but can not locate any solutions to input into the override.css file. Your help will be greatly appreciated!

RJ

It's not a css but javascript. You need to edit this file:
templates/gk_storefront/html/com_virtuemart/productdetails/default.php
and remove entire magic zoom functionality:

Code: Select all

    // Magic zoom selectors
   var main_image = false;
   var main_image_thumbnail = false;
   var product_details = false;
   
   if(jQuery('.main-image').length > 0) {
      main_image = jQuery('.main-image');
      main_image_thumbnail = jQuery('.main-image > a');
      product_details = jQuery('.productDetails');
   }
   
   if(jQuery('.hikashop_product_main_image_subdiv').length > 0) {
      main_image = jQuery('.hikashop_product_main_image_subdiv');
      main_image_thumbnail = jQuery('.hikashop_product_main_image_subdiv > a');
      product_details = jQuery('.productDetails');
   }
   
   if(main_image.length > 0) {
      // Add data-full-img update to the child images
      if(jQuery(document).find('img.hikashop_child_image').length) {
         jQuery(document).find('img.hikashop_child_image').each(function(i, img) {
            jQuery(img).mouseover(function() {
               jQuery('#hikashop_main_image').attr('data-full-img', jQuery(img).attr('data-full-img'));
            });
         });
      }
   
      var thumbnail = main_image_thumbnail;
      var gkZoom =  jQuery('<div/>', { id: 'gkZoom'});
      
      var gkPreview = jQuery('<div/>', { id: 'gkPreview'});
      gkPreview.css({'left': '-99999px'});
      img_src = thumbnail.find('img').attr('src');
                  
      if(thumbnail.find('img').attr('data-full-img')) {
         img_src = thumbnail.find('img').attr('data-full-img');
      }
      var gkPreviewSrc = jQuery('<img/>', { src: img_src });
      
      if(jQuery('body').width() > jQuery('body').data('tablet-width')) {
         var gkZoomWidth = parseInt(jQuery('body').data('zoom-size'), 10);
         var gkZoomHeight = parseInt(jQuery('body').data('zoom-size'), 10);
      } else {
         var gkZoomWidth = thumbnail.width()/3;
         var gkZoomHeight = thumbnail.width()/3;
         var prevSize = product_details.width()/2-20;
         gkPreview.css({'width': prevSize, 'height' : prevSize});
      }
      
      gkZoom.appendTo(thumbnail);
      gkPreview.appendTo(jQuery('body'));
      gkPreviewSrc.appendTo(gkPreview);
      
      gkZoom = jQuery('#gkZoom');
      gkZoom.css({'width': gkZoomWidth, 'height': gkZoomHeight});
      
      var scale = gkPreview.width()/gkZoomWidth;
   
      var offset = {};
      var touch = {};
      var thumb = {};
      
      if(jQuery('body').width() > jQuery('body').data('tablet-width')) {
         thumbnail.bind({
            mouseenter: function(){
                gkPreviewSrc.attr('src',thumbnail.find('img').attr('src'));
               
                if(thumbnail.find('img').attr('data-full-img')) {
                   gkPreviewSrc.attr('src', thumbnail.find('img').attr('data-full-img'));
                }
               
                gkPreviewSrc.css({'width': scale*thumbnail.width(), 'height': scale*thumbnail.height()});
                gkPreview.addClass('active');
                gkZoom = jQuery('#gkZoom');
                gkZoom.addClass('active');
                gkPreview.css({'left': thumbnail.offset().left+thumbnail.width()+20, 'top': thumbnail.offset().top});
            },
            mousemove: function(e){
               //
               offset.x = (e.pageX - jQuery(this).offset().left)-gkZoomWidth/2;
               offset.y = (e.pageY - jQuery(this).offset().top)-gkZoomHeight/2;
            
               // validation
               if(offset.x < 0) offset.x = 0;
               if(offset.y < 0) offset.y = 0;
               if(offset.x > thumbnail.width()-gkZoomWidth) offset.x = thumbnail.width()-gkZoomWidth;
               if(offset.y > thumbnail.height()-gkZoomHeight) offset.y = thumbnail.height()-gkZoomHeight-3;
               
            
               gkZoom.css({'left' : offset.x, 'top' : offset.y});
               offset.bx = offset.x*scale;
               offset.by = offset.y*scale+6;
               // validation
               if(offset.bx < 0) { offset.bx = 0; }
               if(offset.by < 0) { offset.by = 0; }
               if(offset.bx > gkPreviewSrc.width()-gkZoomWidth*scale+12*scale) offset.bx = gkPreviewSrc.width()-gkPreview.width();
               if(offset.by > gkPreviewSrc.height()-gkZoomHeight*scale+12*scale) offset.by = gkPreviewSrc.height()-gkPreview.height();
               gkPreviewSrc.css({'right': offset.bx, 'bottom' : offset.by});
            },
            mouseleave: function() {
               gkPreview.removeClass('active');
               gkZoom.removeClass('active');
            }
         });
      } else if(jQuery('body').data('tablet-width') > jQuery('body').width() && jQuery('body').width() > jQuery('body').data('mobile-width')) {
         thumbnail.bind('touchstart', function(e) {
            e.preventDefault();
            e.stopPropagation();
            gkPreviewSrc.attr('src', thumbnail.find('img').attr('src'));
            
            if(thumbnail.find('img').attr('data-full-img')) {
               gkPreviewSrc.attr('src', thumbnail.find('img').attr('data-full-img'));
            }
            
            var scale = gkPreview.width()/gkZoomWidth;
            gkPreviewSrc.css({'width': scale*thumbnail.width(), 'height': scale*thumbnail.height()});
            gkPreview.addClass('active');
            gkPreview.css({'left': thumbnail.offset().left+thumbnail.width()+20, 'top': thumbnail.offset().top});
            gkZoom.addClass('active');
         });
         
         thumbnail.bind('touchmove', function(e) {
            thumb.x = thumbnail.offset().left;
            thumb.y = thumbnail.offset().top;
            
            
            
            var touches = e.originalEvent.changedTouches || e.originalEvent.touches;
            
            touch.x = touches[0].pageX;
            touch.y = touches[0].pageY;

            //
            if(touch.x > thumb.x && touch.x < thumb.x+thumbnail.width() && touch.y > thumb.y && touch.y < thumb.y+thumbnail.height()) {
               e.preventDefault();
               offset.x = (touch.x - thumb.x)-gkZoomWidth/2;
               offset.y = (touch.y - thumb.y)-gkZoomHeight/2;
               // validation
               if(offset.x < 0) offset.x = 0;
               if(offset.y < 0) offset.y = 0;
               if(offset.x > thumbnail.width()-gkZoomWidth) offset.x = thumbnail.width()-gkZoomWidth+12;
               if(offset.y > thumbnail.height()-gkZoomHeight) offset.y = thumbnail.height()-gkZoomHeight+12;
               gkZoom.css({'left' : offset.x, 'top' : offset.y});
               offset.bx = offset.x*scale+6;
               offset.by = offset.y*scale+6;
               // validation
               if(offset.bx < 0) { offset.bx = 0; }
               if(offset.by < 0) { offset.by = 0; }
               if(offset.bx > gkPreviewSrc.width()-gkZoomWidth*scale+12*scale) offset.bx = gkPreviewSrc.width()-gkPreview.widht();
               if(offset.by > gkPreviewSrc.height()-gkZoomHeight*scale+12*scale) offset.by = gkPreviewSrc.height()-gkPreview.height();
               gkPreviewSrc.css({'right': offset.bx, 'bottom' : offset.by});
            }
         });
   
         thumbnail.bind('touchend', function(e) {
            gkPreview.removeClass('active');
            gkZoom.removeClass('active');
         });
      }
   }   


(be careful not to delete too much).

I will try this script and update you on the results.

Thx,
RJ

Hello,

I copied the script into the default.php for magic zoom, but it did not disable the magnifying effect. Not sure why. Any other solutions?

Thanks,
RJ

Why did you copied this script anywhere? I have told you to remove (delete) it from mentioned file.

Ok I see. I thought you meant to replace the original script with the script you provided above. I will delete the script as instructed.

Thx,
RJ

"remove entire magic zoom functionality" . Please let me know if it worked correctly.

This worked. Thank you.

RJ

If you have any additional questions regarding this topic, please let me know.

Thank you will do.

RJ