Using Freemasonry, jQuery, and PHP to Create an Album Art Gallery

Question

I read about Freemasonry and after I didn’t get an image that added to the work, it was recommended that I switch to Isotope's successor. I tried to improve or create variations in the album art gallery, something I did once or twice before using the same PHP classes.

I can make the basic functions work, but the button to add more images always did not work. I keep reading jQuery documentation and I tried using various JavaScript debuggers, but I always get without adding images to my gallery when I click.

Litigation and error are certainly necessary to get the best possible layout.

The largest album cover seems to be 500 pixels, and the smallest number found in the API is 75, choosing the right column width helps. I am currently using 75, but 50 might work better. I just want to add images to my work and do it with a little experiment.

I wanted to try something similar to this way of adding more images to the bottom of the screen . I want to add more album art that I get from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All album art is taken from the API, and I use PHP to find the URLs with the album name and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

I have changed the CSS rule many times, now I have the default CSS proposed by the author of Isotope.

PHP code that processes and generates 10 sections with one image per 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>'); 

And finally, here is javascript, the last problem here somewhere:

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

The link is called when clicked, I went through it. PHP creates DIVs As and IMG tags. I am really not sure what I am doing wrong and repeated readings of the documentation do not solve. I have never been a JavaScript guy. I'm not even a guy from PHP, it seems right, but repeated efforts to eliminate it have failed, despite the generous help and offer of generosity.

Thanks for the help.

Answer 1

Try setting columnWidh and item width. Freemasonry aligns the element with the most appropriate column in the first layout. He works on mathematical equations. Thus, an ideal, brick screed is just a hypothetical ideal case. I need a few tries on firebug and other tools to get the pantry to work with the perfect layout. The key is to get the column width, width, gutter, etc. So that he solves logical equations in good values.

:: EDIT ::
I found a link stored on my page in my pockets, which I completely forgot about. This is a great tutorial. So I came back to give it here. Recommended for anyone who has problems running this plugin.

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

Answer 2

Freemasonry is not a very descriptive name for him. This is actually an optimization problem. This is what is called the np problem, because there are too many permutations to check. Especially the masonry jquery plugin is 1d gratings for packaging in bottles, and it places the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words, this is a view of depth in a neighboring village model.

Update: try adding masonry to your dummy div and remove everything else:

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

I think you mixed it up. The variable is empty because you assign it to the dom object. Most likely, it will become an object, and not useful.

Answer 3

This is rightly explained here by Bright Classic Classical JQuery Shell . I would try to do the same with the isotope http://isotope.metafizzy.co/

change I think isoptop and masonry just sort 1-dimensional packaging from bi-currency, and what you might care about is 2-dimensional packaging in bottles.

like http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (check the complex case, it works perfectly with all mailboxes)

and lib for https://github.com/jakesgordon/bin-packing/

Answer 4

To get more brick wall effect, you do not set the width of the element using CSS. It was not crystal clear if instructions were given here . But many tests seem to indicate that just specifying the width of the column and then letting the browser and javascript do this is best suited to the performance I'm looking for. It will be necessary to configure and eventually try to add ...