Zoom effects

Hi,

I tried to get rid of the zoom effects following the advice on these two pages
https://www.gavick.com/forums/storefron ... area-37310
https://www.gavick.com/documentation/jo ... er-effects
I did as told on my test site
http://www.mybuff.com.au/test
after updating to the latest template version and hikashop version. The two methods don't seem to have any effects other than not showing any thumbnails at all any more.
Does anybody have a solution for Storefront?
I don't mind keeping the effects for desktop but they definitely have to go on tablet and mobile.

Thanks for any idea.

Regards,

Edward

Lets start with homepage...
Please edit: /templates/gk_storefront/css/override.css and add at its end:

Code: Select all

.hikashop_product_image a:hover img {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}


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

Dear Cyberek,

I posted the code as you told me and nothing happens.

I also checked that the css is not cached or anything on an Xampp test server with cache switched off everywhere.

Could it be that the modules I use on the front page resort to a different css and don't get overridden?

Code: Select all

/*
#------------------------------------------------------------------------
# StoreFront - April Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2014 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

/*disable image zoom and overlays/*
.hikashop_product_image a:hover img {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
/*END disable image zoom and overlays/*

There must be a a problem on the server side:
http://www.mybuff.com.au/test/templates ... erride.css
File is empty.

Uuh. Thanks for spotting this Cyberek. I'll look into it straight away.

It was a typo, Cyberek. I didn't close a comment properly. Now it works. No zoom on hikashop images except for the zoom on the product page itself. How do I get rid of that one?

Please give me a link to a sample product.

http://www.mybuff.com.au/test/shop/orig ... hmere-blue
If the mouse goes over the product image a zoom appears

This question was already somewhere on this forum.
Please edit:
templates/gk_storefront/html/com_virtuemart/productdetails/default.php
and remove this section:

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


Thanks Cyberek.
I missed that one. Greatly appreciated.

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

Hi Cyberek,
sick at the moment so haven't implemented the zoom effect yet.

If I want to have the effects on desktop but not on tablets and phones do I then just edit the corressponding css? I assume that the overrides.css only applies for desktop.

Regards,

Edward

Depending - you could do it on categories, but on single product no. Also above change completely disables zoom on categories on all devices. To keep it on desktop, you need to use media queries and specific screen sizes for custom css.

I won't touch it then Thanks for your support, Cyberek.

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

Hi Cyberek,
I'm slowly recovering from my flu and had a look at implementing the change in default.php.
I realised that it's in the Virtuemart folder. I use Hikashop. I can't find any default.php in the Hikashop folder. Which file do I have to look for?

Could you please post an url to your site - to a page where zoom effect is still on?

Sure,
http://www.mybuff.com.au/test/shop/orig ... hmere-blue

templates/gk_storefront/html/com_hikashop/product/show_tabular.php
Same part of code.

Thanks Cyberek,

One thing came to mind. How do I adjust the size of the images in product listing and product detail page for hikashop. I know that Hikashop produces the right size thumbnail and main image but how do I make the template just take those images without resizing? Same with category images in category listings.

Regards,

Edward

@buffdownunder - could you visualize what do you want to achieve? I suppose that it can be a custom work beyond of our technical support but I want to make sure.

Hi dzuidek,

Now that I have removed the zoom effect I have big images in product listings and small thumbnails in product details page. Please have a look here.
http://www.mybuff.com.au/test/shop/original-buff
http://www.mybuff.com.au/test/shop/orig ... hmere-blue

I have confirmed with the Hikashop team that my settings for main image and thumbnail image are correct the way I want it to be.
200 px thumbnail height for even grid in product listings &
230 px width in product details for even responsive behaviour.

If I use Firebug to inspect the elements in order to find out why they are different in size I can't find the css that creates the size difference. So I assume that it is the template that creates the image blow-up in the product listing and puts the thumbnail into the product details page.

I can't find the locations where those sizes are set so I can change them to my liking.

For the category listing - please remove for the

Code: Select all

.hikashop_product_image img

selector the following CSS property:

Code: Select all

width: 100%;

and please replace it with:

Code: Select all

margin: 0 auto;

Regarding the product details - the product image is generated based on that path: /test/media/com_hikashop/upload/thumbnails/200x230/10612_Original_C_5090c5692858b.jpg

For me it looks like Hikashop wrongly generates thumbnail - please check if after removing our hikashop override (rename html/com_hikashop to html/__com_hikashop temporary) the problem at the product details page still exists.

Dear Dziudek,

Thank you very much for the help. The category listing is now exactly the way I want it

With the main product image it looks as if you are right. The thumbnail dimension does not fit the folder it is in. I will get back in touch with the hikashop team.

Regards,
Edward

Dear Dziudek,

I was too fast. The hikashop team told me that the main image was loaded but you only get to see it by clicking on the thumbnail. Then it opens in a simple lightbox.
Where do I have to look to display the main image straight away. The correct path for the main image in our example is
/media/com_hikashop/upload/10612_Original_C_5090c5692858b.jpg
The other image you quoted is the thumbnail with a height of 200 px

Regards,
Edward

In the html/com_hikashop/product/show_block_img.php file please replace:

Code: Select all

<?php
                     if($this->image->override) {
                        echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" '.$full_image_url.' style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width,  $height);
                     } else {
                        if(empty($this->popup))
                           $this->popup = hikashop_get('helper.popup');
                        $image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
                        $img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
                        if($img->success) {
                           $attr = '';
                           if (!empty ($this->element->images) && count($this->element->images) > 1) {
                              $attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image'.$variant_name.'\');"';
                           }
                           $html = '<img id="hikashop_main_image'.$variant_name.'" '.$full_image_url.' style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
                           if(!empty($this->element->badges))
                              $html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false);
                           echo $this->popup->image($html, $img->origin_url, null, $attr);
                        }
                     }
                  ?>

with:

Code: Select all

<img id="hikashop_main_image" data-full-img="<?php echo $full_image_url; ?>" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="" alt="" src="<?php echo $full_image_url; ?>">