Jump to content

[SOLVED] Thumbs on product list

sokpet
 Share

Recommended Posts

sokpet Newbie

sokpet

Posted
Posted

Anybody succeded to make thumbs with zoom on product list page?

 

The idea is that product page is always hidden and the client buys directly from product list page. So everything is done, only thing which is missing is how to move the exactly the same image preview system that is used on product page for product-list page. I mean one photo with thumbs and enlarger....

 

Any ideas?

Link to comment
Share on other sites
sokpet Newbie

sokpet

Posted
  • Author
Posted

I saw many people asking this feature,

 

I can not believe that Presta Teams can not help...

 

Why it is so complecated to place product "image-thumb-fancybox" box, in any place that needed.

 

Nobody tried to place it on product-list.tpl for version 1.4 ?

 

Thanks in advance for those who could give at least some hints...

Link to comment
Share on other sites
sokpet Newbie

sokpet

Posted
  • Author
Posted

Thank you Mike

 

this is already something.

 

Thanks to razaro´s suggestion I changed product-list as follows:

 

this part goes on top

 

{if isset($products)}

<script type="text/javascript" src="{$content_dir}js/jquery/jquery.fancybox-1.3.4.js"></script>
<link media="screen" type="text/css" rel="stylesheet" href="{$content_dir}/css/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript">
{literal}

$(document).ready(function()
{
   $('.thickbox').fancybox({
       'hideOnContentClick': true,
       'transitionIn'    : 'elastic',
       'transitionOut'    : 'elastic'
   });
});
{/literal}
</script>

 

an in the part where image is:

 

           	 <div class="product_img_link">
           <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" class="thickbox" alt="{$link->getImageLink($product.link_rewrite, $product.id_image, 'thickbox')}" />	   
			 </div>

 

 

Like that I could initialize fancybox on product-list, but it says "The requested content can not be loaded"

 

What else is missing?

 

Another problem is how to plug in thumbs.... I tried different ways but it does not work.

 

Any hint please?

Link to comment
Share on other sites
sokpet Newbie

sokpet

Posted
  • Author
Posted

Hello Mike,

 

 

surely I will ask razaro if he can help. Thumbnails are perfectly generated and working on poduct page (as it should be).

 

The problem is how to move it on product-list page as well.

 

Any suggestions would be kindly welcome.

 

Thanks

Link to comment
Share on other sites
razaro Proficient

razaro

Posted
Posted

Hi sokpet

 

To show fancybox you need anchor tag so code where image is 

<a href="{$link->getImageLink($product.link_rewrite, $product.id_image, 'thickbox')}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>

and then js code is bit defferent

$('.product_img_link').fancybox({
	'hideOnContentClick': true,
	'transitionIn'	: 'elastic',
	'transitionOut'	: 'elastic'
});

 

this is for default theme so maybe you need to change it a little.

Just note class of anchor tag is used in js code to call fancybox.

 

Also if you using Prestashop version 1.4.x you should override appropriate controller

and use addCSS and addJS functions.

 

And for main question, adding thumbnails to product-list, I think that there are some

solutions on forum, but it does need some work to do it.

What is needed is to pass images, for each product, to category page for example.

That can probably be done by overriding CategoryController and making multiarray $product_images

where key will be productID and value will be array of images for product with same ID.

 

This is just idea and if I find solution for this will post it .

Link to comment
Share on other sites
sokpet Newbie

sokpet

Posted
  • Author
Posted

Thanks razaro

 

yes, this is version 1.4.4.6

 

the only controllers to change that I can see it is ProductController.php and could be FrontController.php and also ParentOrderController.php,

 

do you mean to change "order" of addCSS and addJSS in ProductController.php for setMedia function?

 

Unfortunarely could not find appropriate solution for thumbnails. There were several discussions but without result. I will check again.

 

 

What is needed is to pass images, for each product, to category page for example.

That can probably be done by overriding CategoryController and making multiarray $product_images

where key will be productID and value will be array of images for product with same ID.

 

I will give it a try, if I have some news or results I will post it.

 

Thanks you again

Link to comment
Share on other sites
sokpet Newbie

sokpet

