[SOLVED] Stop clicking on product thumbnail opening direct path to larger JPG image

[morepork]

Hi,

I'm very new to Prestashop and have just downloaded and installed the latest version 1.2.5 and have spent the weekend adding products, customising etc. I have had some experience previously customising an X Cart store and can find my way around code reasonably well enough to make changes etc. Prestashop is terrific and a real joy to use I am very impressed with the out of the box feature set and how quickly we should be able to get our store up and running. :-)

My question relates to the Product Page: I have the zoom feature enabled and when I mouseover the thumbnails, I see the larger image appear in the main image box above - and if I mouseover that, I can scroll around the magnified section of the image etc. That's all good.

However, when I have more than one image loaded for a product (a calendar for example, where I have one image for each month/page) I get the small row of thumbnails with the left and right arrows which allow me to scroll the row from side to side - once again, that's fine.

BUT if, rather than mousing over a thumbnail, I click it, a larger image opens directly in the browser window (the URL in the address bar is the direct path to my image - the latter part of which appears like this: /img/p/42-144-thickbox.jpg).

As we are selling artwork and photo images, I would rather not allow visitors to see my large images directly in a fresh browser window, but cannot see where the code that governs this is located. I have looked in themes/prestashop/product.tpl but am not sure what to change.

Can anyone help? I hope I have expressed my problem adequately...

[rocky]

You need to change line 117 of product.tpl:

<a href="{$link->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}">

You can {* comment out *} the {if !$jqZoomEnabled}thickbox{/if} part if you want to display the image in a thickbox instead of a separate page. You can change 'thickbox' to 'large' if you want to display the same size picture in the thickbox instead of the bigger one. People will still be able to access the thickbox image by copying the image URL and changing the suffix to -thickbox.jpg though. To stop this, you will need to go to Preferences > Images, then delete the thickbox size and regenerate the thumbnails.

[morepork]

That's great Rocky, certainly preferable to seeing the full image in its own window. Is there, however, a way to prevent the link opening an image at all - still retaining the mouseover to change the main image above - but removing the link altogether? Or is it necessary in some way, for when the jqZoom is not enabled?

[rocky]

Yes, I thought about it some more and came up with a solution to prevent the click from executing. Replace line 117 of product.tpl with the following:

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

[css1404]

Rocky you are very good for this Prestashop.I read all your forums and all the time found some thing helpfull there.Wish you best of Luck.

[rocky]

Thank you for your support. I'm just trying to make a living off doing Prestashop websites and modules by learning as much as I can about the system. I feel good when I help others by using my experience to solve challenging programming problems.

[morepork]

:-) Great stuff, thanks Rocky! Works beautifully... And I can always go back and use your first solution if I prefer the overlayed box with the next and previous links capabilities...

[tlandru]

Perfect

[netman]

Rocky, You seem to be the expert on thickbox. Do you know a way to scroll the thickbox instead of the background? The problem is when the thinkbox is bigger than the openning window you can only see part of the thickbox. You seem getting stuck, no thickbox navigation.

Can you help on this? Thanks

[rocky]

Unfortunately, I can't. To add scrollbars, you must specify a fixed height for an element that is smaller than the full height of the element. I'm not aware of any way to get the viewport height and change CSS based on that. Perhaps it is possible with Javascript, but I've never done it before.

[netman]

Thanks. I have figured out a way to scroll the thickbox. Change the css #TB_window from fixed to absolute. Then the thickbox scrolls with the background.

[PAYGwebsites]

Hi rocky im hoping you could possible help me, www.tandsimports.co.uk when your on a product with more than one image the thumbs will be under the product image what im looking to do is click the thumb and it display in product image box rather than in a seperate page.

Thanks in advance
Anthony

[rocky]

Did you try my solution above?

[PAYGwebsites]

Did you try my solution above?

Yes i tried that with no change.

thanks
Anthony

[rocky]

I had a closer look and this bug has been fixed on SVN. The solution is to change line 117 of product.tpl in your theme's directory from:

<a href="{$link->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}">

to:

<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}">

[PAYGwebsites]

I had a closer look and this bug has been fixed on SVN. The solution is to change line 117 of product.tpl in your theme's directory from:

<a href="{$link->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}">

to:

<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}">

Hi now it came up with code on the page check screen shot, Thanks
Anthony

[PAYGwebsites]

Its ok i have managed to sort it, i must have already edited the page before hand so i put original one and change the suggested and it works, thanks for all your help.

Anthony

[TimC]

I don't get it. I just want Prestashop to stop opening a new window or a thickbox on clicking the thumbnails or the big picture above (but keeping the mouseover effect). Your onclick="return false" suggestion doesn't seem to have any effect...

[rocky]

This bug has been fixed in Prestashop v1.3.

[TimC]

I have finally installed version 1.3, but the problem still isn't solved. When you click the thumbnail or larger product image you get a grey screen with an progression indicator bar (or whatever you call that thing), as if the image isn't able to load.
When I use JqZoom instead of Thickbox the problem is solved. But then I get this magnification window when I hover over the larger image. Which I don't want either. I would be able to live with it if the picture was actually magnified, but instead it is just showing a big fat X...

Could you please please help me one more time, Rocky?!

EDIT: finally found it! Removed the "class".

getImageLink($product->link_rewrite, $imageIds)}" rel="other-views" onclick="return false" title="{$image.legend|htmlspecialchars}"> 

[joshsherm]

I cannot find the below code anywhere in themes/prestashop/Product.tpl to make this fix

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}">

Any info rocky?

[rocky]

I found it on line 118 on my PrestaShop v1.3.1 installation:

<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}">

[joshsherm]

Rocky if you get a moment, please check the attached file (My product.tpl)
.... Theres no code like that to replace, other then on line 100 ...

<!-- product img-->

{if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>
{else}

[rocky]

I don't see an attached file. Can you attach product.tpl rather than pasting the contents?

[Nabeel Aejaz]

Thank you Rocky! Owe you big time.

[joshsherm]

Rocky, my product.tpl can be seen at http://decorhousing.com/product.tpl
i can't find that code anywhere

[rocky]

I found this code on line 118 of your product.tpl file:

<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}">

Are you sure you are viewing the file as plain text, not HTML?

[dustinfrost]

Gents:

I've been working very hard to try and get the link for "View full size" working. I verified that thickbox has been created via Preferences->Image. I've also verified that when clicking Regenerate thumbnails the /img/p/ have been created properly. I've made sure that Enable JqZoom instead of Thickbox on product page via Preferences->Products is set to No (If I check yes jqZoom works properly). I've reviewed 15 or 20 threads on this forum in an attempt to try and resolve this problem but cannot seem to find the solution. When I click the link View full size nothing happens? Any thoughts on this? Thank you!

[DonLuciano]

Thank you Rocky! You,...well.....rock!