вертикальные миниатюры

[Afanasoff]

Подскажите решение или модуль вывода доп. миниатюр товаров вертикальной каруселью.

[Blast]

В 30.09.2024 в 13:33, Afanasoff сказал:

Подскажите решение или модуль вывода доп. миниатюр товаров вертикальной каруселью.

не будет для такого модулей. вопрос чисто верстки, зачастую с прикручиванием swiper или slick. Может быть встроено в какой-то шаблон.

например практически готовый кусок

https://gist.github.com/LuisGMoralesRaya/f09ac47228902459046c480eb1a5d049

демонстрация работы

https://codepen.io/rogerkuik/pen/abZOLXr

только в html вставить цикл по превьюхам и поправить ксс

[Tom]

В тройке можно немного попроще. 
catalog/view/theme/default/template/product/product.twig
Найти весь блок картинок
 

{% if thumb or images %}
          <ul class="thumbnails">
            {% if thumb %}
            <li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endif %}
            {% if images %}
            {% for image in images %}
            <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endfor %}
            {% endif %}
          </ul>
{% endif %}

И заменить со списка ul-li  частично на блоки col.

 Что то типа 
 

<div class="row  thumbnails">
   {% if images %}
   <div class="col-sm-2">
      <ul class="thumbnails-list">
         {% for image in images %}
         <li>
            <a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}">
               <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
            </a>
         </li>
         {% endfor %}
      </ul>
   </div>
   {% endif %}
   <div class="{{ images ? 'col-sm-10' : 'col-sm-12' }}">
      {% if thumb %}
      <a class="thumbnail main-image-container" href="{{ popup }}" title="{{ heading_title }}">
         <img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" id="main-image" />
      </a>
      {% endif %}
   </div>  
</div>  

Ну и перед {{ footer }} , так например
 

         <style>
          .thumbnails-list {list-style: none;padding: 0;margin: 0;overflow-y: auto;}
          .thumbnails li {margin-bottom: 10px;}
        </style>
        <script type="text/javascript">
          $(document).ready(function() {
            var mainImageHeight = $('.main-image-container').height();
            $('.thumbnails-list').height(mainImageHeight);
          });
        </script>

 

[Afanasoff]

В 30.09.2024 в 21:36, Tom сказал:

В тройке можно немного попроще. 
catalog/view/theme/default/template/product/product.twig
Найти весь блок картинок
 

{% if thumb or images %}
          <ul class="thumbnails">
            {% if thumb %}
            <li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endif %}
            {% if images %}
            {% for image in images %}
            <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
            {% endfor %}
            {% endif %}
          </ul>
{% endif %}

И заменить со списка ul-li  частично на блоки col.

 Что то типа 
 

          <div class="row  thumbnails">
            {% if images %}
              <div class="col-sm-2">
                <ul class="thumbnails-list">
                  {% for image in images %}
                    <li>
                      <a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}">
                        <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            <div class="{{ images ? 'col-sm-10' : 'col-sm-12' }}">
              {% if thumb %}
                <a class="thumbnail main-image-container" href="{{ popup }}" title="{{ heading_title }}">
                  <img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" id="main-image" />
                </a>
              {% endif %}
            </div>

Ну и перед {{ footer }} , так например
 

         <style>
          .thumbnails-list {list-style: none;padding: 0;margin: 0;overflow-y: auto;}
          .thumbnails li {margin-bottom: 10px;}
        </style>
        <script type="text/javascript">
          $(document).ready(function() {
            var mainImageHeight = $('.main-image-container').height();
            $('.thumbnails-list').height(mainImageHeight);
          });
        </script>

 

Мне для 2.1 нужно. Нашел пару бесплатных модификаторов - но там без карусели.

[Tom]

Я показал пример. Осталось его внедрить для tpl. У меня нет под рукой такой старой версии , да и у форума сборка начиная с тройки.

[Afanasoff]

В 30.09.2024 в 21:54, Tom сказал:

Я показал пример. Осталось его внедрить для tpl.

Да спасибо - попробую.

Изменено 1.10.2024 в 08:36 пользователем Afanasoff

[Afanasoff]

<div class="left product-image thumbnails">
            <?php if ($thumb || $images) { ?>
              <div class="col-sm-2" style="padding-right: 0px;">
                <ul class="thumbnails-list">
                  <?php if ($images) { ?>
					<?php foreach ($images as $image) { ?>
                    <li>
                      <a class="elevatezoom-gallery thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>">
                        <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
                      </a>
                    </li>
					<?php } ?>
				  <?php } ?>
                </ul>
              </div>
            <?php } ?>
            <div class="col-sm-10">
              <?php if ($thumb) { ?>
                <a class="elevatezoom-gallery thumbnail main-image-container" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">
                  <img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="main-image" />
                </a>
              <?php } ?>
            </div>
		    </div>
<style>
          .thumbnails-list {list-style: none;padding: 0;margin: 0;overflow-y: auto;}
          .thumbnails li {margin-bottom: 10px;}
        </style>
        <script type="text/javascript">
          $(document).ready(function() {
            var mainImageHeight = $('.main-image-container').height();
            $('.thumbnails-list').height(mainImageHeight);
          });
        </script>

Для 2.1 Может кому пригодится.

[Tom]

Vertical Images on Product Page.ocmod.zip