Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Template - FashionMart (SKU# FLEX-00008)

TOPIC: [SOLVED] How to adjust zooming effect's sizes

[SOLVED] How to adjust zooming effect's sizes 9 years 9 months ago #903

Hello, can i know how to adjust the things like zooming box size or distance of zooming box? Thank you

Paul
Last Edit: 9 years 9 months ago by Support.
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #912

Hi,

Since the zooming effect comes built-in with the VM Templates, there is no environment to adjust the zooming parameters.
(you will be able to manage it in the next release of our VM Template though, next version of our VM Template will have an admin panel backend to adjust parameters easily through joomla backen).

For now, you will need some code edits to achieve what you are looking for;
The PHP file you need to make edits is this:

ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/productdetails/default.php
(default.php or flexv2.php depends on which one you are using)

And look for these lines in this PHP file:
jQuery_1_5_2.fn.flexibleZoom.defaults = {
    .....
    .....
    .....
    .....
}

But be aware, there are 2 different places you will find this kind of lines. One for the regular product details page, other one is for when the "Enlarge View" button is clicked.

For example, you should look at
- 114th line for default.php
- 143th line for flexv2.php
For regular product details page.

You will some parameters once you look at these lines in the PHP file, such as: zoomWidth, zoomHeight etc.. You can play around with those numbers.
zoomWidth = The width size of Zooming box.
zoomHeight = The height size of Zooming box.
adjustX = The distance between zooming box and the thumbnail.

(all values are "pixel")


Cheers.
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #921

Great and thanks for your prompt support.... just found and changed it but when i changed to for example, zoomWidth: '100', zoomHeight: '120', the view box (thumbnail) on the right is also affected to become the corresponding size. so how can i just make the zoom-in smaller and thumbnail bigger - can them be adjusted individually? Thank you very much :)
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #923

Those values you have changed for the "Zooming Box" sizing that appears when mouse hovered.
Do you want to resize the thumbnail instead?

Then it is quite easy and nothing to do with the zooming effect extension,
Find this Line in product details page (the same PHP file):

For default.php find;
<div class="width35 floatleft">
and
<div class="width65 floatright">

for flexv2.php find;
<div class="width40 floatleft">
and
<div class="width60 floatright">



And play around with those width values. For example, to enlarge the thumbnail in default.php
change;
<div class="width35 floatleft">
to
<div class="width50 floatleft">

and
<div class="width65 floatright">
to
<div class="width50 floatright">

Same idea for flexv2.php.
The thumbnail will automatically enlarge. BUT ALWAYS MAKE sum of those width values to width100.

Cheers.
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #927

Hi,

not sure if i did right or wrong, no matter i change the following DIV in default.php to

<div class="width50 floatleft">
<div class="width50 floatright">

or
<div class="width60 floatleft">
<div class="width40 floatright">

the size of product image did become smaller or bigger but the view to zoom-in on the right still keeps the same size ... not sure whether thumbnail we're referring to is zoom-in view or not..

Here's the link showing the problem...

thecitytourinc.com/paulyang/fashion/index.php/collection/2012_fall_collection/trend-1_2012/1202p07-detail

Thanks a lot...
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #950

Hi,

First of all, The picture inside the "zooming box" is actually the product picture. You should upload some big picture to use zooming effect efficiently. For instance, if the thumbnail is 300x300 (pixel) and your product picture has the resolution of 400x400, then there is no point to use the zooming effect, the product picture should be at least x3 times larger than thumbnail.

And secondly, I am seein that, you have set the zooming box width and height to very small values,
jQuery_1_5_2.fn.flexibleZoom.defaults = {
        tint: false,
	zoomWidth: '80',
        zoomHeight: '60',
        position: 'right',
        tintOpacity: 0.5,
        lensOpacity: 1,
        softFocus: false,
        smoothMove: 5,
        showTitle: true,
        titleOpacity: 0.5,
        adjustX: 12,
        adjustY: 0
    };
 

In these parameters,
zoomWidth: '80',
zoomHeight: '60',
Represent the zooming box size. Make them somehting like
zoomWidth: '300',
zoomHeight: '400',


PastedImage103112812PM.gif



If you want to minimize the thumbnail, you should alter this: <div class="width50 floatleft"> and the thumbnail will be sized by itself.

If you want very small thumbnail, have these
<div class="width20 floatleft">
and
<div class="width80 floatright">

It will look like this:

PastedImage103112809PM.gif
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #969

yeah, point taken, have eventually figured out the correlation between zooming box and thumbnail.
Super thank you for great support and brilliant elaboration ..:)
Paul
The topic has been locked.

Hello, can i know how to adjust the zoom-in 9 years 9 months ago #972

Your welcome.

Case solved. Topic is closed.
The topic has been locked.
Time to create page: 0.441 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo