[ASTUCE] - Affichage Verticale des Miniatures - (Page Produit)

[Vinc3nzo]

Bonjour,

Je vous partages une petite astuce (Grand Merci au Foum et à Vous) pour afficher en Verticale sur votre page Produit, les petites images (thumbs_list) au lieu d'un affichage Horizontal.

 

Ceci, une fois appliqué, ils vous faudras modifiez votre "product.css"

 

Cette modification fonctionne sur Prestashop 1.5.

 

 

 

 

Ouvrir => /thèmes/defaut/js/product.js

 

Ligne 481:

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});

Remplacer par:

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});

 

 

Ligne 492:

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight')); $('#thumbs_list_frame').width((parseInt((thumb_width)* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?

Remplacer par:

var thumb_height = $('#thumbs_list_frame >li').height()+parseInt($('#thumbs_list_frame >li').css('marginRight')); $('#thumbs_list_frame').height((parseInt((thumb_height)* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?

 

OUVRIR => /thèmes/default/css/product.css

 

Ligne 7:

#pb-right-column {float: left;width: 266px;}

Remplacer par:

#pb-right-column {float: left;width: 350px;}

 

Ligne 46:

#pb-right-column #views_block {margin-top: 10px;width: 266px;}

Remplacer par:

#pb-right-column #views_block {margin-top: 10px;height: 266px;width:80px;float:left}

 

Ligne 51:

#thumbs_list {float: left;margin-left: 4px;overflow: hidden;width: 216px;}

Remplacer par:

#thumbs_list {float: left;margin-left: 4px;overflow: hidden;height: 216px;}

 

 

OUVRIR => /thèmes/default/product.tpl

 

Ligne 190 @ 211, Sélectionner et Couper:

	{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}
	<div id="thumbs_list">
		<ul id="thumbs_list_frame">
			{if isset($images)}
				{foreach from=$images item=image name=thumbnails}
				{assign var=imageIds value="`$product->id`-`$image.id_image`"}
				<li id="thumbnail_{$image.id_image}">
					<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, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
					</a>
				</li>
				{/foreach}
			{/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}

Coller le code en dessous de la Ligne 176:

<!-- right infos-->
<div id="pb-right-column">
	<!-- product img-->
	<div id="image-block">
=======COLLER LE CODE ICI=======

 

Ils ne vous restent plus qu'a modifier votre "product.css" a fin d'obtenir l'affichage que vous désirez et remplacer les flêches du scroll par des flêches "haut" "bas" ou tout simplement ajouter un "display:none" pour les désactivés.

Edited September 26, 2012 by Vinc3nzo (see edit history)

[webmaster.success3]

Un grand merci pour ce tuto qui est exactement ce que je cherchais

[sebastienruf]

Excellent tutoriel.

J'ajouterais que pour le fichier product.js en ligne 501(approximativement) il y a également un axe à passer de "x" en "y"

 

Je suis sur PS 1.5.5

 

Merci Beaucoup.

Edited May 1, 2014 by sebastienruf (see edit history)

[lordbdp]

Les modifications vont remplacer la largeur par la hauteur mais comment faire si on souhaite garder les deux et que la sélection se fasse automatiquement selon l'image envoyé ?

[PixGeek]

ça marche pas sur  1.6.1.0.....

[Mediacom87]

ça marche pas sur  1.6.1.0.....

En même temps il y a 3 ans la 1.6 n'existait pas ce qui est donc logique.

[PixGeek]

Si on essaye pas, on y arrive pas.... comme on dit...

 

Tu as un tuyau a me donner Mediacom87?

[vantsal]

Hello à tous,

 

Je suis en 1.6 et j'aimerais également avoir les miniatures à gauche de la photo du produit. Genre Amazon.

 

Quelqu'un aurait une solution, je suis avec le thème de base.

 

Merci d'avance à ceux qui prendront le temps de m'aiguiller vers une solution.

 

A bientôt j'espère.