2013-02-21 27 views
7

我讀到了有關砌體的內容,未能將圖像附加到工作中,建議切換到後繼Isotope。我試圖改進或創建專輯封面庫中的變體,這是我在使用相同的PHP類之前完成的一兩次。使用砌體,jQuery和PHP製作專輯封面圖庫

我可以使用基本功能,但單擊按鈕添加更多圖像始終無法正常工作。我一直在閱讀jQuery文檔,並且嘗試過各種JavaScript調試器,但是當我單擊時,我總是沒有將圖像添加到我的畫廊。

爲了獲得最佳外觀佈局,試驗和錯誤絕對是必需的。

最大的專輯封面似乎是500像素,在API中發現最小的是75,選擇正確的列寬有助於。我目前使用75個,但50個可能效果更好。我只是想添加圖片工作,並完成這個小實驗。

我想嘗試類似於technique of appending more images to the bottom的東西。我想追加更多使用PHP從各種API(亞馬遜產品API,Last.fm,iTunes)獲取的專輯封面。所有專輯封面都來自API,我使用PHP來查找給定專輯標題和藝術家的網址。我的代碼正在運行:http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

我已經多次更改了CSS規則,現在我只有默認的CSS提示了同位素作者。該循環併產生10周的div每格

$myAlbumCollection->randomMember(); 
    $count = 0; 
    print('<div id="container">'); 

    while ($count < 10) 
    { 
     // Check that current album is in Amazon 
     $buyLink = $myAlbumCollection->currentAlbumAmazonProductURL(); 
     $imageURL = $myAlbumCollection->currentAlbumRandomImageURL(); 
     if ((strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0)) 
     { 
      $count++; 
      print('<div class="item">'); 
      print('<a href="' . $buyLink . '">'); 
      print('<img src="' . $imageURL . '" />'); 
      print('</a>'); 
      print('</div>'); 
     } 
     $myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout 
    } 
    print('</div>'); 

一個形象,最後在這裏是JavaScript

PHP代碼,最終的問題是在這裏的某個地方:

<script> 
$(function(){ 

    var $container = $('#container'); 


    $('#insert a').click(function(){ 
    var $newEls = $.get('./moreAlbumCovers.php'); 
    $container.isotope('insert', $newEls); 

    return false; 
    }); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
    columnWidth: 75 
    } 
    }); 

}); 
</script> 

鏈接被稱爲點擊時,我已經完成了它。 PHP產生DIVs和IMG標籤。我真的不知道我在做什麼錯誤,重複閱讀文檔並沒有解決它。我從來都不是一個JavaScript傢伙。我甚至不是一個PHP的傢伙,這看起來是對的,但是儘管慷慨的幫助和提供了獎勵,但一再努力讓它失敗。

感謝您的幫助。

+0

嗨Muskie,你會澄清你的具體問題是什麼? – halfer 2013-02-21 20:43:04

+1

更清楚了嗎?基本上,這些代碼可以完成一些任務,但不會影響當前設置的磚牆效果。最終我也想繼續工作。 – Muskie 2013-02-22 18:12:13

+0

我一直在閱讀這裏的說明:http://masonry.desandro.com/demos/basic-multi-column.html和改變項目寬度CSS條目和columnWidth javascript參數,我不斷收到兩列和很多空白我的瀏覽器... – Muskie 2013-02-22 20:01:10

回答

4

嘗試調整columnWidh的值和寬度item。砌體將元素與最合適的列第一個佈局對齊。它適用於數學方程。所以一個完美的磚牆配件只是假設的理想情況。我花了幾次嘗試使用螢火蟲和其他工具來獲得磚石結構的理想佈局。關鍵是要獲得columnWidth和width,gutter等的值,以便它可以很好地解決邏輯方程。

::編輯::
我發現保存在我的口袋頁的鏈接,其中我完全忘了。這是一個很好的教程。所以我回來把它放在這裏。推薦給那些無法開始使用此插件的人。

http://www.netmagazine.com/tutorials/get-started-jquery-masonry

+0

