[SOLVED] Product Image Enlarge

[hurray]

Hi, I am new to prestashop and need some help. I uploaded a 750x500 pxl image of one of my products. But when I click on it to enlarge, it does not open in its original size. How and where do I need to make changes to open a product's image on its original size when clicked on enlarge image.
Thanks.

[SpyrosT]

You will have to edit the thickbox size.
BO> Preferences> Image

[hurray]

I did that, but it only increased the size of the thickbox but not the image of the product. The image is now slightly bigger than before but it is still not opening at its original size.

[rocky]

To have the original uploaded image display in thickbox instead of resized thickbox images, change line 118 (in PrestaShop v1.3.1) of prdouct.tpl in your theme's directory from:

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

to:

<a href="{$link->getImageLink($product->link_rewrite, $imageIds)}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

and line 277 (in PrestaShop v1.3.1) of js/product.js in your theme's directory from:

var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');

to:

var newSrc = domAAroundImgThumb.attr('href').replace('.jpg','-large.jpg');

[hurray]

Hi Rocky,

The code that I found on my product.tpl at line 118 is something like this

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="{if !$jqZoomEnabled}thickbox{/if} {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

It is slightly different that what you have put above.
What do I need to change in this code?

Thanks.

[rocky]

Just remove the 'thickbox' parameter (including the comma before it).

[hurray]

Thanks Rocky.
You're awesome. It completely solved my issue.
I am still new to Prestashop so I will be posting some issues I am having. So please be patient with me
Thanks again a lot.

[istox]

Hello! It's helped for me too. But one problem! Watermark!

[saint]

I've tried this method and it's not working for me. I have just installed 1.3.7

I'm wondering if I should just code it as to clicking on the smaller size opens a new tab with the full pic watermarked.

[babyewok]

Rocky, I wonder if you can help. I have followed the suggestions in this module to crop my images to a nice square: http://www.prestashop.com/forums/viewthread/15210/installing_prestashop/trick__crop_images_inside_preserve_ratio_no_white_spaces_arround_image

This works just fine. However, I wouldlike to show the image at it's original dimensions (i.e. not cropped) for the thickbox. If I leave it unchanged, the thinckbox image also gets cropped to a square, so I followed your instructions here to show the original image in the thickbox.

HOWEVER, although the cover image for the product loks fine and so do the thicknox images, when I rollover a thumbnail, the bigpic is changed to an images that is sqaushed into the square, rather than cropped. From looking at Firebug, I can see that while the source for the cover image big pic is:

src="/10-106-large/product1.jpg

the image source for big pic when I roll over the thumb i s:

src="/10-106/product1-large.jpg

What do I need to change to get this working so that when the bigpic is changed it is at the same proportions as the cover pic?

[babyewok]

no ideas?

How can I set it to add the -large after the '10-106' or whatever it is?

[babyewok]

Hmm, just thinking about this - is there a way that we can append -original to the original image when it is uploaded then this could be changed to

var newSrc = domAAroundImgThumb.attr('href').replace('original','large'); 

That could work???

[babyewok]

Or maybe create a copy of the original and append -original ????

[outlet.ee]

Rocky,

how to enable the full size on PS1.4? I followed the steps and changed the .tpl and .js files. Now it loads the image in full size but scales it down again in the fancyfox. i.e. the image is in full size but the surrounding fancybox isn't. Must be something in fancybox css /js?

[Luca S.]

Rocky,

how to enable the full size on PS1.4? I followed the steps and changed the .tpl and .js files. Now it loads the image in full size but scales it down again in the fancyfox. i.e. the image is in full size but the surrounding fancybox isn't. Must be something in fancybox css /js?

i have the same problem with 1.4.2.5... the mods was working good but with watermark there was problems ehehe...

[plauengco]

Also having the same problem. Has anyone been able to figure this out for 1.4+? It seems that large images no longer use the "-large.jpg" append.

[cankart]

hi did anyone find the solution?

[teJ20]

did anyone solved this problem? I really need to enlarge images

[Aldeag]

I don´t know if you are looking for this:

http://dapurpixel.com/blog/how-to/enlarge-jqzoom-size-in-prestashop

[yusufzulkarnain]

Hi, Rocky!

After I click a featured product, I have missed the image featured like the screenshot attached. When I opened the image link - http://bajuditoko.com/img/p/37-78-large.jpg I found the page that 404 Not Found.

 

Meanwhile for clicking others, I still can see images of the featured product completely. Help me!

[yusufzulkarnain]

To have the original uploaded image display in thickbox instead of resized thickbox images, change line 118 (in PrestaShop v1.3.1) of prdouct.tpl in your theme's directory from:

 

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

 

to:

 

<a href="{$link->getImageLink($product->link_rewrite, $imageIds)}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

 

and line 277 (in PrestaShop v1.3.1) of js/product.js in your theme's directory from:

 

var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');

 

to:

 

var newSrc = domAAroundImgThumb.attr('href').replace('.jpg','-large.jpg');

Hi, Rocky!

About the image product, when I click any image of the fitured product at homepage, the product image is disappear, meanwhile the thickbox image is no problem. How to appear these product images? I use version 1.4.1

[Trungvision]

To have the original uploaded image display in thickbox instead of resized thickbox images, change line 118 (in PrestaShop v1.3.1) of prdouct.tpl in your theme's directory from:

 

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

to:

 

<a href="{$link->getImageLink($product->link_rewrite, $imageIds)}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">

and line 277 (in PrestaShop v1.3.1) of js/product.js in your theme's directory from:

 

var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');

to:

 

var newSrc = domAAroundImgThumb.attr('href').replace('.jpg','-large.jpg');

 

the original uploaded image 1024x2000px, but image enlarge only 268x525px. how to fix?

Edited November 1, 2013 by Trungvision (see edit history)