Помогите встроить masonry!!!! HELP!!!

Здравствуйте!

Замучилась с masonry, подскажите, где ошибка!!!

Вот страничка с галереей lucky-agency.ru/portfolio-test.html

вывожу галерею:
<section id="portfolio-section" class="center" >
            <div class="lightgallery">
                      [[!ms2Gallery? &tpl=`tpl.ms2GalleryPortfolio`]]
            </div>
    </section>
tpl.ms2GalleryPortfolio:

{if count($files) > 0}
    {foreach $files as $file first=$first}
        {if $first}
           <div class="item-masonry" data-src="{$file.url}">
                       <img src="{$file.url}" />
                    </div>  
        {else}
<div class="item-masonry" data-src="{$file.url}">
                       <img src="{$file.url}" />
                    </div>  
            
        {/if}
    {/foreach}
{/if}

Подключаю скрипты
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
    <script src="/lightgallery/lightgallery.js"></script>
    <script src="/lightgallery/lg-thumbnail.js"></script>
    <script src="/lightgallery/lg-fullscreen.js"></script>
    <script src="/lightgallery/lg-video.js"></script>
    <script src="/lightgallery/lg-autoplay.js"></script>
    <script src="/lightgallery/lg-zoom.js"></script> 
    <script>
    $(document).ready(function() {

      var container = $('.lightgallery');
        container.masonry({
          itemSelector: '.item-masonry',
          columnWidth: '.item-masonry',
          percentPosition: true
      });
    });
    </script>
<script type="text/javascript">
    
    $(document).ready(function(){
      $('.lightgallery').lightGallery({
       });
      });
</script>
Выводит галерею нормально не всегда, по настроению. Я прочитала, что скрипт загружает фотографии, которые загрузились за первые пару секунд, а дальше накладывает их. Я не знаю как делать предзагрузку и т.д. Подскажите!!! Как это починить?
Ника
27 июля 2021, 02:42
modx.pro
184
0

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

Роман
27 июля 2021, 09:01
0
Может более свежую версию masonry(v4.2.2) подключить.
    Ника
    28 июля 2021, 02:17
    0
    Проблему решила. Если кому-нибудь понадобится, то решилось всё с помощью этого скрипта
    jQuery(window).load(function(){
    	jQuery('.lightgallery').masonry({ itemSelector: '.item-masonry',
              columnWidth: '.item-masonry',
              percentPosition: true});
    });
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      2