X-Cart forums

[elabdesigns]

Does anyone have a mod to make the product thumbnail within the product details page have a zoom feature?


For ex:

http://www.mayberrycandles.com/zoomsuggest.gif

So when they click on the "Click to Zoom" or the image a pop up window appears with a larger image?


Thanks,

Jay

[slimmedia]

We do something sort of like that.

http://www.demolaystore.com/customer/product.php?productid=146&cat=35&page=1

It's basically a hack of the "detailed product images" feature. The alt text becomes the text of the link. For example: "Click to Zoom". The cool thing is that you can have more than one pic if you want. For example "Click to Zoom", "Click to see the Back", "Click to see the special detail that makes the product really cool."

I made a new template: "/skin1/modules/Detailed_Product_Images/product_images_links.tpl" Here's the code:

{if $images ne ""}
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
[img]{$ImagesDir}/go_arrow.gif[/img] {$images[image].alt}

{/if}
{/section}
{/if}

Then, I added the following code to "/skin1/customer/main/product.tpl" right below the thumbnail.

{if $active_modules.Detailed_Product_Images ne ""}{include file="modules/Detailed_Product_Images/product_images_links.tpl" }{/if}

Then, I deleted the following lines from the bottom of the same file.

{if $active_modules.Detailed_Product_Images ne ""}



{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}

[funkydunk]

nice

[shan]

moved to custom templates

[adpboss]

Another nice mod. Good work!

[DataViking]

hello here is were i put the extra lines in the product.tpl

{* $Id: product.tpl,v 1.59.2.2 2003/01/23 14:37:23 basil Exp $ *}
{literal}
<SCRIPT language=JavaScript1.2>
<!--
function product_option(name_of_option)
{
{/literal}
for(i=0; i<{php}echo count($product_options) {/php}; i++)
if (document.orderform[i].name.search(name_of_option) != -1)
return document.orderform[i];
return -1;
{literal}
}

function FormValidation()
{
{/literal}
{if $javascript_code}
{$javascript_code}
{else}
return true;
{/if}
{literal}
}
-->
</SCRIPT>
{/literal}

{ include file="location.tpl" }
{capture name=dialog}
<table border=0 width=100%>
<form name=orderform method=post action="cart.php?mode=add">
<tr>
<td valign=top align=left rowspan=2 width=100>
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}

{if $active_modules.Detailed_Product_Images ne ""}{include file="modules/Detailed_Product_Images/product_images_links.tpl" }{/if}
</td>

<td valign=top>
<span class=>
{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}
</span>



<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr><td colspan=2><font class=ProductDetailsTitle>{$lng.lbl_details}</font></td></tr>
<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/orangespacer.gif[/img]</td></tr>
<tr><td colspan=2></td></tr>
{if $config.General.show_in_stock eq "Y" and $product.distribution eq ""}
<tr><td width=30%>{$lng.lbl_quantity}</td><td nowrap>{if $product.avail gt 0}{$product.avail}{else}{$lng.txt_no}{/if} {$lng.txt_items_available}</td></tr>
{/if}
{if $product.weight ne "0.00"}<tr><td width=30%>{$lng.lbl_weight}</td><td nowrap>{$product.weight} {$config.General.weight_symbol}</td></tr>{/if}
{if $active_modules.Extra_Fields ne ""}
{include file="modules/Extra_Fields/product.tpl"}
{/if}
{if $active_modules.Subscriptions ne "" and $subscription}
{include file="modules/Subscriptions/subscription_info.tpl"}
{else}
<tr><td class=ProductPriceConverting>{$lng.lbl_price}:</td>
<td>
{if $product.price ne 0}
<font class=ProductDetailsTitle>{include file="currency.tpl" value=$product.price}</font><font class=MarketPrice> {include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.price}</font>{if $config.General.use_vat eq "Y"}, {$lng.lbl_including_vat} {$product.vat}%{/if}
{else}
<input type=text size=7 name=price>
{/if}
</td>
</tr>
{/if}
</table>




