freewall или masonry галерея

[kate1987]

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

Для создания галереи использую этот бесплатный модуль Blueimp Gallery by GrandCMS.com

Прикрутила freewall (masonry под данный модуль не хотел срабатывать) Но чтобы скрипт подключился приходиться обновлять страницу. В фаебаге вижу такую картинку

Изначально

<div id="links0" class="grid gridhid" style="position: relative;" data-min-width="1520" data-total-col="0" data-total-row="0" data-wall-width="0" data-wall-height="0">
<div id="1-2" class="item" data-delay="1" data-height="22" data-width="28" data-state="start" style="position: absolute; opacity: 1; width: 0px; height: 0px; top: 0px; left: 0px;">
................

То есть не определяется высота, ширина, и размещения

 

После обновления

<div id="links0" class="grid gridhid" style="position: relative;" data-min-width="1520" data-total-col="14" data-total-row="10" data-wall-width="1400" data-wall-height="996">
<div id="1-2" class="item" data-delay="1" data-height="218" data-width="327" data-state="start" style="position: absolute; opacity: 1; width: 288.21px; height: 187.14px; top: 0px; left: 0px;">
.............

Скрипт срабатывает

 

Код модуля файл tpl

<script src="catalog/view/theme/default/js/freewall.js"></script>

<div id="latest-gal">

<?php if (!empty($heading_title)) { ?>
  <h2><?php echo $heading_title; ?></h2>
<?php } ?>

   <div class="grid gridhid" id="links<?php echo $module; ?>">
    <?php foreach ($images as $gimage) { ?>
       <div class="item">
  
        <img src="<?php echo $gimage['image']; ?>" alt="<?php echo $gimage['title']; ?>" title="<?php echo $gimage['title']; ?>" />
      
       <a class="overlay" href="<?php echo $gimage['image']; ?>" title="<?php echo $gimage['title']; ?>" data-gallery="#blueimp-gallery-links<?php echo $module; ?>"><img src="catalog/view/theme/default/image/lupa.png"></a>
      </div>
    <?php } ?>
  </div>


<script type="text/javascript">
$(function() {
var wall = new Freewall(".grid");
wall.fitWidth();
});
</script>

Ребят, что не так?

 

Да и собственно пациент

Прошу сильно не пинать)

Змінено 11 травня 2016 користувачем kate1987

[noti]

Скорее всего не успели прогрузиться изображения, соответственно определяется размеры нулевые. 
Как вариант инициализировать скрипт после загрузки изображений. Т.е. вызывать по событию onload

[kate1987]

Спасибо так сработал

<script type="text/javascript">
$(window).load(function() {
var wall = new Freewall(".grid");
wall.fitWidth();
});
</script>