how to display all image in big size on product page?

[weizai_1985]

Any one can help me  that how to display all image in big size on product page?

 

example like this

 

http://3x1.us/shop-women/w4-super-high-rise-shelter-slim-pillars/

 

many thanks

 

this is the product.tpl for the image colum

 

<div id="pb-right-column" class="col-lg-5 col-md-5 col-sm-5 col-xs-12">

<!-- product img-->

<div id="image-block">

{if $have_image}

<span id="view_full_size">

{if $jqZoomEnabled && $have_image && !$content_only}

<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_m')|escape:'html':'UTF-8'}" itemprop="url">

<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_m')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>

</a>

{else}

<img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_m')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>

{if !$content_only}

<span class="span_link no-print">{l s='View larger'}</span>

{/if}

{/if}

</span>

{else}

<span id="view_full_size">

<img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>

{if !$content_only}

<span class="span_link">

{l s='View larger'}

</span>

{/if}

</span>

{/if}

</div>

{if isset($images) && count($images) > 0}

<!-- thumbnails -->

<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">

<div id="thumbs_list">

<ul id="thumbs_list_frame" style="width:auto !important;">

{if isset($images)}

{foreach from=$images item=image name=thumbnails}

{assign var=imageIds value="`$product->id`-`$image.id_image`"}

{if !empty($image.legend)}

{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}

{else}

{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}

{/if}

 

<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>

<a {if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_m')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_m')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if} thickbox"{/if} title="{$imageTitle}"><img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" itemprop="image" /></a>

</li>

{/foreach}

{/if}

</ul>

</div> <!-- end thumbs_list -->

</div> <!-- end views-block -->

<!-- end thumbnails -->

{/if}

{if isset($images) && count($images) > 1}

<p class="resetimg clear no-print">

<span id="wrapResetImages" style="display: none;">

<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" name="resetImages">

<i class="icon-repeat"></i>

{l s='Display all pictures'}

</a>

</span>

</p>

{/if}

</div>