<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr><td colspan=2>
<font class=ProductDetailsTitle>{$lng.lbl_options}</font>
</td></tr>
<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/orangespacer.gif[/img]</td></tr>
<tr><td colspan=2></td></tr>
{if $active_modules.Product_Options ne ""}
{ include file="modules/Product_Options/customer_options.tpl"}
{/if}
<tr><td height=25 width=30%>{$lng.lbl_quantity}{if $product.min_amount gt 1}
<FONT class=ProductDetailsTitle>{$lng.txt_need_min_amoun t} {$product.min_amount} {$lng.lbl_items}</FONT>{/if}</td>
<td>
{if $config.General.show_in_stock eq "Y" and ($product.avail le 0 or $product.avail lt $product.min_amount)}
{$lng.txt_out_of_stock}
{else}
{if $config.General.show_in_stock ne "Y"}
{assign var="mq" value=$config.General.max_select_quantity}
{else}
{math equation="min(maxquantity+minamount, productquantity)+1" assign="mq" maxquantity=$config.General.max_select_quantity minamount=$product.min_amount productquantity=$product.avail}
{/if}
{if $product.distribution eq ""}
<select name=amount>
{if $product.min_amount le 1}
{assign var="start_quantity" value=1}
{else}
{assign var="start_quantity" value=$product.min_amount}
{/if}
{section name=quantity loop=$mq start=$start_quantity}
<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>
{/section}
</select>
{else}
<font class=ProductDetailsTitle>1</font><input type=hidden name=amount value=1> {$lng.txt_product_downloadable}
{/if}
{/if}
</td></tr>
<tr><td colspan=2>
<input type=hidden name=mode value=add>
{if $config.General.show_in_stock ne "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}
{include file="customer/main/product_prices.tpl"}
{include file="buttons/add_to_cart.tpl"}

{if $login ne "" and $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
{/if}
</td>
</tr></table>
</td>


<td align=right valign=top width=60>
{if $product.discount ne 0}<table border=0 width=60><tr><td width=55 height=56 class="SaveMoneyLabel" background="{$ImagesDir}/save_money.gif" align=center valign=middle>


{ $product.discount }%
</td></tr></table>{/if}
</td>
</tr>
<input type=hidden name=productid value="{$product.productid}">
<input type=hidden name=cat value="{$smarty.get.cat}">
<input type=hidden name=page value="{$smarty.get.page}">
</form>
</table>

<p align="center">{include file="buttons/sendtofriend.tpl"}</p>
{/capture}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"}

{if $active_modules.Upselling_Products ne ""}



{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}



{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}



{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}


the bold part is were i add it.

but i still can't get it like the site above.
any help please.

[slimmedia]

You probably want to add a
right after the previous line:

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}
 

Other than that, it looks like you've put it in the right spot. I have some other customizations in the product.tpl that may be the difference. What exactly isn't looking right? Want to post a link?

[DataViking]

Thank you slimmedia

I will like to have the link on the text and no on the picture like yours. how can i do that.

i will like to put hight resolution picture but because my fixe width big picture distore the site. that why i will like to have it like yours.

please advice

[slimmedia]

I think I figured out what might be the problem.

You have to add your high resolution pictures to the detailed product images for the product you're wanting the link to appear on.

Log into your admin area.
Go to "Modify Product".
Enter the product number, and click "search".
Select the product and click "Modify".
Scroll down to the "Detailed images" section.
Click Browse and select the file of the high resolution image on your hard drive.
In the "Alternative text" field, enter "Click to Zoom".

That should do it.

If that wasn't the problem, please give more detail on what's wrong.

[DataViking]

slimmedia

in your site you have the hyperlink to the text, not the image.

and when you click on the text it opens a new page.

thats what i'm looking for.

please advice