multiple image layout questions

[wygk]

I have a client who wants a very specific layout on the product page. I've seen high-end e-commerce sites that work this way, but I'm not even sure it's possible with Zen-Cart... I'm searched through the forum and the documentation and I can't find anything that seems relevant.

Here's what she wants:

(1) On the product page, show a LARGE image right on the page... no "click to enlarge"

(2) Also show THUMBNAILS of additional images. Clicking the thumbnails should replace the LARGE image

Any pointers on how this could be accomplished?

Thanks very much!

[niccol]

Zen Cart uses the 'medium image' size on the product info page. The size of the 'medium image' can be set in admin>>configuration>>images to whatever you want it to be (assuming that your uploaded images are big enough).

Look at tpl_modules_main_product_image.php (includes/templates/yourtemplate/templates) It is fairly straight forward how to disable the pop-up and leave only the image.

You are looking at:

<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($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<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>

Change it to something like:

<div id="productMainImage" class="centeredContent back">
<?php
  echo zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);
?>
</div>

Putting the image where you want will involve changing the line:

<div id="productMainImage" class="centeredContent back">

to

<div id="productMainImage" class="centeredContent forward">

There is a quite a bit more programming involved in getting the additional image thumbnails to behave the way you want but perhaps someone has done it before.....

Fingers crossed.