Forums / Addon Templates / How to zoom in when I hover over the image

How to zoom in when I hover over the image

Views: 18,509

Results 1 to 16 of 16
1 Apr 2015, 12:58 PM
#1
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

How to zoom in when I hover over the image

Hello Every One!
Can any one let me know how to zoom in when I hover over the image. Is there any utility for this?

Regards,

4 Apr 2015, 1:51 PM
#2
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Can some one respond here please.

4 Apr 2015, 2:06 PM
#3
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: How to zoom in when I hover over the image

RiazShahid:

Hello Every One!
Can any one let me know how to zoom in when I hover over the image. Is there any utility for this?

Regards,

Take a look at this plugin: http://www.zen-cart.com/downloads.php?do=file&id=1380

NOTE: We are sorry that Frank is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

5 Apr 2015, 3:43 PM
#4
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Thanks for the proposal. But it is not the same as required. It does not zoom any area, instead it shows full image.
For example please look the bellow link

http://www.kaymu.pk/polo-blue-for-men-420159.html

Thanks

6 Apr 2015, 12:01 AM
#5
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: How to zoom in when I hover over the image

RiazShahid:

Thanks for the proposal. But it is not the same as required. It does not zoom any area, instead it shows full image.
For example please look the bellow link

http://www.kaymu.pk/polo-blue-for-men-420159.html

Thanks

My apologies, I misunderstood your question.

This may help:
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

http://www.zen-cart.com/downloads.php?do=file&id=1815

NOTE: We are sorry that Frank is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

6 Apr 2015, 11:34 AM
#6
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Thanks Frank18!
I downloaded Product Image Zoom But I am bit confused in replacing the code as per its readme file. What it suggests is

Find:
zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT)

  • Replace:
    zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'data-zoom-image="' . $products_image_large . '"')

What confuses me is that there is a full stop at the end of original text, I selected it and replaced, but it didn't worked. Don't know what to do? Here is my current code

zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'data-zoom-image="' . $products_image_large . '"') . '<br

6 Apr 2015, 1:26 PM
#7
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: How to zoom in when I hover over the image

RiazShahid:

Thanks Frank18!
I downloaded Product Image Zoom But I am bit confused in replacing the code as per its readme file. What it suggests is

What confuses me is that there is a full stop at the end of original text, I selected it and replaced, but it didn't worked. Don't know what to do? Here is my current code

You may want to consult the relevant support thread of this plugin.

NOTE: We are sorry that Frank is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

7 Apr 2015, 9:52 AM
#8
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Yes, Please give me link to its support thread.

Thank you

10 Apr 2015, 7:04 AM
#9
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Can some one give me link of Product Image Zoom.

12 Apr 2015, 4:31 PM
#10
adb34 avatar

adb34

Totally Zenned

Join Date:
Mar 2008
Location:
Brampton, Cumbria, United Kingdom, United Kingdom
Posts:
825
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

frank18:

You may want to consult the relevant support thread of this plugin.

I cannot find a forum link to this plugin either. Have you copied the code to the letter? I have noticed you have```
. '<br


I have this running on [my site](http://jmi.edencraftsupplies.co.uk/index.php?main_page=product_info&cPath=70_76&products_id=191) and all is OK.

I would like to you if you can add the zoom feature to the additional images?

Learning Fast.
Eden Craft Supplies

12 Apr 2015, 4:43 PM
#11
adb34 avatar

adb34

Totally Zenned

Join Date:
Mar 2008
Location:
Brampton, Cumbria, United Kingdom, United Kingdom
Posts:
825
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

I have checked my file > tpl_modules_main_product_image.php and if you have not changed anything, line 19 should read```
echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';


I hope this helps?

Learning Fast.
Eden Craft Supplies

13 Apr 2015, 4:18 AM
#12
frank18 avatar

frank18

Deceased

Join Date:
Nov 2007
Location:
Sunny Coast, Australia
Posts:
3,427
Plugin Contributions:
2

Re: How to zoom in when I hover over the image

RiazShahid:

Yes, Please give me link to its support thread.

Thank you

