float: left;
#thumbs_list li { float: left; height: ХХpx; width: ХХpx;}
Для блока с изображениями создатьКод: [Выделить]float: left;для элементов списка такжеКод: [Выделить]#thumbs_list li { float: left; height: ХХpx; width: ХХpx;}
<!-- product img--> <div id="image-block" class="clearfix{if isset($images) && count($images) > 0} is_caroucel{/if}"> {if $product->new} <span class="new-box no-print"> <span class="new-label">{l s='New'}</span> </span> {/if} {if $product->on_sale} <span class="sale-box no-print"> <span class="sale-label">{l s='Sale!'}</span> </span> {/if} {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, 'tm_thickbox_default')|escape:'html':'UTF-8'}" itemprop="url"> <img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'tm_large_default')|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, 'tm_large_default')|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}" width="{$largeSize.width}" height="{$largeSize.height}"/> {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> <!-- end image-block --> {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) > 0} <a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}"> {l s='Previous'} </a> {/if} <div id="thumbs_list" float: left;> <ul id="thumbs_list_frame"> {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}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'tm_large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'tm_thickbox_default')|escape:'html':'UTF-8'}'{literal}}{/literal}" {else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'tm_thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}" {/if} title="{$imageTitle}"> <img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'tm_cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" /> </a> </li> {/foreach} {/if} </ul> </div> <!-- end thumbs_list --> {if isset($images) && count($images) > 0} <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}"> {l s='Next'} </a> {/if} </div> <!-- end views-block --> <!-- end thumbnails -->
Стили в файлах css меняют. В дефолтной теме для страницы заказа в файле product.css.
#thumbs_list { overflow: hidden; width: 86px; height: 662px; } @media (min-width: 992px) and (max-width: 1199px) { #thumbs_list { height: 360px; } } @media (min-width: 768px) and (max-width: 991px) { #thumbs_list { height: 245px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #thumbs_list { height: 357px; width: 86px; } } @media only screen and (max-width: 479px) { #thumbs_list { height: 189px; } } #thumbs_list ul#thumbs_list_frame { list-style-type: none; padding-left: 0; overflow: hidden; margin: -10px 0 0 0; } @media (min-width: 992px) and (max-width: 1199px) { #thumbs_list ul#thumbs_list_frame { margin-top: -5px; } } @media (min-width: 768px) and (max-width: 991px) { #thumbs_list ul#thumbs_list_frame { margin-top: -3px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #thumbs_list ul#thumbs_list_frame { margin-top: -4px; } } @media only screen and (max-width: 479px) { #thumbs_list ul#thumbs_list_frame { margin-top: -16px; } } #thumbs_list li { float: left; height: 86px; width: 86px; cursor: pointer; margin-top: 10px; line-height: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 992px) and (max-width: 1199px) { #thumbs_list li { margin-top: 5px; } } @media (min-width: 768px) and (max-width: 991px) { #thumbs_list li { margin-top: 3px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #thumbs_list li { margin-top: 4px; } } @media only screen and (max-width: 479px) { #thumbs_list li { margin-top: 16px; } } #thumbs_list li a { display: block; border: 1px solid #e3e3e3; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fbfbfb; } #thumbs_list li a:hover, #thumbs_list li a.zoomThumbActive { border-color: #a3a3a3; } #thumbs_list li img { width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
