Zoom function in the category view

Dear

I bought your template, because I like it, and want to migrate with my existing shop,
http://www.mickeys-tackle.ch,
to the new, with Joomla 3.43 and the new VM 3.0.94

I installed a quick package, without problems, and made the Migration with VM Migrator 3.72.
Now I have a problem with pictures, like this:
http://mickeys-tackle.ch/310/index.php/ ... ng/shimano


1. Where and how can I adjust the image so that after migration all look good and sharp?
Almost all my pictures are in format 600 x 450 .

2. How and where can I turn off the zoom function, in the category view, and when you go with the mouse over the image, deactivate zoom Funktion.
3. How can i make a Logo with Pictures, without having to increase the top menu list.


Thank you in advance and best regards

M.Gerovski

Hi

1. Please try edit file /html/com_virtuemart/category/default.php and find line:

Code: Select all

                     echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);


change it to:

Code: Select all

                     echo $product->images[0]->displayMedia('class="browseProductImage"', false);


2. Add this to override.css and make sure override is enabled in template settings:

Code: Select all

.category > div > a:hover > img, .product > div > div > a:hover > img {
    transform: scale(1);
}


3. I'm afraid I do not understand this question. Can You tell me some more details ?

Hello,

Did the response to question number 2 work, because I have to make the same edit?

RJ

Hi

@rojones31 no other way than try it I run it in firebug and it worked, so should do the job. Just make sure You've added it properly into files and that override is enabled in template settings.

I found the solution. Thanks for your help.

RJ

Hi

Can You please share this solution with us? Just in case someone else will be looking for an answer to the same question.

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: See code below.
------------------------------------------------------------------------------------------------------------------------------------------------
// 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).

Hi

Ok. So it was basically getting rid of the zoom solution if it works ok for You than no problem.