Re: Image zoom

If we are able to get an array of the photos, an array of the thumbnails and an array of the large versions of the photos, then I think editing product.show_block_img for the template is the simplest way without hacking any of the other files.

If Nicolas can point to how to get the relevant arrays in PHP then I will happily write the code to integrate magic zoom and magiczoomplus

The images are in the variable $this->element->images
It's an array with one object per image which contains the information of the image.
for example the file name of the first image is : $this->element->images[0]->file_path
but you will want the full URL of the image which can be retrieved like that:
$this->image->uploadFolder_url.$this->element->images[0]->file_path

while the full URL of the tumbnails is more complex as the size can change:
$this->image->uploadFolder_url.'thumbnail_'.$this->config->get('thumbnail_y').'x'.$this->config->get('thumbnail_x').'/'.$this->element->images[0]->file_path
Or:
$this->image->uploadFolder_url.'thumbnail_'.$this->config->get('product_image_y').'x'.$this->config->get('product_image_x').'/'.$this->element->images[0]->file_path


Finally, note that in the "show" file of the "product" view, you also have some code for the images of the variants. That's actually the hard part. Because depending on the way the magic zoom system is done, it might not be possible to have it work with the variant images because their HTML is copied on the fly when you change a characteristic selection on the product page and most images display system add their events when the page loads, so in such cases it doesn't work on HTML code which is duplicated and the javascript of the image display system has to be reinitialized, if possible.

Thanks for the information Nicolas.

I'll take a look in the next week or so and post what I find.

Nicolas,
We bought Hikashop business version for a client who needs a large e-commerce site. The client is interested in having the product image zooming functionality as Magiczoom.
I followed this thread and tried few things, but I cannot get it working. Magic zooming is working fine outside of Hikashop, but not within a product description.
1) Can you give us an indication of when a similar functionality is available at Hikashop
or
2) Will you be able to advise exactly what modifications are required to get this functionality working (or any other zooming functionality) within Hikashop products description
Or
2)Will Hikashop be able to create a script for us (at a cost) that we use in this site

Thanks for your response in advance.

I have tried MagicZoom in Hikashop and it works fine for a product with no variants.

I have contacted the developer of MagicZoom and he has advised that we can use the API of MagicZoom to reset it. We have to modify Hikashop so that it calls MagicZoom whenever the variant gets reset whenever a variant is called. I have not test had the time to test this and hopefully will get some time over the next week.

The code needed is:

Otherwise, there is a new zoom extension which is compatible with HikaShop and which is called art zoomin:
www.artetics.com/ARTools/art-zoomin

Fabulous. It looks good. I'll try and see how well it works

No documentation and their template files for Hikashop do not work without modification. e.g. the path to the image folder is hardcoded so if you change it in the Hikashop settings, it loads no images. The example displays a small thumbnail as the image, which is not what is set in the preferences for Hikashop and the image index does not change the image, it uses squeezebox.

All in all I will have to spend some time looking at it and I may in the end use MagicZoom if I can get it to work. Even though more pricey, you get far more functionality and documentation.

Thank you for your feedback. Let us know how it goes.

I managed to get MagicZoom working on my site ( lillaslavender.com/lv/produkti still work in progress)

What I needed was a bit different - I wanted Magic Zoom to work on Hikashop module.

What I did:

1. Published Magic Zoom module in header position of the site.

2. In HikaShop content module configuration "Parameters for DIV" -> "Type of item layout" I had selected "Image"(In "Parameters for products" "Link to the product page" must be set as "Yes"!). In HikaShop configuration "Display" -> "Views" I filtered by selecting my template name and "Frotend". In this list in column "Views" I found "Product" and then in column "File" corresponding "listing_img".

3. I edited listing_img. The code was:

I changed it to

Basicly what I did was changing image link from

to

Under /images/products/large/ I uploaded large pictures of products which I also used when making products in HikaShop. So the filenames were the same(HikaShop makes filenames web safe after upload, so originals must be web safe to start with for this to work).

Also I added

so that there would still be a link to product.

As you can see, its very easy.

Thank you for that Zahorijs.

The hard part is not getting MagicZoon to work (although it does require editing the relevant display).

The hard part is getting it to work on a product page with variants. The first load is always OK, but the selection of variants changes the html on the fly and the javascript is not initialised to cope with the change, and no longer works in the image area. I have worked out the files requiring change, but have not had time to make the changes, as I do not want it to break with upgrades.

I will work something out with Nicolas when I get time, perhaps using a config value to use alternative code for MagicZoom instead of the internal Hilkashop image management.

@Zahorijs thank you for your feedback.

@esotechie If you don't want to have different images for each variant, you can just remove the display of the variant images in the "show" file of the "product" view via Display->Views and it won't change the HTML on the fly when you select characteristics. That way, it would be a simple modification in a similar manner to what Zahorijs posted but in the file "show_block_img".
But if you want to have different images for each variants of your product, then the magiczoom system needs to be reloaded on the fly with the images of the variants get displayed. That actually depends on how the javascript of MagicZoom is done. It might be an easy change, but it might also be quite complex or impossible.

Hi Nicolas,

I do need variant images, which why I need to spend time working on this.

I believe I need to do three things:
1) Modify the code for product->show_block_img to have the MagicZoom code
2) Modify characteristic.php to re-initialise MagicZoom via API after the variant is changed
3) Modify the helper image.php to have the MagicZoom code for variants

For 2 and 3 I need to work something which does not effect the normal functionality if MagicZoom is not used. I was thinking maybe adding a new param record to hikashop_config and run the MagicZoom code if it's set, otherwise the standard code.

Am I correct in my approach above? And is there any other files you think I need to take into consideration?

That's correct.

For the characteristic.php and image.php modifications, you should actually be able to create template override files for your modifications and not have any core code modified.
We have some information on suh image display and characteristic display overrides here:
www.hikashop.com/en/support/documentatio...tation.html#override

Even better.

Thanks for the link

@Nicolas,

I got magiczoomplus working pretty well on my site: heelcrush.com/collection/product/cid-12.html

But variants - OMG its like broken!

... okay so you said about the variants images - removing them from the Product Show view... Man how do you do that? All I got is this stuff and when I try cutting it out it breaks the code >>


I'm trying to kill these guys >> if (!empty ($variant->images)) {

Please help...

Just change:
if (!empty ($variant->images)) {

to:
if (false) {

I have now installed http://demo.artetics.com/index.php?option=com_content&view=article&id=123&Itemid=146.

It is only $25 and work like a charm.

The only issue was that the flypage they gave for Hikashop did not handle variants. They went onto my site and fixed it for me

I highly recommend it.

If I will use Magic Toolbox, how do I have to set the images in a product?
Now I set the images in dimensions height = 100 px, width = (max)200 px. Magnifiyng them would give nasty pictures.

Will Hikashop, including Magic Toolbox, automaticly install images in thumbnail 200 x 100 AND in a higher resolution - in such a way that magnifying will result in pictures in a higher resolution?

You should upload a high-res image that looks ok when zooming. Hikashop is well written and will generate smaller images when needed for optimisation, so you need not worry about creating thumbnails etc.

The page will then show the lower-res image and the zoom will show the larger image in a floating box.