我嘗試了很多值,我開始看到我期待的行爲,我的CSS規則中沒有項目寬度,我必須在大約與答案相同的時間輸入項目寬度,雖然也許在57分鐘後。 ;-) – Muskie 2013-02-22 20:16:13

+0

謝謝,我會檢查鏈接。我仍然不理解如何追加。 – Muskie 2013-02-23 18:59:54

+0

追加什麼?有一個在砌體網站上添加新元素的演示。 – 2013-02-24 07:18:30

2

爲了讓更多的磚牆般的效果,你不使用CSS設置的項目寬度。鑑於the instructions here,這並不十分清楚。但是很多測試似乎表明只是指定一個columnWidth,然後讓瀏覽器和JavaScript做的最好的接近我正在尋找的性能。將不得不調整,並最終嘗試追加...

3

砌體是不是一個非常描述性的名稱。實際上這是一個優化問題。這是所謂的NP問題,因爲有太多的排列來檢查。尤其是砌體jquery插件是一個1d容器求解器,它將磚塊排列在垂直列中。默認情況下,CSS按水平順序排列磚塊。換句話說,它是深度優先的相鄰樹模型。

更新:嘗試添加砌築到您的虛擬股利和刪除其他寄託都:

  $('#dummy').load('./moreAlbumCovers.php').masonry("reload"); 

我想你overthink它。該變量是空的,因爲您將它分配給一個dom對象。這很可能成爲一個對象而不是有用的。

+0

謝謝,我想我需要了解更多關於jQuery和JavaScript來解決這個問題,要麼或者我完全沒有追加。我知道砌體不完美,我給它從API的隨機大小的圖像,它盡其所能。爲了獲得正確的寬度,需要進行一定的試驗和錯誤。 – Muskie 2013-02-23 18:59:28

+0

我已經更新了我的答案。祝你好運! – Bytemain 2013-03-05 21:26:00

+0

我只添加了#dummy div,因爲我無法在容器上調用加載...我會試試這個,但它看起來並不像它會追加,而是會用另一個網格替換我的網格... – Muskie 2013-03-07 04:53:23

3

它relly以及這裏解釋Jquery Masonry Seamless Responsive Image Grid +我會嘗試做同位素一模一樣http://isotope.metafizzy.co/

編輯: 我覺得isoptope和磚石剛剛整理出一個維裝箱,什麼你也許看之後是2維裝箱

這樣http://codeincomplete.com/posts/2011/5/7/bin_packing/example/(檢查複雜的情況下,它完全適合所有框)

和lib爲https://github.com/jakesgordon/bin-packing/

+0

所以你的建議是切換到同位素或另一個Javascript?我仍然認爲我正在嘗試做的事情可以用砌體來完成,它似乎適合於這些例子,並且與Pinterest的佈局沒有區別。 Pinterest的所有盒子都有相同的寬度,它的高度是不同的。儘管我知道最大尺寸和最小尺寸會是什麼,但我得到的是隨機大小的圖像。 – Muskie 2013-03-07 04:45:14

+0

由於沒有固定列寬,你的問題與pinterest非常不同。 你可以嘗試擁有1x 2x 4x寬度(兩個冪可以工作),否則它不會抱歉。 我想現在嘗試同位素將有完全相同的結果(對不起),bin_packing將工作,但可能需要更多的集成,並且bin_packing lib首先適合最大的盒子,也可能不是你想要的。 如果您想將類似於pinterest的東西設置爲一個寬度值,並且只進行一些高度操作。你可以調整圖像大小,只有一個寬度。 – 2013-03-07 05:22:34

+0

我不需要完美,我只是想找到一種全新而令人興奮的方式來展示我的唱片收藏。我從各種API(亞馬遜,Last.fm,iTunes等)獲取所有專輯封面,因此它們的尺寸略有不同。我可以強制瀏覽器調整它們的大小,或者我可以使用PHP自己調整它們大小,但這隻會減慢速度......感謝您試圖提供幫助。我很快會重新審視它。 – Muskie 2013-03-07 20:55:05