Images loaded. Как его подключить?

Код в хедере:
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
var $container = $('#page').masonry({
      itemSelector: '.post',
      isResizeBound: false
    });;
$container.imagesLoaded( function() {
  $container.masonry();
});
  });
  </script>


Вызов masonry на странице:
<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div id="container">
<?php foreach($slide['options']['image_slider'] as $image) : ?>
<div class="item"><a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/></a></div>
<?php endforeach; ?>	
</div></div>


подключение в function.php
wp_enqueue_script('jquery-min-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">', '', false, true);
wp_enqueue_script('imagesloaded-pkgd-js', THEMEROOT . '/js/imagesloaded.pkgd.js', array('jquery'), false, true); 
wp_enqueue_script('masonry-pkgd-js', THEMEROOT . '/js/masonry.pkgd.js', array('jquery'), false, true);


Уже второй играюсь и не могу понять, почему изображения накладываются друг на друга в masonry. Решение говорят в Images loaded. Но оно не помогает. Что я не так делаю?
  • Вопрос задан
  • 5416 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Codebaker
Всё умею, всё могу!
<div class="item"><a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/><b></li></b></a></div>


зачем у вас используется закрывающий тег li ?
Ответ написан
mlnkv
@mlnkv
JavaScript Developer
Начните с того, что все скрипты подключайте внизу страницы, перед закрывающим тегом </body>
Инициализируйте код не:
$(document).ready(function(){ /* */ }),
a:
$(function(){ /* */ })

и, чем писать сюда тонну кода, залейте куда нибудь пример и дайте ссылку
Ответ написан
@dfoster Автор вопроса
дело в том что при кадом обновлении изображдения выстраиваются по-новому.
pixs.ru/showimage/11jpg_8311856_10137743.jpg
такая вот ситуация происходит.
Ответ написан
maxaon
@maxaon
Вы два раза вызываете masonry. Надо
<script src="imagesloaded.pkgd.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#page').imagesLoaded(function () {
            $('#page').masonry({
                itemSelector: '.post',
                isResizeBound: false
            });
            ;
        });
    });
</script>

И не линкуйте скрипты прямо на GitHub
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы