product images with zoom effect

[ce7]

I tried few zoom addons on 234.1 Edge (BS) version with KissIT Thumbnails,
none of the zoom can works. (Did try the QTPro product_info.php which
has a bit of 231 version code, and still no zoom effect)

Found the boostrap zoom javascript online, and want to apply to
product_info.php but no idea how the  product image and
thumbnails image code is defined in BS version. Google and found
few fourms mentioned about includes/modules/header_tags/
is the place to go. I guess 2 files related to the product_info.php

includes/modules/header_tags/ht_product_colorbox.php
includes/modules/header_tags/ht_product_opengraph.php

Can you expert guys please help me to learn how to make this zoom script to work?

So far catalog/includes/template_top.php I have declared these
<link href="..." rel="stylesheet">
<script src="...></script>

Please find the html page source code to get a picture of
what I am trying to describe:

<h1>Click and Zoom</h1><!-- can comment this out -->
	    <div class="Lens-gallery-container" id="demo-2">
        <div class="Lens-container">
            <div class="Lens-big-image-container">
                <a class="Lens-lens-image" data-lens-image="images/samsung/galaxy_tab_1.jpg">
                    <img src="images/samsung/galaxy_tab_1.jpg" class="Lens-big-image">
                </a>
            </div>
        </div>
	        <div class="Lens-thumbnails-container">
            <!-- # is target for linking to product_info.php -->
            <a href="#" class="Lens-thumbnail-wrapper"
               data-lens-image="images/samsung/large/galaxy_tab_2.jpg"
               data-big-image="images/samsung/medium/galaxy_tab_2.jpg">
                <img src="images/samsung/thumbnail/galaxy_tab_1.2pg">
            </a>
	            <a href="#" class="Lens-thumbnail-wrapper"
               data-lens-image="images/samsung/large/galaxy_tab_3.jpg"
               data-big-image="images/samsung/medium/galaxy_tab_3.jpg">
                <img src="images/samsung/thumbnail/galaxy_tab_1.3pg">
            </a>
            <a href="#" class="Lens-thumbnail-wrapper"
               data-lens-image="images/samsung/large/galaxy_tab_4.jpg"
               data-big-image="images/samsung/medium/galaxy_tab_4.jpg">
                <img src="images/samsung/thumbnail/galaxy_tab_1.4pg">
            </a>
        </div>
    </div>

It has a seperate gallery script and a zoom lens script.
It is optional to use the gallery script as osC BS
already have the product photo gallery built in.

Original code has large images, medium images and thumbnails images,
ideally, I like to put the images under the manufacturer folder,
for example saumsung. (catalog/images/samsung/)
and inside that folder, has these seperate image size folders, eg.
catalog/images/samsung/large/
catalog/images/samsung/medium/
catalog/images/samsung/thumbnail/
or
catalog/images/samsung/1000x1000/
catalog/images/samsung/250x250/
catalog/images/samsung/75x75/

with the KissIT Image Thumbnails/
in admin/configuration/images/ that default set as
catalog/images/thumbs/
and the thumbnail images will automatically save into different size,
eg.
catalog/images/thumbs/100_57/
catalog/images/thumbs/640_480/
catalog/images/thumbs/100_80/
catalog/images/thumbs/83_83/
and the admin side thumbnails also saved here???

I also have image sub-directory installed so that
I can assign the image folder location when I insert the image.

===========
Question-1:
===========
In which file and what part of the code that I need to add the
<script>
    $(document).ready(function(){
    .
    .
    .
});
</script>  

===========
Question-2:
===========
How can I organize the image size into the right folder location
for this zoom script work?

Thanks.  Lyn

[♥JcMagpie]

You can add zoom effect to images with simple css. lots of ways to do this.

https://www.w3schools.com/howto/howto_css_zoom_hover.asp

 

You can see basic implementation on test site  https://www.justfastfood.com/product_info.php/products_id/26

But it can be made more stylish with a bit more work.

 

[♥JcMagpie]

if you want to implement in js  then use the colorbox script jQuery Zoom by Jack More

 

http://www.jacklmoore.com/zoom/

[♥JcMagpie]

This test site shows the Jack More js zoom.

https://tbyb.co.uk/product_info.php/microsoft-intellimouse-pro-p-3

[ce7]

6 hours ago, JcMagpie said:

This test site shows the Jack More js zoom.

https://tbyb.co.uk/product_info.php/microsoft-intellimouse-pro-p-3

@JcMagpie Thank you very much for the info and links!!! Well have a look and take time to learn!