Turn off zoom

Hello,

I'd like to turn of the zoom that occurs when hovering over the image on the product categorie overview and the product page. How can this be done?

Could you please post an url to your site?

Sorry for the late respons. I'm building it locally so i had to place it online.

You can find the site on www.dobper.nl

Please edit: /templates/gk_storefront/css/override.css and add at its end:

Code: Select all

.products .nspImageWrapper:hover img {
  opacity: 1;
}
.products .nspImageWrapper:hover:after {
    display: none;
}


Remember to enable "CSS override" in template settings - advanced section.

Thanks fot the code. Sadly this doesn't remove the zoom function. I have enabled override in template advanced settings

There is no zoom right now on your homepage products. Please clear your cache or use browser in incognito/private mode to verify.

Yes That is working. But i want no zoom on the product categorie view and also none in the product detail page.

So i want no zoom on the whole site.

Sorry, should have been more clearer.

Please provide sample links to views where the modification should also be done.

The zoom functions need to be disabled throughout the whole site. for example on the categorie pages:
http://dobper.nl/gehoorbescherming/bouw
http://dobper.nl/oordopjes/earplugs
etc.

But also on the specific product pages:
http://dobper.nl/oorkappen/met-muziek/p ... iek-detail
http://dobper.nl/merken/howard-leight/laser-lite
etc.

I'm hoping this makes my intentions more clearer.

Please add to override.css:

Code: Select all

.category > div > a:hover > img, .product > div > div > a:hover > img, .category > div > a > img, .product > div > div > a > img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}


The final change is in file:
/templates/gk_storefront/js/gk.scripts.js
You need to remove this block of code:

Code: Select all

   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');
         });
      }
   }


Please add to override.css:

Code: Select all

.category > div > a:hover > img, .product > div > div > a:hover > img, .category > div > a > img, .product > div > div > a > img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}


The final change is in file:
/templates/gk_storefront/js/gk.scripts.js
You need to remove this block of code:

Code: Select all

   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');
         });
      }
   }


PS - please backup the files before the change.

Thanks a lot for the code. For the categorie pages the code for override.css does the trick:

Looking at the document /templates/gk_storefront/js/gk.scripts.js there is no such code in it as you placed above to remove?

Ok, let me check that

Ok, that was wrong file... You should edit this one:
templates/gk_storefront/html/com_virtuemart/productdetails/default.php
and remove this part:

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');
         });
      }
   }   


Unfortunately also this file doesn't contains the code you've send.

Could you please pack this file and attach it to this thread?

I'm sorry. It was the correct file. But when i delete the given code the productpages turn blank.
http://dobper.nl/merken/pluggerz/all-fit-road

Probably you have did wrong change. Please send me the original file and I'll modify it for you.

Sure, thanks a lot. Here is the original file.

Please try this version:

default.php.zip

Works out great. Thanks a lot for your effort and support!

No problem . You must have removed to much when you edited the file and it broke down.
I'm glad I could help.

I've moved the website when it was al finished to it's domain. And after the move the zoom on the product detail pages are back. How is this possible?

http://goo.gl/Y71Wzy

Your site is password protected.
Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

hello, I'd also like to turn off all zoom effects across my entire site but I am using HikaShop not VirtueMart. Can you please advise what code I need to add to my override.css and hikashop template files. I've tried the code above in my css file and it doesn't do anything.

Thanks

Could you please post an url to your site?

Hi Cyberek, I've PM'd you the URL as the site is not live yet. Thanks

@leconceptsA - you are using hikashop. On the homepage you can disable zooming by
editing: /templates/gk_storefront/css/override.css and adding at its end:

Code: Select all

.hikashop_product_image a:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}


Remember to enable "CSS override" in template settings - advanced section.

Thanks, this fixes the zoom on the category page but I still get a zoom effect on the product page?

Please provide a link to a sample product page.

Pm'd.

Thanks

Is there anything else I can help you with regarding this topic?

I didn't see an answer to the product page popup zoom effect? Thank you.

Hello, is there any update to this question?

Thanks

Oh, this thread is too long and I have missed out that one.
This "zoom" you are asking is not a standard one - it is created by hikashop extension and you should ask their support how to turn it off.

Hmm, I looked at firebug and can see this line of code when I hover over the product page image;

<div id="gkZoom" class="" style="width: 0px; height: 0px; left: 277.5px; top: 178px;"></div>

I'm guessing gkzoom is part of the template and not hikashop?

You are absolutely right, that was my mistake.
You need to edit file:
/templates/gk_storefront/html/com_virtuemart/productdetails/default.php
and remove this part of code:

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');
         });
      }
   }


This is for virtuemart though? I;m using Hikashop.

Please check this file:
templates/gk_storefront/html/com_hikashop/product/show_tabular.php
and try to remove entire block of code:

Code: Select all

jQuery(document).ready(function() {   
    // 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 remove closing script tag on the last line).

Great, that did the trick.