【发布时间】:2013-02-07 03:45:47
【问题描述】:
我阅读了有关 Masonry 的信息,在未能将图像附加到工作后被建议切换到继任者 Isotope。我试图改进或创建专辑封面画廊的变体,在使用相同的 PHP 类之前我已经做过一两次。
我可以使基本功能正常工作,但是单击以添加更多图像的按钮始终无法正常工作。我一直在阅读 jQuery 文档,并尝试了各种 JavaScript 调试器,但当我单击时,我的图库中总是没有添加任何图像。
为了获得最好看的布局,肯定需要反复试验。
最大的专辑封面似乎是 500 像素,在 API 中发现的最小的是 75,选择正确的列宽会有所帮助。我目前正在使用 75,但 50 可能效果更好。我只想让添加图像工作并完成这个小实验。
我想尝试类似technique of appending more images to the bottom 的东西。我想使用 PHP 附加更多从各种 API(Amazon Product API、Last.fm、iTunes)获取的专辑封面。所有专辑封面都来自 API,我使用 PHP 来查找给定专辑标题和艺术家的 URL。我的代码正在运行:http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
我已经多次更改 CSS 规则,现在我只有 Isotope 作者建议的默认 CSS。
循环生成 10 个 div,每个 div 一张图片的 PHP 代码
$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,最后的问题出在某处:
<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 生成 DIV As 和 IMG 标签。我真的不确定我做错了什么,反复阅读文档并没有解决它。我从来都不是真正的 JavaScript 人。我什至不是 PHP 人,这似乎是正确的,但尽管提供了慷慨的帮助并提供了赏金,但多次努力使其成功却失败了。
感谢您的帮助。
【问题讨论】:
-
嗨,马斯基,您能澄清一下您的具体问题是什么吗?
-
这样更清楚吗?基本上代码可以做一些事情,但不是我当前设置的砖墙效果。最终我也想加入工作。
-
我继续阅读此处的说明:masonry.desandro.com/demos/basic-multi-column.html 并更改项目宽度 CSS 条目和 columnWidth javascript 参数,我的浏览器中不断出现两列和大量空白...
-
在其他答案stackoverflow.com/questions/12115037/…中解释得很好
-
今晚晚些时候我可以尝试切换到同位素。从客户端调用它们非常相似,我仍然没有 jQuery 和 PHP 交互。我很感激帮助。我不知道为什么这个问题被证明如此顽固。
标签: php javascript jquery jquery-masonry jquery-isotope