Search the Community

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.