Правильность написания скрипта?

Question

[Чёкатилло]

Есть скрипт, но он в чем-то не правилен:

$(document).ready(function() {

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

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });

      $container.infinitescroll({
	      navSelector  : '#page-nav',    // селектор контейнера для навигации по старинцам
	      nextSelector : '#page-nav a',  // селектор для навигации  
	      itemSelector : '.box',     // селектор блоков, к которым применяются эффекты  
	      donetext  : 'Больше нет страниц для загрузки!',
	      loadingImg : 'http://i.imgur.com/6RMhx.gif', // изображение ajaxljader
	      debug: false, // выводит ошибки на консоль
	      errorCallback: function() { 
	        // сообщение об ошибках исчеазет по истечении 2 секундной анимации
	        $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
	      }
	      },
	      // вызываем Masonry 
	      function( newElements ) {
	        var $newElems = $( newElements );
	        // запускаем эффекты только после полной загрузки изображений
	        $newElems.imagesLoaded(function(){
	          $container.masonry( 'appended', $newElems, true ); 
	        });
	      }
	    );
});

Он для работы бесконечного скролла и масонри сетки

ЗДЕСЬ

Кое что подделал Теперь ток одна ошибка Не знаю, как дальше с этим жить =))

Помогите плиз подправить
Спасибо

Comments

[MrTimon]

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

Ну и ошибка в еррор калбеке, тебе нужно fadeOut поставить в кабек ф-ции animate, ато у тебя ошибка не успеет появиться.

[ой всё]

так учитесь отладке собственных скриптов

[Чёкатилло]

эт не мой ) да и нет у меня моих ))
руководствуюсь этим

[ой всё]

Kiberbot, в чем разница?
отладка чужих скриптов еще важнее, чем собственных

[Чёкатилло]

ой всё, я самый ленивый!

[ой всё]

Kiberbot, ленивые пишут код сами быстро и правильно
ваш вариант называется "глупый"

[Чёкатилло]

ой всё, ну и ладно =)

Answer 1

[MrTimon]

Вижу ошибку в этой строке
$container.infinitescroll({

Нужно изменить infinitescroll на infiniteScroll, регистр букв имеет значение

Comments

[Чёкатилло]

Спасибо
Блин ппц, никогда бы не догадался )
Теперь ошибки в подключаемых скриптах

Тоже наверное какие-то несоответствия

[MrTimon]

Ах. У вас вообще неверная инициализация infiniteScroll плагина. Ві используєте инициализацию из другого похожего плагина поидеи. Я посмотрел по ссылке на плагин которую вы дали и там вообще не те пераметры

В вашем варианте должно быть что-то на подобе такого:

// with Masonry & jQuery
// init Masonry
 $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    

// get Masonry instance
var msnry = $container.data('masonry');

// init Infinite Scroll
$container.infiniteScroll({
 path: '#page-nav a'
  append: '.loop',
  outlayer: msnry,
});

[Чёкатилло]

MrTimon, сделал так:

$(document).ready(function() {

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

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });
});


var msnry = $container.data('#content_masonry');

// init Infinite Scroll
$container.infiniteScroll({
  path: '#page-nav a',
  append: '.loop',
  history: false,
});

Пока не работает, но хотя бы не сломано почти ничего
Осталась ошибка

ругается на эту строку:
var msnry = $container.data('#content_masonry');

Взгляните пожалуйста и все..я отстану =)
Наверное это последняя ошибка

[MrTimon]

Kiberbot, Потому что не $container.data('#content_masonry'); а просто $container.data('masonry');

и в инициализации скрола еще нужно добавить параметр outlayer: msnry,

[Чёкатилло]

MrTimon, извиняюсь, так:

var msnry = $container.data('masonry');
  path: '.pagination__next',
  append: '.loop',
  hideNav: '.pagination',
  outlayer: msnry,
});

ругается на эти строки

еще может оно ссылку на след. страницу не видит

<p class="pagination">
  <a class="pagination__next" href="<?php previous_posts_link() ?>"></a>
</p>

еще мне надо может добавить на блок #content_masonry это:

<div id="content_masonry"
  data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "history": false }'>

[MrTimon]

Kiberbot, Да не так. Кто просил вас изменять инициализацию плагина? Я просил одну строку поменять. Все должно выглядить как то так :

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

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });
});


var msnry = $container.data('masonry');

// init Infinite Scroll
$container.infiniteScroll({
  path: '#page-nav a',
  append: '.loop',
  outlayer: msnry,
  history: false
});

[Чёкатилло]

MrTimon, кое что лишнее было });

короче так:

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

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });
});


var msnry = $container.data('masonry');

$container.infiniteScroll({
  path: '#page-nav a',
  append: '.loop',
  outlayer: msnry,
  history: false
});

работает =)))
примного благодарен

[Чёкатилло]

MrTimon, присоединяйтесь к продолжению вопроса Подгруженным превью в сетке masonry не назначаются положения в блоке?