чанк в msGallery в minishop 2.4.10

Всем доброго времени суток.
Подскажите такой нюанс.
В новом minishop 2.4.10 есть такой чанк tpl.msGallery.
В нем все изображения выводятся циклом.
Мне нужно переделать его под свою галерею из шаблона. Суть в том что каждая маленькая превьюшка имеет свою id 1,2,3 и т.д
соответственно нажимая на превью всплывает ее же копия под тем же id только большого размера.

и вот не получается сделать нормальную галерею помогите

<div class="product-gallery">
  
  <ul class="product-gallery-preview">
    <li id="preview01"><img src="img1"></li>
    <li id="preview02"><img src="img2.jpg"></li>
    <li id="preview03"><img src="img3.jpg"></li>
  </ul>


  <!-- маленькие превьюшки -->
  <ul class="product-gallery-thumblist">

    <li class="">
      <a href="#preview01">
        <img src="img1.jpg">
      </a>
    </li>

    <li class="active">
      <a href="#preview02">
        <img src="img2.jpg">
      </a>
    </li>

    <li class="">
      <a href="#preview03">
        <img src="img3.jpg">
      </a>
    </li>

  </ul>
        
</div>
Вот одна из вариантов и логично что она работает неправильно. может есть какой то вариант разбить массив фалов на отдельные и не делать это циклом?

<div class="product-gallery" id="msGallery">
        {if $files?}
        <!-- Preview -->
        <ul class="product-gallery-preview">
            <li id="preview01" class="current"><img src="{$files[0]['url']}"></li>
        </ul>
          
        <!-- Thumblist -->
            <ul class="product-gallery-thumblist">
                {foreach $files as $file}  
                    <li class="active">
                        <a href="#preview01">
                            <img src="{$file['url']}">
                        </a>
                    </li>
                {/foreach}
            </ul>

    {else}
        <img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
             srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
             alt="" title=""/>
    {/if}
</div>
Сергей
Сергей
04 мая 2017, 20:34
modx.pro
2
1 424
0

Комментарии: 2

Баха Волков
Баха Волков
13 мая 2017, 08:55
0
У меня такой же вопрос, помню как-то столкнулся с этой проблемой и так и не разобрался
    Андрей
    Андрей
    13 мая 2017, 11:32
    +1
    А в чём проблема взять и сделать два цикла, один для больших, второй для превьюх:

    <div class="gallery">
    {if $files?}
            {foreach $files as $file}
                <div class="gal-item">
                	<a href="{$file['url']}" class="thumbnail" data-fancybox="group">
                		<img src="{$file['270x270']}" alt="{$file['alt']}" title="{$file['name']}">
                	</a>
                </div>
            {/foreach}
		
            {foreach $files as $file}
                <div class="gal-item">
                	<a href="{$file['url']}" class="thumbnail" data-fancybox="group">
                		<img src="{$file['840x']}" alt="{$file['alt']}" title="{$file['name']}">
                	</a>
                </div>
            {/foreach}

    {/if}
</div>
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2