Fancybox product image on product-list

[Bartjuh1994]

Hi all,

 

I want to open a fancybox with the product image on the product-list page. So, i've added the next code to the Frontcontroller (The fancybox works with this)

 

// Execute Hook FrontController SetMedia
Hook::exec('actionFrontControllerSetMedia', array());
$this->addjqueryPlugin('fancybox');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all');}

 

BUT.

 

I've added this code to my product-list.tpl, the fancybox opens with an image but only the first image of the page. Not the right product image (All images for the whole page are the same).

<a href="#inline1" class="show-fancybox" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />";
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>


<div style="display:none">
<div id="inline1" style="width:400px;">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}"	 height="{$homeSize.height}"{/if} />
</div>
</div>
<script type="text/javascript">/* <![CDATA[ */$('a.show-fancybox').fancybox();/* ]]> */</script>

 

The code above is inside the foreach tags.

 

PS. When i remove the <div style="display: none"> </div>, then Prestashop shows the right image..

 

I hope someone can help me.

Thanks in advance

[greeshmashivadas]

This issue is due to the <div id="inline1" style="width:400px;"> . The id being taken is of the first element of the loop. Try giving div id appending the product id .

 

<a href="#inline{$product.id_product}" class="show-fancybox" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />";

{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

</a>


<div style="display:none">
<div id="inline{$product.id_product}" style="width:400px;">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}"     height="{$homeSize.height}"{/if} />
</div>
</div>
<script type="text/javascript">/* <![CDATA[ */$('a.show-fancybox').fancybox();/* ]]> */</script>