Как реализовать библиотеку Packery с Tumblr

Я следил за учебниками «Начало работы» на веб-сайте Packery, но я до сих пор не могу заставить мои фотогалереи tumblr работать вообще с библиотекой. Я не уверен, что мне нужно изменить или добавить, поскольку учебники Packery довольно расплывчаты.Как реализовать библиотеку Packery с Tumblr

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script> 

<script> 


    var postsContainer = document.querySelector('#posts'); 
    var pckry = new Packery(postsContainer, { 
    //options 

    itemSelector: '.container', 
    gutter:5 
    }); 

    pckry.bindResize(postsContainer); 

    </script> 

<link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow' rel='stylesheet' type='text/css'> 

<!-- fonts 

font-family: 'Monofett', cursive; 
font-family: 'Varela', sans-serif; 
font-family: 'Londrina Shadow', cursive; 
--> 

<title>{Title}</title> 
<link rel="shortcut icon" href="{Favicon}"> 


    <!-- DEFAULT COLORS --> 
    <meta name="color:Background" content="#eee"/> 
    <meta name="color:Content Background" content="#fff"/> 
    <meta name="color:Text" content="#000"/> 

    <style type="text/css"> 

    *{margin:0px; 
    padding:0px;} 

    html{height:100%;} 

    body{ 
    background-color:{color:Background}; 
    margin:0px; 
    height:100%; 
    } 



    #sideBar{ 
    background-color:{color:Content Background}; 
    width:150px; 
    height:100%; ; 
    margin:auto 0; 
    margin-right:20px; 
    padding-left:10px; 
    float:left; 
    } 

    h1{font-family: 'Monofett', cursive;; 
    font-size:43px; 
    margin-bottom:25px; 
    color:black;} 

    h2{ font-family: 'Varela', sans-serif; 
    font-size:12px; 
    margin-bottom:10px;} 

    p{margin-bottom:10px;} 

    a:link, a:visited{font-family: 'Varela', sans-serif; 
    font-size:.95em; 
    text-decoration:none; 
    color:black; 
    -webkit-transition:margin-left 1s, margin-right 1s, color .5s; 
    -webkit-timing-function:ease;} 

    #arrow{color:black; 
     font-family: 'Varela', sans-serif; 
     fonr-size:.95em; 
     -webkit-transition:color.5s; 
     -wekit-timing-function:ease;} 




    a:hover{color:white; 
     margin-left:10px; 
     margin-right:40px;} 




    nav{margin-left:0px} 





    #posts{ 

    float:left; 
    list-style:none; 

    } 

    .postPhoto{ 

    float:left; 

    margin:5px; 

    } 

    #wrapper{ 
     height:100%; 

     width:700px; 
    }  

    .pagination{display:none;} 

    </style> 
    </head> 

    <body> 

    <div id="wrapper"> 

    <div id="sideBar"> 
    <h1>{Title}</h1> 
    <nav>  
    <p> <a href ="">Music </a> <span id="arrow"> >> </span> </p> 
    <p> <a href="">Code </a> <span id="arrow"> >> </span> </p> 
    <p> <a href="">Shop </a> <span id="arrow"> >> </span> </p> 
    <p> <a href="">About </a> <span id="arrow"> >> </span> </p> 
    </nav>  
    </div> 


    <div id="posts"> <!--content --> 
     {block:Posts} 

     <div class="container">  
      {block:Photo} 
       <div class="postPhoto"> 
      <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/> 

        {block:Caption} 
         <div class="caption">{Caption}</div> 
        {/block:Caption} 
       </div> 
      {/block:Photo} 

       {block:Video} 
       <li class="post video"> 
        {Video-250} 

        {block:Caption} 
         <div class="caption">{Caption}</div> 
        {/block:Caption} 
       </li> 
      {/block:Video} 

     </div><!--end container --> 

     {/block:Posts}   
    </div> 
    </div>   
    </body> 
    </html>

источник

2013-08-22 oxxi

У вас есть ссылка на сайт? Вы получаете какие-либо ошибки консоли? Возможно, размещение вашего JS на Dropbox - не лучшая идея? Вы можете использовать собственный загрузчик файлов Tumblr для размещения файлов тем. – graygilmore

http://oxvac.tumblr.com/. Я немного изменил код. Я отредактирую код, который я разместил выше, чтобы отразить новые изменения. – oxxi

Ну, Packery выдает ошибку: http://cl.ly/image/2g3f1j0R3v18 – graygilmore

Пара вещей.

1) Ваш контейнер #posts плавает и, следовательно, является таким же широким, как и содержимое внутри него. Даже если Packery был, он бы просто выделил их все в одном столбце. Вам нужно будет применить его ширину. Если вы не связаны с IE8, вы можете сделать что-то вроде этого:

#posts { 
    width: -webkit-calc(100% - 180px); 
    width: -moz-calc(100% - 180px); 
    width:   calc(100% - 180px); 
}

2) Ошибка Packery нечетное, я не совсем уверен, что это вызвано. Но бодаться этот простой бит JS через консоль, я был в состоянии получить это работает:

var container = document.querySelector('#posts'); 
var pckry = new Packery(container, { 
    // options 
    itemSelector: '.container', 
    gutter: 10 
});

Убедитесь, что этот код приходит в конце документа, прямо перед закрытием </body>.

3) Поскольку ваши сообщения являются изображениями, вам нужно убедиться, что вы предоставляете им ширину и высоту, чтобы Packery знал, насколько большой каждый пост. К сожалению, поскольку вы не используете стандартную ширину Tumblr, вам нужно включить плагин imagesLoaded и поместить свой код в свой обратный вызов.

Легкий способ использования JQuery:

var container = document.querySelector('#posts'); 
container.imagesLoaded(function() { 

    var pckry = new Packery(container, { 
     // options 
     itemSelector: '.container', 
     gutter: 10 
    }); 

});

Если вы использовали стандартный размер Tumblr (например, 250px) вы сможете просто добавить атрибут ширины и высоты для каждого изображения и не нужно беспокоиться о используя imagesLoaded, например:

<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />

источник

2013-08-24 01:46:29 graygilmore

Я не уверен, действительно ли он работает. Изменения, внесенные в контейнер '# posts', правильно отображают расположение изображений, но при изменении размера окна или перезагрузке страницы не происходит анимации жидкостей изображений, создаваемых библиотекой пакетов. Кроме того, извлечение сценария пакетирования по-прежнему дает те же результаты. – oxxi

Добавьте Packery JS обратно в тему, и я могу посмотреть. Вы хотите использовать это, чтобы посмотреть изменение размера браузера: http://packery.metafizzy.co/methods.html#bindresize – graygilmore

Хорошо, я добавил JS обратно и добавил bindResize, некоторые новые ошибки: 'Uncaught TypeError: Не могу прочитать свойство 'innerWidth' неопределенного 'Вероятно, из-за моего неправильного использования' pckry.bindResize (postsContainer); ' – oxxi

Как реализовать библиотеку Packery с Tumblr

ответ

Смежные вопросы