Add a new tag to additional products images

[Butalezi Brown]

Hi, I am looking for a kind soul's help.

I am trying to modify my additional product images.

I am using a cool plug-in called MagicZoom. (http://magiczoom.com)
This plug-in creates an interactive zoom-window on your product(s) pages.

My problem is that I need to get the additional products to swap and zoom.
Magic Zoom's examples on their site show this is possible, and they have code suggested how to do it.

 <!-- Firstly, define the main image, but notice the addition of the id and rel attributes -->
<a href="dress-BK-big.jpg" class="MagicZoom" id="zoom1" rel="thumb-change: mouseover"><img src="dress-BK-small.jpg"></a>
 <!-- Secondly, define the other images using the id in the rel attribute -->
<p>Mouseover to change dress color:</p>
<a href="dress-BK-big.jpg" rel="zoom1" rev="dress-BK-small.jpg"><img src="color_BK.gif"/></a>
<a href="dress-PR-big.jpg" rel="zoom1" rev="dress-PR-small.jpg"><img src="color_PR.gif"/></a>
<a href="dress-RB-big.jpg" rel="zoom1" rev="dress-RB-small.jpg"><img src="color_RB.gif"/></a>
<a href="dress-RD-big.jpg" rel="zoom1" rev="dress-RD-small.jpg"><img src="color_RD.gif"/></a>

So far, I have my main image working and here is the code from a live page.

<!--bof Main Product Image --> 
<div id="productMainImage" class="centeredContent back">
<!-- bof Zen Lightbox v1.4 aclarke 2007-09-15 -->
<img class="MagicZoomLoading" src="includes/templates/classic/images/ajax-loader.gif" alt="Loading Zoom, please wait"/><a href="images/large/182050_A4CB0_9024_003_LRG.jpg" rel="opacity: 50;zoom-width: 350px;zoom-height: 350px;zoom-position: right;thumb-change: mouseover" class="MagicZoom" id="zoom1"  title="Gucci Boot"><img src="images/182050_A4CB0_9024_003.jpg" alt="Gucci Boot" title=" Gucci Boot " width="350" height="350" /><br /></a><!-- eof Zen Lightbox v1.4 aclarke 2007-09-15 -->
<noscript>
<a href="http://www.zulurose.com/demo/index.php?main_page=popup_image&amp;pID=180" target="_blank"><img src="images/182050_A4CB0_9024_003.jpg" alt="Gucci Boot" title=" Gucci Boot " width="350" height="350" /><br /><span class="imgLink">larger image</span></a></noscript>
</div><!--eof Main Product Image-->

Here is what my ZenCart is currently churning out for the additional product images. Which is my problem.

 
<div class="additionalImages centeredContent back" style="width:33%;">
      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://www.zulurose.com/demo/index.php?main_page=popup_image_additional&amp;pID=180&amp;pic=0&amp;products_image_large_additional=images/large/182050_A4CB0_9024_003_2_LRG.jpg\')"><img src="images/182050_A4CB0_9024_003_2.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a>');
//--></script>
      <noscript><a href="images/large/182050_A4CB0_9024_003_2_LRG.jpg" target="_blank"><img src="images/182050_A4CB0_9024_003_2.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a></noscript></div>
    <div class="additionalImages centeredContent back" style="width:33%;">
      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://www.zulurose.com/demo/index.php?main_page=popup_image_additional&amp;pID=180&amp;pic=1&amp;products_image_large_additional=images/large/182050_A4CB0_9024_003_3_LRG.jpg\')"><img src="images/182050_A4CB0_9024_003_3.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a>');
//--></script>
      <noscript><a href="images/large/182050_A4CB0_9024_003_3_LRG.jpg" target="_blank"><img src="images/182050_A4CB0_9024_003_3.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a></noscript></div>
    <div class="additionalImages centeredContent back" style="width:33%;">
      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://www.zulurose.com/demo/index.php?main_page=popup_image_additional&amp;pID=180&amp;pic=2&amp;products_image_large_additional=images/large/182050_A4CB0_9024_003_4_LRG.jpg\')"><img src="images/182050_A4CB0_9024_003_4.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a>');
//--></script>
      <noscript><a href="images/large/182050_A4CB0_9024_003_4_LRG.jpg" target="_blank"><img src="images/182050_A4CB0_9024_003_4.jpg" alt="Gucci Boot" title=" Gucci Boot " width="80" height="80" /><br />larger image</a></noscript></div>
<br class="clearBoth" />

Correct me if I am wrong. This code is created in
/demo/includes/modules/additional_images.php

It looks like the minimal code I need to tweak to get some functionality is...

 // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . $large_link . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . ' </a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

But were do I begin. I am a rank novice with PHP and Java.
I need for it to look like.

 <a href="/images/large/image01_LRG.jpg" rel="zoom1" rev="xxx/image/image01.jpg"><img src="xxx/image/image01.jpg
"/></a>

Thanks for any help.

Here is a link to a page that it is working on.
LINK
Alex

[msblack7of9]

Hi Butalezi,
I saw you have it working on your site ZuluRose which by the way is awesome and the best zen cart site I have seen:)

Can you tell me how you came up with a solution? I want to install both also.

Thanks!
Kathy:)

[dscott1966]

Take a look at my page and tell me if this is what your trying to do

http://dealz-r-us.com/index.php?main...&products_id=3

[msblack7of9]

Yes Siree! that's exactly what i want to do.

Thanks for replying and thanks for any help you can provide.

7:)

[dscott1966]

Yes Siree! that's exactly what i want to do.

Thanks for replying and thanks for any help you can provide.

7:)

I used ajax image swapper for swapping the images. Then added magic zoom on top of it. it was really easy to do. If you PM me i will help you with this.

[msblack7of9]

thanks dscott1966, i sent you a message.
7:)

[chefouvi]

Hi Dscott,
Could you please show me how you got Ajax image viewer/swapper and magiczoom to play nice?
I have been at this all night and couldn't figure it out.
I would appreciate any help you can give.

Thanks,

[lucianman]

did you guys find out your solution.