Swap Image(s): Need Help Defining JavaScript / PHP

DoctorLarry · December 20, 2003

Scenario:

I'm trying to modify my catalog product_info page to show a primary full sized "main" image but that will also display a row or column of smaller thumbnails next to the "main" image that represent any additional images for that items. The goal being that when any given thumb is clicked, it will replace/swap the "main" image with the full sized version of the thumbnail. I found a simple JavaScript that does exactly what I'm wanting and have managed to modify half the script such that it displays a correct additional thumbnail for the item. However, I can't figure out how to reference the full sized main image in the same way.

Problem:

Replacing the fixed url image i.e. "images/fixed.jpg" similar to that of a catalog's <img scr="images/fixed.jpg"> with a variable database $products_info/$products_image i.e. "' . (DIR_WS_IMAGES . $product_info_values['products_image']) . '";

Sample of the Original/Edited JavaScript Code:

<HEAD>

<script LANGUAGE="JavaScript">



</script>

</HEAD>



<BODY onLoad="swap(0);">



<basefont face="Tahoma" size="2">

<br>

<hr>

<br>

<center>

<table>

<tr>

<td valign="top" align="left">

<img name="imgMain" src="fixed-image-loading.gif" border="1">

</td>

<td width="20">

</td>

<td valign="top" align="center" valign="top">

<font face="Tahoma" size="2"><b>Click to Swap Images.</b></font>

<br>

<br>

<a href="java script:swap(0)"><img src="fixed-thumb-0.jpg"></a>

<a href="java script:swap(1)"><img src="fixed-thumb-1.jpg"></a>

</td>

</tr>

<tr>

<td colspan="3" height="20">

</td>

</tr>

</table>

</center>

Revision's / Modification's Thus Far:

In the above Step Three, I managed to modify this section:

<a href="java script:swap(0)"><img src="fixed-thumb-0.jpg"></a>

<a href="java script:swap(1)"><img src="fixed-thumb-1.jpg"></a>

And changed it to this to successfully get the correct thumbnails to appear:

        <a href="javascript:swap(0)"><?php echo tep_image(DIR_WS_IMAGES . $product_info_values['products_thumb-0']); ?></a>
        
       <a href="javascript:swap(1)"><?php echo tep_image(DIR_WS_IMAGES . $product_info_values['products_thumb-1']); ?></a>

However, How Do I:

Modify the script in Step One to pull the $products_info/$products_image in the same fashion ???

I'd like to change this part:

aryImages[0] = "fixed-0.gif";
aryImages[1] = "fixed-1.gif";

To read something like this to reference & display the correct full sized "main" image: ???

aryImages[0] = "' . (DIR_WS_IMAGES . $product_info_values['products_image-0']) . '";
aryImages[1] = "' . (DIR_WS_IMAGES . $product_info_values['products_image-1']) . '";

What am I missing here ???

Is this possibly a "function" thing that can be defined ? If so, How? :(

(FYI) Original Code Source with a "Swap" Example:

http://javascript.internet.com/miscellaneo...nd-preload.html

December 20, 2003

aryImages[0] = "' . (DIR_WS_IMAGES . $product_info_values['products_image-0']) . '";
aryImages[1] = "' . (DIR_WS_IMAGES . $product_info_values['products_image-1']) . '";

should be

aryImages[0] = "<?php echo DIR_WS_IMAGES . $product_info_values['products_image-0']; ?>";
aryImages[1] = "<?php echo DIR_WS_IMAGES . $product_info_values['products_image-1']; ?>";

Hth,

Matt

DoctorLarry · December 20, 2003

Thanks ! :D It's Almost Perfect ! However, I still need query of function info ???

Using the suggested "Should Be" code revision now returns the correct image directory, however, It's not including the database image. It's showing the broken image's url as incomplete. i.e. just http:/server/catalog/images/ instead of the full http:/server/catalog/images/product.jpg

I believe this is due to the fact that there's no previously defined query or function within the script itself to include the $product_info_values['products_image'] in the image's url.

In other words, shouldn't there also be a statement like:

<?php
 $product_info = tep_db_query("select p.products_id, p.products_image");
?>

OR Something Like:

  function tep_get_products_image($product_id, $product_info_values) {
       $product_query = tep_db_query("select p.products_image);
   $product = tep_db_fetch_array($product_query);
   return $product_info_values['products_image'];
 }

AND placed previously somehow in the script itself ?

Perhaps just before or just after

<!-- Begin

Again, I'm just guessing as to what the problem might be... :blink:

Any Idea's as to what the solution is ??? Thanks in adavance , Doc

PS: I hate being this close yet so far away !!!

December 21, 2003

The simplest way would probably be to move the existing query prior to the javascript and add the images to it as necessary. However, here is code to do it if you can't get that to work:

$product_info_values_query = tep_db_query("select products_image-0, products_image-1 from " . TABLE_PRODUCTS . " where products_id = '" . (int)$products_id . "'");
$product_info_values = tep_db_fetch_array($product_info_values_query);

Note: if it stops showing the info on the page, then you probably should take out this code and look for an existing query to modify. You can put this code anywhere prior to the first echo (even in the same PHP block so long as it is before the echo).

Hth,

Matt

Swap Image(s): Need Help Defining JavaScript / PHP

Recommended Posts

DoctorLarry

Guest

DoctorLarry

Guest

Archived

Browse

Activity