Jump to content

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


Recommended Posts

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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

:-) 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...

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
  • 3 months later...

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

19484_jZrboeRPInNE0js6EsmF_t

Share this post


Link to post
Share on other sites
  • 3 weeks later...

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...

Share this post


Link to post
Share on other sites
  • 2 months later...

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

24982_kslVDANSWYQnsfRKaidv_t

24983_tnqTXViN5rcE1sxPamiL_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
  • 11 months later...

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!

Share this post


Link to post
Share on other sites
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More