10 Jun 2008, 1:46 PM
New Zenner
- Join Date:
- May 2007
- Posts:
- 16
- Plugin Contributions:
- 0
Add a new tag to additional products images
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.
<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&pID=180&pic=0&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&pID=180&pic=1&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&pID=180&pic=2&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>
Here is a link to a page that it is working on.
[LINK](http://www.zulurose.com/demo/index.php?main_page=product_info&cPath=65_67&products_id=180)
Alex
