X-Cart forums

[frank678]

I have 2 to 3 images for each product. 1 main one that is used for the Product Image and 1 or 2 alternate views of the same product.

I would like to have thumbnails of "alternate views" placed under the Product Image with either...

1. Popup when the alternate view thumbnail is clicked.

OR, even better...

2. When the alternate view thumbnail is clicked, the Product Image is repaced with the full size image of the alternate image.

Any ideas on how I can do this?

Thank you!

[Yurij]

You use a module "Detailed images" for adding additional pictures for the products?

[frank678]

With detailed images module, it doesn't generate thumbnails under the product image for the alternate view images. It just gives me a link for a popup.

[Yurij]

Originally Posted by frank678

I have 2 to 3 images for each product. 1 main one that is used for the Product Image and 1 or 2 alternate views of the same product.

I would like to have thumbnails of "alternate views" placed under the Product Image with either...

1. Popup when the alternate view thumbnail is clicked.

OR, even better...

2. When the alternate view thumbnail is clicked, the Product Image is repaced with the full size image of the alternate image.

Any ideas on how I can do this?

Thank you!

1. Popup when the alternate view thumbnail is clicked.

Open file "skin1/customer/main/product.tpl" and find next lines:

PHP Code:

{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl"}
{elseif $product.force_image_type eq 'W' && $product.variantid}
{include file="product_thumbnail.tpl" productid=$product.variantid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="W"} 
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"} 
{/if}
{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && $zoomer_images ne '' && $js_enabled eq 'Y'}
{include file="modules/Magnifier/popup_magnifier.tpl"}
{/if} 


After insertnext code:

PHP Code:

{if $images ne ""}
        <table width="100%">
        {section name=image loop=$images}
        <tr>
        <td align="center">
        <a href="javascript: void(0);" onclick="javascript: popup_image('D', '{$product.productid}', '{$max_x}', '{$max_y}', '{$product.product|escape:"url"}');">
        {include file="product_thumbnail.tpl" productid=$product.productid image_x=100 product=$product.product tmbn_url=$images[image].image_path type="P"}
        </a>
        </td>
        </tr>
        {/section}
        </table>
    {/if} 


[frank678]

I've implemented this with just a slight change so that the images appear next to each other rather than under each other...just moved the <tr> tag above and below the <section> tags.

One problem I am running into now is that on some products I have about 6 detailed images. As it is, they are all appearing on the same row and pushing everything else to the right.

My question: Is there any way to tell the script to put 3 images across then start a new row if there are more than 3 images to a row?

Hope that is clear...

Thank you in advance for your help!

[Yurij]

Originally Posted by frank678

I've implemented this with just a slight change so that the images appear next to each other rather than under each other...just moved the <tr> tag above and below the <section> tags.

One problem I am running into now is that on some products I have about 6 detailed images. As it is, they are all appearing on the same row and pushing everything else to the right.

My question: Is there any way to tell the script to put 3 images across then start a new row if there are more than 3 images to a row?

Hope that is clear...

Thank you in advance for your help!

Try to help you later, there is no free time for that.

[MBA]

Why are you putting images inside of a table? table = tabular... you only use table tags for data... never images. You can recover some cart speed by using this trick.

instead of table tags use div tags and limit your image by adding style comment to your image i.e. style="float:left"

example:

<div style="whatever-you-want;">
<img src"./images/D/xxxxxxxx.jpg" style="width:70px; height:70px; float:left; what-ever-else-you-want;" />
</div>

Just use similar code to this around the smarty tags and you'll start to sort out how to control your images a lot better.

[frank678]

Originally Posted by MBA

Why are you putting images inside of a table? table = tabular... you only use table tags for data... never images. You can recover some cart speed by using this trick.

instead of table tags use div tags and limit your image by adding style comment to your image i.e. style="float:left"

example:

<div style="whatever-you-want;">
<img src"./images/D/xxxxxxxx.jpg" style="width:70px; height:70px; float:left; what-ever-else-you-want;" />
</div>

Just use similar code to this around the smarty tags and you'll start to sort out how to control your images a lot better.

Hi thanks for the reply. I am a novice so appreciate the info.

But what I am running into is that I want each image to appear in a horizontal row then wrapping to the next row after "x" number of images in a row.

By putting the div tag within the loop tag, wouldn't that cause each image to appear in a new row/under the previous image? Is there a way to accomplish what I am trying to do without using the table tag?

Thanks for your help!

[frank678]

Originally Posted by Yurij

1. Popup when the alternate view thumbnail is clicked.

Open file "skin1/customer/main/product.tpl" and find next lines:

PHP Code:

{if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl"}
{elseif $product.force_image_type eq 'W' && $product.variantid}
{include file="product_thumbnail.tpl" productid=$product.variantid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="W"} 
{else}
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail" type="P"} 
{/if}
{if $active_modules.Magnifier ne "" && $config.Magnifier.magnifier_image_popup eq 'Y' && $zoomer_images ne '' && $js_enabled eq 'Y'}
{include file="modules/Magnifier/popup_magnifier.tpl"}
{/if} 


After insertnext code:

PHP Code:

{if $images ne ""}
        <table width="100%">
        {section name=image loop=$images}
        <tr>
        <td align="center">
        <a href="javascript: void(0);" onclick="javascript: popup_image('D', '{$product.productid}', '{$max_x}', '{$max_y}', '{$product.product|escape:"url"}');">
        {include file="product_thumbnail.tpl" productid=$product.productid image_x=100 product=$product.product tmbn_url=$images[image].image_path type="P"}
        </a>
        </td>
        </tr>
        {/section}
        </table>
    {/if} 


I tried the above code but took out the table tags and just did the following

{if $images ne ""}
{section name=image loop=$images}
<a href="javascript: void(0);" onclick="javascript: popup_image('D', '{$product.productid}', '{$max_x}', '{$max_y}', '{$product.product|escape:"url"}');">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=100 product=$product.product tmbn_url=$images[image].image_path type="P"}
</a>
{/section}
{/if}

The problem I am having is that they are being rendered differently in FF3 and IE7.

On FF3, it works fine and images appear next to each other then wraps to the next line as necessary. On IE7, only one image appears on a line then the next image moves to the next line so that I have 6 images on 6 different lines even though there's plenty of room on a line to show 3 images as it does on FF3.

Does anyone know what may be causing the difference between IE7 and FF3?

[nivag]

did anyone manage to get this to work properly ?