Автор Тема: fancybox блок миниатюр снизу  (Прочитано 72 раз)

09 Июль 2017, 11:20:53
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Друзья, как переместить блок миниатюр картинок с положения сбоку слева в положение снизу.
09 Июль 2017, 11:45:37
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86534
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для блока с изображениями создать
float: left;для элементов списка также
#thumbs_list li {
    float: left;
    height: ХХpx;
    width: ХХpx;
}
09 Июль 2017, 13:01:58
Ответ #2
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для блока с изображениями создать
float: left;для элементов списка также
#thumbs_list li {
    float: left;
    height: ХХpx;
    width: ХХpx;
}

Пожалуйста, ткни пальцем, куда этот код вставлять?
09 Июль 2017, 14:17:34
Ответ #3
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для блока с изображениями создать
float: left;для элементов списка также
#thumbs_list li {
    float: left;
    height: ХХpx;
    width: ХХpx;
}


Вот код блока fancybox из prooduct.tpl

  <!-- 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 -->

Куда вставлять? ПОЖАЛУЙСТА, подскажите.
09 Июль 2017, 15:26:15
Ответ #4
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
О мудрейшие из добрейших, не оставляйте страждущего на пол пути, пожалуйста.
09 Июль 2017, 15:35:19
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 908
  • Репутация: +10/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Стили в файлах css меняют. В дефолтной теме для страницы заказа в файле product.css.
09 Июль 2017, 17:20:43
Ответ #6
  • Пользователь
  • **
  • Сообщений: 64
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Стили в файлах css меняют. В дефолтной теме для страницы заказа в файле product.css.


Так тут итак
    float: left;
    height: 86px;
    width: 86px;
#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; }
09 Июль 2017, 17:24:47
Ответ #7
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 105595
  • Репутация: +39548/-0
    • Просмотр профиля
    • Webstudio UwK
Адрес сайта какой?
Cоздание интернет сайтов Webstudio UwK