Posted
  • Author
Posted

Moved and tested on 1.4.6.2 fancybox for main image works fine...

 

For thumbs I changed as follows:

 

 

               	 {foreach from=$products item=image name=images}
			    <div class="pl-thumbs1">
                       <a href="{$link->getImageLink($product.link_rewrite, $product.id_image, 'thickbox')}" rel="other-views" class="pl-thumbs" title="{$image.legend|htmlspecialchars}">
                           <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')}" alt="{$image.legend|htmlspecialchars}" height="{$smallSize.height}" width="{$smallSize.width}" />
                       </a>
				    </div>
                   {/foreach}

 

but it does not run properly... shows duplicated thumbs, opens well with fancybox, in fancybox mode it scrolls over all images on the page.....

 

 

any hint please.....???

Link to comment
Share on other sites
  • 2 weeks later...
Mike Kranzler Newbie

Mike Kranzler

Posted
Posted

Never mind Marty.

--------------------------------------

 

Very funny Mike.... :P

 

isn't it obvious? B.R = Best Regards.

 

ok, as you wish...no more "politeness" here... ^_^

 

 

Ahhh I see. For some reason that one didn't register with me (or Marty either, I guess). But (best) regardless, thanks for your updates on this thread, and we look forward to seeing what changes you have made!

 

-Mike

Link to comment
Share on other sites
  • 4 months later...
ricardoahf Newbie

ricardoahf

Posted
Posted (edited)

The task is done.

 

Unfortunately that was not just to change one controller, it much more complicated

 

Finally I have it. If somebody needs the same I have ready solution. (pm me for details.)

 

B.R.

 

hello...you could tell me how you did it .. i have the same problem

Edited by ricardoahf (see edit history)
Link to comment
Share on other sites
  • 4 months later...
janekbar5 Newbie

janekbar5

Posted
Posted

for all who wants to display all images on product-list.tpl

1 follow this thread

http://www.prestashop.com/forums/topic/96085-rollover-image-in-product-list/

2 download rollover.zip provided by DGV Posted 06 August 2012 - 02:07 AM

3 unpack zip upload files

4 open uploaded file override/classes/Category.php

change this:

SELECT * from `'._DB_PREFIX_.'image`

WHERE id_product="'.$product_id.'"

ORDER BY `position`

LIMIT 0,2

 

to that:

SELECT * from `'._DB_PREFIX_.'image`

WHERE id_product="'.$product_id.'"

ORDER BY `position`

 

 

all images should appear on product-list.tpl

Link to comment
Share on other sites
  • 4 weeks later...
Strangelove Newbie

Strangelove

Posted
Posted

Hi, I already managed to get thumbnails on product-list and fancybox working. But I have a problem now:

when hovering thumbnails it should load it's image on #bigpic but it's loading all thumbnails on first product #bigpic.

 

I already managed to change #bigpic id.

 

 

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" class="jqzoom" alt="{$link->getImageLink($product.link_rewrite, $product.id_image, 'thickbox_default')}" title="{$product.name|escape:'htmlall':'UTF-8'}" id="bigpic_{$product.id_product}" width="{$largeSize.width}" height="{$largeSize.height}" />

 

Now works like this: Product 1 #bigpic_1; Product 2 #bigpic_2; Product 3 #bigpic_3; etc.

 

The only thing left is editing the .js so thumbnails will be loaded at its corresponding product #bigpic_

 

It has to be here but I can't figure it out, I can't manage to get product-id variable on product.js:

 

 

function displayImage(domAAroundImgThumb, no_animation)

{

 

if (typeof(no_animation) == 'undefined')

no_animation = false;

 

if (domAAroundImgThumb.attr('href'))

{

 

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

 

 

if ($('#bigpic).attr('src') != newSrc)

{

$('#bigpic).fadeOut((no_animation ? 0 : 'fast'), function(){

$(this).attr('src', newSrc).show();

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)

$(this).attr('alt', domAAroundImgThumb.attr('href'));

});

}

$('#views_block li a').removeClass('shown');

$(domAAroundImgThumb).addClass('shown');

}

}

 

 

 

Can anyone help me, please?

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...