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

Question

[Даник Грачёв]

Код в хедере:

<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. Но оно не помогает. Что я не так делаю?

Answer 1

[Codebaker]

<div class="item"><a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/><b></li></b></a></div>

зачем у вас используется закрывающий тег li ?

Comments

[Codebaker]

хотел выделить его в коде, добавил болда, балда!..

[Даник Грачёв]

да, его не заметил, однако он никак не повлиял на работу.

Answer 2

[Сергей Мельников]

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

и, чем писать сюда тонну кода, залейте куда нибудь пример и дайте ссылку

Comments

[Даник Грачёв]

@mlnkv спасибо, хорошо, в будущем так буду делать
но это не помогло.

[Николай Васильчук]

$(document).ready(function(){ /* */ }) одно и то же, что и $(function(){ /* */ }). Не вводите людей в заблуждение, читайте документацию learn.jquery.com/using-jquery-core/document-ready

[Сергей Мельников]

я не ввожу в заблуждение, я написал как будет красивее, так пишут большинство разработчиковж

[Даник Грачёв]

В любом случае проблема не исчезла. Заметил ещё такую ситуацию - с первой загрузки всё нормально строится, но стоит страницу обновить - всё рушится.
!НО это только на win-7
На MacOS сразу криво загружается.
Если отключить Imagesloaded, то изображения вообще не строятся нормально, т.е. он работает. вопрос почему всё-таки изображения налазят друг на друга
dftester.16mb.com/?portfolio=dasha

[maxaon]

@dfoster Мне на вашу ссылку Касперский крипчит о трояне. "HEUR:Trojan.Script.Generic"

Answer 3

[Даник Грачёв]

дело в том что при кадом обновлении изображдения выстраиваются по-новому.
pixs.ru/showimage/11jpg_8311856_10137743.jpg
такая вот ситуация происходит.

Answer 4

[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