javascript - Using Masonry, jQuery, and PHP to make an album cover gallery - Stack Overflow

admin管理员组

文章数量:1343901

I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.

I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.

Trial and error is definitely required to get the best looking layout.

The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.

I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers e from APIs and I use PHP to find the URLs given the album title and artist. My code is running: .php

I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.

PHP Code that loops and produces 10 divs 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 lastly here is the javascript, the final problem is in 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 gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.

Thanks for the help.

I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.

I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.

Trial and error is definitely required to get the best looking layout.

The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.

I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers e from APIs and I use PHP to find the URLs given the album title and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.

PHP Code that loops and produces 10 divs 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 lastly here is the javascript, the final problem is in 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 gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.

Thanks for the help.

• php
• javascript
• jquery
• jquery-masonry
• jquery-isotope

Share Improve this question Follow edited May 23, 2017 at 12:23 CommunityBot 111 silver badge asked Feb 21, 2013 at 17:34 MuskieMuskie 57733 silver badges2121 bronze badges 7

• Hi Muskie, would you clarify what your specific question is? – halfer Commented Feb 21, 2013 at 20:43
• 1 Is that clearer? Basically the code does stuff, but not the brick wall effect with my current settings. Eventually I want to get appending to work too. – Muskie Commented Feb 22, 2013 at 18:12
• I keep reading the instructions here: masonry.desandro./demos/basic-multi-column.html and altering item width CSS entry and columnWidth javascript argument and I keep getting two columns and a lot of white space in my browser... – Muskie Commented Feb 22, 2013 at 20:01
• It's really well explained in other answer stackoverflow./questions/12115037/… – PD81 Commented Mar 7, 2013 at 1:57
• I can try switching to isotope maybe later tonight. From a client calling them they are very similar, I still don't have jQuery and PHP interaction down. I appreciate the help. I'm not sure why this problem has proven so stubborn. – Muskie Commented Mar 9, 2013 at 1:20

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 4

Try adjusting the columnWidh value and width of item. Masonry aligns element with best fit column first layout. It works on mathematical equations. So a perfect, brick wall fitting is only hypothetical ideal case. It takes me a few tries on firebug and other tools to get the masonry working with ideally fitted layout. The key is to get the value of columnWidth and width, gutter etc in such a way that it solves the logic equations in good values.

:: EDIT ::
I found a link saved in my pockets page, of which i totally forgot about. It is a great tutorial. So i came back to give it here. Remended to everyone who have trouble getting started with this plugin.

http://wwwmagazine./tutorials/get-started-jquery-masonry

Masonry isn't a very descriptive name for it. In fact it's an optimizing problem. It's something that is called np problem because there is too many permutations to check. Especially the masonry jquery plugin is a 1d bin-packing solver and it's arrange the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words it's a depth-first sort of an adjacent tree model.

Update: Try adding masonry to your dummy div and delete everthing else:

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

I think you overthink it. The variable is empty because you assign it to a dom object. It's most likely bee also an object and not usefull.

It's relly well explained here Jquery Masonry Seamless Responsive Image Grid + I would try to do exactly the same with isotope http://isotope.metafizzy.co/

edit: I think isoptope and masonry just sorting out 1 dimensional bin packing, and what you are maybe looking after is 2 dimensional bin packing

like this http://codeinplete./posts/2011/5/7/bin_packing/example/ (check plex case it fits all boxes perfectly )

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

To get the more brick wall like effect you don't set an item width using CSS. This wasn't crystal clear given the instructions here. But a lot of testing seems to indicate that just specifying a columnWidth and then letting the browser and javascript do it's best gets closer to the performance I'm looking for. Will have to tweak and eventually try appending...

本文标签： javascriptUsing MasonryjQueryand PHP to make an album cover galleryStack Overflow