My apologies - seems that the author of this mod did not provide a support thread. Bit sloppy IMHO!

NOTE: We are sorry that Frank is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

17 Apr 2015, 1:59 PM
#13
riazshahid avatar

riazshahid

New Zenner

Join Date:
Feb 2015
Posts:
77
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

adb34:

I have checked my file and if you have not changed anything, line 19 should read```
echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';

> 
> I hope this helps?

Hi, I replaced my exiting file,/includes/templates/westminster_new/templates/tpl_modules_main_product_image.php (even I copy paste your code ), in my case it is line 37, but it still does not work. I am pasting complete code here, hope it will not bother you to look at it.

Thank you

> <?php
> /**
>  * Module Template
>  *
>  * @package templateSystem
>  * @copyright Copyright 2003-2005 Zen Cart Development Team
>  * @copyright Portions Copyright 2003 osCommerce
>  * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0
>  * @version $Id: tpl_modules_main_product_image.php 3208 2006-03-19 16:48:57Z birdbrain $
>  * Modified by Anne (Picaflor-Azul.com) Westminster New v1.3
> */
> ?>
> <?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
> <div id="productMainImage" class="centeredContent">
> <?php // bof Zen Lightbox 2008-12-15 aclarke ?>
> <?php
> if (ZEN_LIGHTBOX_STATUS == 'true') {
>   if (ZEN_LIGHTBOX_GALLERY_MODE == 'true' && ZEN_LIGHTBOX_GALLERY_MAIN_IMAGE == 'true') {
>     $rel = 'lightbox-g';
>   } else {
>     $rel = 'lightbox';
>   }
> ?>
> <script language="javascript" type="text/javascript"><!--
> document.write('<?php echo '<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" title="' . addslashes($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
> //--></script>
> <?php } else { ?>
> <?php // eof Zen Lightbox 2008-12-15 aclarke ?>
> <script language="javascript" type="text/javascript"><!--
> document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
> //--></script>
> <?php // bof Zen Lightbox 2008-12-15 aclarke ?>
> <?php } ?>
> <?php // eof Zen Lightbox 2008-12-15 aclarke ?>
> <noscript>
> <?php
>  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
> ?>
> </noscript>
> </div>
17 Apr 2015, 4:17 PM
#14
adb34 avatar

adb34

Totally Zenned

Join Date:
Mar 2008
Location:
Brampton, Cumbria, United Kingdom, United Kingdom
Posts:
825
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

I am learning about coding but I have noticed you are using Lightbox```

<?php if (ZEN_LIGHTBOX_STATUS == 'true') { if (ZEN_LIGHTBOX_GALLERY_MODE == 'true' && ZEN_LIGHTBOX_GALLERY_MAIN_IMAGE == 'true') { $rel = 'lightbox-g'; } else { $rel = 'lightbox'; } ?>

Or,this is my php file```
<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_main_product_image.php 18698 2011-05-04 14:50:06Z wilt $
 */
?>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'data-zoom-image="' . $products_image_large . '"') . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
//--></script>
<noscript>
<?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</noscript>
</div>
``` that is the one I use. It does not have the lightbox in it. Try this

Learning Fast.
Eden Craft Supplies

9 Nov 2019, 7:03 PM
#15
windsurfer avatar

windsurfer

Zen Follower

Join Date:
Jun 2011
Posts:
185
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Should i assume this product_image_zoom will not work in version 1.5.6
I can't find the templates/tpl_modules_main_product_image.php file as stated in the readme file.

If you wait to do everything until you're sure it's right, you'll probably never do much of anything !!!

2 Dec 2022, 4:08 PM
#16
haychatter avatar

haychatter

New Zenner

Join Date:
Mar 2022
Location:
UK
Posts:
22
Plugin Contributions:
0

Re: How to zoom in when I hover over the image

Hello,

I have Product Image Zoom working on v1.5.7d.

But I have an issue with additional images, when I click on an additional image it shows as main image, as it should, but when magnified is still shows the original image. Any suggestions as to why this is happening?

Here is a link to a test page https://myalchemy.co.uk/index.php?main_page=product_info&cPath=1&products_id=11

Thanks