Thumbnails In Product Page

[radus]

Hi,

 

How can I display product thumbnails on 1 line only ?

 

Thanks,

 

R

[Bill Dalton]

In your product.tpl, look for code like this,

 

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

	 <div class = 'container'>

  <div class = 'iosSlider'>

   <div class = 'slider'>
					    {if isset($images)}
						    {foreach from=$images item=image name=thumbnails}
						    {assign var=imageIds value="`$product->id`-`$image.id_image`"}
						    <div id='item'>
								 {if $jqZoomEnabled}
								   <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'zoom')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}" rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
									    <img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'larg-mini')}" alt="{$image.legend|htmlspecialchars}"/>
								    </a>
							    {else}
						    <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}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'larg-mini')}" alt="{$image.legend|htmlspecialchars}"  />
  </a>
							    {/if}
						    </div>
						    {/foreach}
					    {/if}
				    </div>
   {if isset($images) && count($images) > 3} <div class = 'next2'></div>{/if}
   {if isset($images) && count($images) > 3} <div class = 'prev2 unselectable2'></div>{/if}

			    </div>
			    </div>

</div>

 

Has it been commented out?

 

A link to your site would help as well.

[vekia]

radus please give us reply even if Bill Dalton solution works for you

[radus]

Bill, many thanks for taking your time. Link to page is here and my code, below.

 

Sadly, I could not align the thumbnails and make them display 3 in a line, and arrows if they are more.

 

Again many thaks in advance for your help

 

Radu

 

 

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

<!-- thumbnails -->

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

{if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}

<link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" />

<div id="thumbs_list">

<ul id="thumbs_list_frame">

{if isset($images)}

<figure itemscope itemtype="http://schema.org/ImageObject">

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

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

<li itemprop="thumbnail" id="thumbnail_{$image.id_image}">

<a itemprop="url" href="{$link->getImageLink($product->link_rewrite, $imageIds, thickbox_default)}" title="{$image.legend|htmlspecialchars}" hreflang="{$lang_iso}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}">

<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" title="{$image.legend|htmlspecialchars}" alt="{$image.legend|htmlspecialchars}" id="thumb_{$image.id_image}" height="{$mediumSize.height}" width="{$mediumSize.width}" /><figcaption itemprop="caption">{$image.legend|htmlspecialchars}</figcaption>

 

{/foreach}

</figure>

{/if}

</ul>

</div>

{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}

</div>

{/if}

{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

<!-- usefull links-->

[Bill Dalton]

You seem to be missing from Product.tpl

 

<div class = 'iosSlider'>

 

<div class = 'slider'>

 

Also in product.js you are missing the needed references. So this seems to be the way your theme was designed. You could spend several hours copying the needed code from the default PS theme. Or I recommend you post in the paid help forum. You could have this fixed for very little.

 

Or you can install Magic Scroll

http://www.magictoolbox.com/magicscroll/modules/prestashop/

 

Very little cost.