Tôi đọc về Masonry và sau khi không nhận được hình ảnh bổ sung để làm việc được khuyên nên chuyển sang Isotope kế thừa. Tôi đã cố gắng cải thiện hoặc tạo ra các biến thể trên một thư viện bìa album, một cái gì đó tôi đã thực hiện một hoặc hai lần trước khi sử dụng cùng một lớp PHP.Sử dụng Masonry, jQuery và PHP để tạo một thư viện bìa album
Tôi có thể làm cho chức năng cơ bản hoạt động, nhưng một nút để nhấp để thêm nhiều hình ảnh hơn đã không hoạt động. Tôi tiếp tục đọc tài liệu jQuery và tôi đã thử nhiều trình gỡ lỗi JavaScript khác nhau nhưng tôi luôn kết thúc mà không có hình ảnh nào được thêm vào thư viện của tôi khi tôi nhấp vào.
Dùng thử và lỗi chắc chắn là bắt buộc để có bố cục đẹp nhất.
Bìa album lớn nhất có vẻ là 500 pixel với nhỏ nhất được tìm thấy trong API là 75, việc chọn chiều rộng cột phù hợp sẽ giúp. Tôi hiện đang sử dụng 75 nhưng 50 có thể đã hoạt động tốt hơn. Tôi chỉ muốn có thêm hình ảnh để làm việc và được thực hiện với thử nghiệm nhỏ này.
Tôi muốn thử một cái gì đó tương tự như điều này technique of appending more images to the bottom. Tôi muốn nối thêm nhiều bìa album mà tôi tìm nạp từ các API khác nhau (Amazon Product API, Last.fm, iTunes) bằng cách sử dụng PHP. Tất cả các bìa album đến từ API và tôi sử dụng PHP để tìm các URL được đặt cho tiêu đề album và nghệ sĩ. Mã của tôi đang chạy: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
Tôi đã thay đổi quy tắc CSS nhiều lần, bây giờ tôi chỉ có CSS mặc định được đề xuất bởi tác giả Đồng vị.
PHP Code mà vòng và tạo ra 10 divs với một hình ảnh mỗi 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>');
Và cuối cùng ở đây là javascript, vấn đề cuối cùng là ở đây đâu đó:
<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>
Các liên kết được gọi khi nhấp vào, tôi đã bước qua nó. PHP tạo ra các thẻ DIV và As. Tôi thực sự không chắc chắn những gì tôi đang làm sai và đọc lặp đi lặp lại của tài liệu hướng dẫn không giải quyết nó. Tôi chưa bao giờ thực sự là một anh chàng JavaScript. Tôi thậm chí không phải là một chàng trai PHP, có vẻ như đúng nhưng nỗ lực lặp đi lặp lại để làm cho nó đi đã thất bại mặc dù hỗ trợ hào phóng và cung cấp một tiền thưởng.
Cảm ơn sự giúp đỡ.
Hi Muskie, bạn sẽ làm rõ câu hỏi cụ thể của bạn là gì? – halfer
Điều đó có rõ ràng hơn không? Về cơ bản các mã không công cụ, nhưng không phải là hiệu ứng tường gạch với các thiết lập hiện tại của tôi. Cuối cùng tôi cũng muốn được thêm vào. – Muskie
Tôi tiếp tục đọc hướng dẫn tại đây: http://masonry.desandro.com/demos/basic-multi-column.html và thay đổi mục CSS chiều rộng mục và đối số javascript columnWidth và tôi tiếp tục nhận được hai cột và nhiều khoảng trắng trong trình duyệt của tôi ... – Muskie