X-Cart forums

[Brett_H]

I found a pretty cool image magnification javascript (link) that I wanted to use in the body (detailed description) of my product pages. Currently I have an image on each of my product pages (in addition to the thumbnail and additional images) and I'd like to be able to use this script to magnify it... it's cool because it doesn't open it in a new window or navigate away from that page, you just click it anywhere to open and click it anywhere to close.

Anyway... I have no idea how or where to insert the code. I have basic HTML knowledge, but that's about it.

These are the instructions that came with the free software:

1. Copy PopBox.js to your scripts directory and reference it in your web pages with a
   <script src="/scripts/PopBox.js" type="text/javascript"></script> tag.
2. Make changes to the global variables to support your installation directory structure (after the PopBox.js script include): <script type="text/javascript">
   popBoxWaitImage.src = "/images/spinner40.gif";
   popBoxRevertImage = "/images/magminus.gif";
   popBoxPopImage = "/images/magplus.gif";
   </script>
3. Add any CSS classes you wish to your stylesheet file to help determine the look of your images.
4. If you are using the magnification glass icons copy them to your images directory and modify their location in your stylesheet accordingly.
5. Attribute your <img> tags with PopBox events. Instructions can be found on the PopBox product page and the PopBox documentation page.

I'm stuck on the #1. Do I add the code to /customer/main/product.tpl ? If so, where?I know I'm going to have trouble with the rest of the instructions as well.

This script would be great for my site if I could get it to work... any help you guys could give me would be REALLY appreciated.

[Victor D]

You can add this script elsewhere you wish within skin1 dir (in a separate file named PopBox.js).
I think placing it in skin1/customer/ is good idea
Then insert in /customer/main/product.tpl right below the lines

{/capture}
{include file="customer/dialog.tpl" }

<script src="customer/PopBox.js"  type="text/javascript"></script>
<script type="text/javascript">
                            popBoxWaitImage.src = "{$ImagesDir}/spinner40.gif";
                            popBoxRevertImage = "{$ImagesDir}/magminus.gif";
                            popBoxPopImage = "{$ImagesDir}/magplus.gif";
                            </script>

And copy these images in your skin1/images directory

So you complete first and second step

[burko]

This looks great. I also have very basic skills.
I would be keen to implement this so that the main image on the product details page is magnified on mouse-over or click.

Any help with where to put the code would be appreciated.

Cheers

Paul

[Shamun]

Check my sig for a link for highslide