Używanie masonerii, jQuery i PHP do stworzenia okładki albumu

Question

Przeczytałem o masonerii i po tym, jak nie udało się uzyskać obrazu dołączającego do pracy, zalecono przejście na następcę Isotope. Próbowałem ulepszyć lub stworzyć wariacje w galerii okładek albumów, coś co zrobiłem raz lub dwa przed użyciem tych samych klas PHP.

mogę uzyskać podstawową funkcjonalność do pracy, ale przycisk kliknąć, aby dodać więcej obrazów zawsze nie działa. Ciągle czytam dokumentację jQuery i wypróbowałem różne debuggery JavaScript, ale zawsze klikam, gdy do mojej galerii nie są dodawane żadne zdjęcia.

prób i błędów jest zdecydowanie konieczne, aby uzyskać najlepszy układ patrząc.

Największa okładka albumu ma rozmiar 500 pikseli, a najmniejsza w interfejsie API wynosi 75, a dobór właściwej szerokości kolumny pomaga. Obecnie używam 75, ale 50 może działało lepiej. Chcę tylko dodać zdjęcia do pracy i zrobić to za pomocą tego małego eksperymentu.

chciałem spróbować czegoś podobnego do tego technique of appending more images to the bottom. Chcę dołączyć więcej okładek albumów, które pobieram z różnych interfejsów API (Amazon Product API, Last.fm, iTunes) za pomocą PHP. Wszystkie okładki albumów pochodzą z API, a ja używam PHP, aby znaleźć adresy URL z tytułem i wykonawcą albumu. Mój kod działa: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

Zmieniłem regułę CSS wiele razy, teraz mam tylko domyślny CSS sugerowany przez autora izotopu.

kod PHP, który pętle i produkuje 10 DIV z jednym obrazem na 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>'); 

I wreszcie Oto JavaScript, ostateczna problemem jest tu gdzieś:

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

Łącze zostanie wywołany po kliknięciu przeszedłem przez to. PHP tworzy znaczniki DIVs As i IMG. Naprawdę nie jestem pewien, co robię źle i powtarzające się odczyty dokumentacji nie rozwiązują go. Naprawdę nigdy nie byłem facetem od JavaScriptu. Nie jestem nawet facetem PHP, wydaje mi się to słuszne, ale powtarzające się wysiłki zmierzające do tego, aby to osiągnąć, zawiodły mimo hojnej pomocy i oferowania nagrody.

Dzięki za pomoc.

Answer 1

Spróbuj zmienić wartość columnWidh i szerokość item. Murowanie wyrównuje element z pierwszym układem o najlepszej zgodności. Działa na równaniach matematycznych. Idealna obudowa z cegły to tylko hipotetyczny idealny przypadek. Wykonuję kilka prób na firebug i innych narzędziach, aby mur mógł pracować z idealnie dopasowanym układem. Kluczem jest uzyskanie wartości columnWidth i width, rynny itp. W taki sposób, aby rozwiązał równania logiczne w dobrych wartościach.

:: EDIT ::
znalazłem link zapisany w mojej stronie kieszeni, z czego ja zupełnie zapomniałem o. To świetny samouczek. Więc wróciłem, żeby to tutaj dać. Zalecane dla wszystkich, którzy mają problemy z rozpoczęciem korzystania z tej wtyczki.

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

Answer 2

Aby uzyskać więcej mur podobny efekt nie jest ustawiona szerokość elementu za pomocą CSS. To nie było krystalicznie czyste, biorąc pod uwagę the instructions here. Ale wiele testów zdaje się wskazywać, że samo podanie wartości columnWidth, a następnie zezwolenie przeglądarce i javascriptowi na to, aby była najlepsza, zbliża się do wydajności, której szukam.Będą musiały poprawić i ostatecznie spróbować dołączyć ...

Answer 3

Kamieniarstwo nie jest bardzo opisową nazwą dla tego. W rzeczywistości jest to problem optymalizujący. Jest to coś, co nazywa się problemem np. Ponieważ istnieje zbyt wiele permutacji do sprawdzenia. Zwłaszcza plugin jQuery do kamienia to 1-drożny solver pakujący i układa cegły w pionowe kolumny. Domyślnie Css układa klocki w porządku poziomym. Innymi słowy jest to rodzaj pierwszego sąsiedniego modelu drzewa.

Aktualizacja: Spróbuj dodać murarskich do manekina div i usuwać everthing innego:

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

Chyba go overthink. Zmienna jest pusta, ponieważ przypisujesz ją do obiektu DOM. Najprawdopodobniej stanie się również obiektem i nie będzie użyteczny.

Answer 4

To relly dobrze wyjaśnione tutaj Jquery Masonry Seamless Responsive Image Grid + chciałbym spróbować zrobić to samo z izotopu http://isotope.metafizzy.co/

edit: myślę isoptope i murowane właśnie sortowaniu 1 wymiarową opakowania bin, i kim jesteś może poszukuje po to 2 wymiarowa bin pakowania

takiego http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (sprawdź skomplikowany przypadek, że pasuje do wszystkich skrzynek doskonale)

i lib za to https://github.com/jakesgordon/bin-packing/