如何使用Tumblr實現Packery庫

我遵循Packery網站上的「入門」教程，但仍然無法讓我的tumblr照片文章與圖書館一起工作。我不確定我需要更改或添加什麼，因爲Packery教程非常含糊。如何使用Tumblr實現Packery庫

<!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

您是否有鏈接到網站？你是否遇到任何控制檯錯誤？也許在Dropbox上託管你的JS並不是最好的主意？您可以使用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的通過Console這個簡單一點，我能得到它正在運行：

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尺寸（如250像素），你可以簡單的寬度和高度屬性添加到每個圖像，而不需要擔心使用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，但一些新的錯誤：'未捕獲TypeError：無法讀取undefined的屬性'innerWidth'可能是由於我錯誤地使用了'pckry.bindResize（postsContainer）;' – oxxi

如何使用Tumblr實現Packery庫

回答

相關問題