我讀到了有關砌體的內容,未能將圖像附加到工作中,建議切換到後繼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的傢伙,這看起來是對的,但是儘管慷慨的幫助和提供了獎勵,但一再努力讓它失敗。
感謝您的幫助。
嗨Muskie,你會澄清你的具體問題是什麼? – halfer 2013-02-21 20:43:04
更清楚了嗎?基本上,這些代碼可以完成一些任務,但不會影響當前設置的磚牆效果。最終我也想繼續工作。 – Muskie 2013-02-22 18:12:13
我一直在閱讀這裏的說明:http://masonry.desandro.com/demos/basic-multi-column.html和改變項目寬度CSS條目和columnWidth javascript參數,我不斷收到兩列和很多空白我的瀏覽器... – Muskie 2013-02-22 20:01:10