jquery masonry appending images with custom sizes.

Question

Evening!

My current relevant code:

var $test;
var $iterator = 0; 
$(document).ready(function() {
    $("#demo-input").tokenInput("php-example.php" ,{
        classes: {
            tokenList: "token-input-list-facebook",
            token: "token-input-token-facebook",
            tokenDelete: "token-input-delete-token-facebook",
            selectedToken: "token-input-selected-token-facebook",
            highlightedToken: "token-input-highlighted-token-facebook",
            dropdown: "token-input-dropdown-facebook",
            dropdownItem: "token-input-dropdown-item-facebook",
            dropdownItem2: "token-input-dropdown-item2-facebook",
            selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
            inputToken: "token-input-input-token-facebook"
        },
        hintText: "Type in the names of your Tags",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});

var $container = $('#container');

$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector: '.box',
        columnWidth: 280,
        isAnimated: !Modernizr.csstransitions
    });
});

$(document).ready(function() {
    $("input[type=button]").click(function () {
        $.ajax({ url: "generatehtml.php",
        data: {action: $(this).siblings("input[type=text]").val()},
        type: 'post',
        dataType: "json",
        success: 
            function(response){
                $test=response;
                $iterator =  $test.length;                  
                for (i=0; i<10; i++){
                    var $boxes = $(balls($iterator));
                    $container.append( $boxes ).masonry('appended', $boxes);                        
                }

                var $boxes = $( '<div class="box" STYLE="color: rgba(255, 255, 255, 1);">These results are ranked from<BR> most similar, to least similar.<BR>The percentage below each game <BR>indicates how similar to the <BR>original input that game is.<BR></div>' );
                $container.prepend( $boxes ).masonry('reload', $boxes); 
            }
        });
    });
});


window.onscroll = scroll;

function scroll(){  
    var $boxes = $(balls($iterator));
    $container.append( $boxes ).masonry('appended', $boxes);    
    }  
//+'<img src="timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' Replace this with the one below when timthumb is whitelisted
function balls($i){
    $iterator -= 1;
    var $width = 7.5;
    return ('<div class="box">'
    +''+$test[$iterator][1][2]+''
    +'<img src="'+$test[$iterator][2]+'"  width="280" height="160"/>'
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    +'</div>');
}

As you can see in:

 $container.imagesLoaded( function(){
 $container.masonry({
    itemSelector: '.box',
    columnWidth: 280,
    isAnimated: !Modernizr.csstransitions
 });
 });

And

 +'img src="'+$test[$iterator][2]+'"  width="280" height="160"/>'

That the image size is being forced into 280x160, I'd like these images to be a bit more dynamic, and I'd also like there to be little space between each box, how can I do this?

Site for reference:

http://newgameplus.nikuai.net/TEST/

(Don't use first search bar.)

score 1 · Answer 1 · answered Jun 23 '12 at 20:32

1

$items.imagesLoaded(function(){
 $container
 .append( $items ).masonry( 'appended', $items, true );
});

This is actually what I needed to do all along.

answered Jun 23 '12 at 20:32

Adola

588
7
21

can you explain this better? I also want to have images of any size. – toto_tico Jul 16 '13 at 10:38

score 0 · Answer 2 · answered Jun 23 '12 at 15:51

0

I don't know if this is the right thing to do (in the jQuery Masonry world) as I've never used jQuery Masonry, but you could try the following.

First update the image creation code:

function balls($i){
    $iterator -= 1;
    var $width = 7.5;
    return ('<div class="box">'
    +'<p>'+$test[$iterator][1][2]+'</p>'
    +'<img src="'+$test[$iterator][2]+'"/>'
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    +'</div>');
}

Replace the following CSS:

.box img, #tumblelog img {
    display: block;
    width: 100%;
}

with:

.box img, #tumblelog img {
    display: table-cell;
    max-width: 280px;
    max-height: 160px;
}

And add the following CSS:

.box {
    width: 280px;
    display: table-row;
    text-align: center;
}

.box p {
    margin-bottom: 0;
    overflow: hidden;  // hide the overflow of text
}

answered Jun 23 '12 at 15:51

JonWarnerNet

1,112
9
19

Am I not mistaken in thinking that this css will force the images into a width of 280px? That's not what I want, I want the images to be able to be various sizes, and still work with Maonsry. – Adola Jun 23 '12 at 16:00
This will force the box to be a maximum of 260x160, images inside will resize to fit that box. – JonWarnerNet Jun 23 '12 at 16:03
See, I guess that's what I"m getting at, i dont' want to force those images into that size. I actually want to be able to have the images larger, to smaller. (More related items will display larger) And that's where my whole question on imagesLoaded() plugin came from. – Adola Jun 23 '12 at 16:04
Hmm interesting, I think you'll need someone who has some experience in this (jQuery Masonry) to answer, unfortunately I've never used it. Try their documentation/examples: http://masonry.desandro.com/demos/basic-multi-column.html – JonWarnerNet Jun 23 '12 at 16:08
say I didn't want to resize the image at all, and just diplay it in full, if the images are cached, the site works fine, but if the images are not, the the masonry gets executed first, before the images are loaded, and that is a known issue, the resolution is to use the 'imagesLoaded()' plugin, but, either: A. It isn't working. B. I'm not using it in my code correctly. – Adola Jun 23 '12 at 16:08
Did you see my updated post about the two calls to $(document).ready on the previous question http://stackoverflow.com/a/11170368/1441046 The issue that your not calling the imagesLoaded() in the right location. – JonWarnerNet Jun 23 '12 at 16:10
I've updated my code to reflect your changes, and there doesn't seem to be a visible change. I think I've narrowed down my problem though, upon searching for a game the FIRST time, before images are cached, we seem to get some nasty artifacts. However, if I search for that game again, I get the expected results. I suspect because the images have been cached. I"m not sure why this is the case, but I think I need some advice from someone who has used jQuery's Masonry. – Adola Jun 23 '12 at 16:28
http://pastebin.com/ZvXFh48x Here is an example of how the plug in is used, but it's being used as a callback function I think, I'm not sure how to modify this code to work with the .append method. – Adola Jun 23 '12 at 16:35

jquery masonry appending images with custom sizes.

2 Answers2

Linked