Как подключить imagesloaded.pkgd.js?

Question

[Чёкатилло]

В хедер подключил jquery
Затем, перед Масонри:

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Что делать дальше не понятно =( замучился уже

Вроде бы, скрипт должен присутствовать этот:

$(document).ready(function() {

  var $boxes = $('.box');
  $boxes.hide();

  var $container = $('#post-area');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.box',
        columnwidth: 300,
        gutter: 20,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});

я предполагаю это связано с index..
Мой index.php:

<div id="content">
<div id="content_masonry">
		<?php if ( have_posts() ) { ?>
			<?php while ( have_posts() ) { the_post(); ?>
				<?php get_template_part('loop'); ?>
			<?php } ?>
		<?php } ?>
</div>
</div>

Все это для изображений сетки Масонри
При загрузке изображения миниатюры накладываются друг на друга, а этот плагин решает проблему с этим

Помогите плиз, мочи больше нет!
Спасибо )

Comments

[ой всё]

а где сам контейнер post-area?
куда грузите?

[Чёкатилло]

извиняюсь, шаблон превью?

<article class="loop">

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?>

<div class="excerpt"><?php the_excerpt() ?></div>
<div class="title">
      		<div class="post-click-popup"><span><?php echo $post->ID; ?></span></div>
			<h2 class="title-2"><a class="popup-post-modal-open" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		</div>

</article>

[ой всё]

var $container = $('#post-area');
где у вас тэг с таким id?
попробуйте заменить на ваш content_masonry

[Чёкатилло]

AnneSmith, у меня чистый шаблон Не знаю где оно )

[Чёкатилло]

AnneSmith, уж простите душегуба)
Это для примера, что в интернетах нашел:
var $container = $('#post-area');

Я ж и подставляю свои теги и не выходит (

[Чёкатилло]

делаю так:

$(document).ready(function() {

  var $boxes = $('.loop');
  $boxes.hide();

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 330,
        gutter: 30,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});

Answer 1

[Евгений Калибров]

Ссылку на ваше демо можно?

Comments

[Чёкатилло]

конечно cg91812-wordpress-6.tw1.ru

[Евгений Калибров]

Ну так у вас ошибка в JS коде, поэтому ничего не инициализируется должным образом.

Вы в JS код вставляется PHP строку, которая не обрабатывается PHP, а выдаётся в браузер как есть:

var total = <?php echo $wp_query->max_num_pages; ?>;

Либо сделайте, что бы js файл обрабатывался через php, либо просто вставьте туда нужное вам число, например:

var total = 10;

Это раз. Вторая ошибка, то что вы не подключили Modernizr, а он требуется для корректной работы вашего скрипта. Подключите его до

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js">

Подключить его можно из CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

[Чёкатилло]

rework,
Спасибо, сделал все и так:

var count = 2;
var total = 10;
$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        if (count > total){
            return false;
        }else{
            loadArticle(count);
        }
        count++;
    }
});

Без видимых изменений

[Евгений Калибров]

Новая ошибка в JS коде. Вы откройте консоль разработчика в браузере, что бы видеть самому данные ошибки (F12). Сейчас ошибка следующая:

$(function() {
  $('.emb').each(function() {
    $(this).on('click', function() {

      var block = $(this).next('.meta-data'),
        pinbox = $(this).parents('.loop');

      pinbox.toggleClass('loop_active');

      if (pinbox.hasClass('loop_active')) {
        block.slideDown(100);
        $(document).on('click', function(event) {
          if ($(event.target).closest(pinbox).length) {
            if (!$('.modal-backdrop').length)
              $('body').append('<div class="modal-backdrop fade in"></div>');
            return;
          }
          block.hide(100);
          pinbox.removeClass('loop_active');
          $('.modal-backdrop').remove();
          event.stopPropagation();
        });
      }
    });
  }

В конце этого блока не хватает закрывающих скобок: ); });

Должно быть так:

$(function() {
  $('.emb').each(function() {
    $(this).on('click', function() {

      var block = $(this).next('.meta-data'),
        pinbox = $(this).parents('.loop');

      pinbox.toggleClass('loop_active');

      if (pinbox.hasClass('loop_active')) {
        block.slideDown(100);
        $(document).on('click', function(event) {
          if ($(event.target).closest(pinbox).length) {
            if (!$('.modal-backdrop').length)
              $('body').append('<div class="modal-backdrop fade in"></div>');
            return;
          }
          block.hide(100);
          pinbox.removeClass('loop_active');
          $('.modal-backdrop').remove();
          event.stopPropagation();
        });
      }
    });
  });
});

[Чёкатилло]

Баба Яга, опс все сработало Спасибо ) Хорошего Вам дня )