How to click to enlarge product image

[Barrowboy]

Hi
Ref: Product images

Can anyone modify this code to allow me to click image to enlarge.
I am sure its straight forward but just can't crack it.

{if $entry->fields.Product_image->value != ""}
<div class="images" style="clear: both;"><img style="display: block; float: none;" src="uploads/Products/product_{$entry->id}/{$entry->fields.Product_image->value}" width="200" alt="{$entry->product_name}" name="main_image" /></div>
{/if}

I would like to display thumbnail image then enlarge to full size image.

Any help to point me in the right direction would be appreciated.

Thanks

[velden]

This would be the most simple approach but not sure if you want that.

Code: Select all

{if $entry->fields.Product_image->value != ""}
<div class="images" style="clear: both;"><a href="uploads/Products/product_{$entry->id}/{$entry->fields.Product_image->value}"><img style="display: block; float: none;" src="uploads/Products/product_{$entry->id}/{$entry->fields.Product_image->value}" width="200" alt="{$entry->product_name}" name="main_image" /></a></div>
{/if}

Else you would need to use something like Fancybox or Lightbox to popup the image.

I would also consider using CGSmartImage module for the resizing of the 'thumb' image if I were you.
And I think (but not sure) that there is an property in $entry for the path to the image location ({$entry->file_location} perhaps). That would then replace the hard coded 'uploads/Products/product_{$entry->id}'

[Barrowboy]

Thanks for sorting that for me it works fine and I have now managed to add the lightbox feature so I can now move on.

Cheers