jQuery Masonry - проблемы бесконечной прокрутки и наложения изображений с моей темой Tumblr - PullRequest
Новая
       11

jQuery Masonry - проблемы бесконечной прокрутки и наложения изображений с моей темой Tumblr

7 голосов
/ 22 ноября 2011

Я новичок в программировании (javascript), но за последние несколько дней я провел довольно тщательное исследование, чтобы заставить мою тему tumblr работать правильно.Я знаю, что мой вопрос является распространенным, но, как мне кажется, у меня недостаточно знаний для правильной интеграции частей кода, приведенных во многих похожих примерах.

Моя тема должна переопределятьОграничение «15 сообщений на страницу» для tumblr, а с опцией «бесконечная прокрутка» все мои сообщения (все они рисунки) должны размещаться на одной бесконечной странице.Ну, это не так.С небольшой помощью здесь мне удалось обернуть мои {block: Posts} с помощью и с несколькими случайными изменениями в вызове masonry (), который я закончил с this

Как вы можете видеть, мои фотографии не перекрываются (наконец-то!), Но после 15 первых сообщений создается впечатление, что создана новая страница и последние изображения не выровнены правильно.

my jQueryКод кладки таков: 

<script type="text/javascript">

$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>

Я знаю, это беспорядок ... Буду очень признателен за помощь.

1 Ответ

0 голосов
/ 03 января 2013

Я не привык работать с Tumblr, но могу узнать, что происходит:

Строка 110:

Этот сценарий создает div-обертку вокруг записей при каждом вызове каменной кладки, поскольку из-за сценария каждая загрузка выглядит как новая страница, я думаю, вы можете просто удалить ее.

Несколько советов: Вам не нужно ждать $ (windows) .load, чтобы выполнить кладку, измените ее на $ (function ()

Чтобы избежать наложения изображений, используйте метод добавленной кладки и imagesLoad: См. Это

Я вижу, что вы используете масонство 1.0.1, убедитесь, что вы используете масонство последней версии (2.1.06)

Пример кода: 

$(function() {
    //$('.autopagerize_page_element').masonry();
    var $container = $('.autopagerize_page_element');
    //wait until images are loaded
    $container.imagesLoaded(function(){
      $container.masonry({itemSelector: '.entry'});
    });
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
    }
);
});

и обязательно удалите последний скрипт в этом блоке заголовка: 

    <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
    <script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
    <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->

Надеюсь, это поможет

...