Geek Answers Handbook

Jquery masonry adds custom sized images.

Evening!

My current code is:

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"/>'

For the image size to be inserted at 280x160, I would like these images to be more dynamic, and I would also like to have little space between each box, how can I do this?

Website for reference:

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

(Do not use the first search bar.)

+1
source share
2 answers
 $items.imagesLoaded(function(){ $container .append( $items ).masonry( 'appended', $items, true ); });

This is actually what I needed to do all this time.

+1
source

I don't know if this is the right thing to do (in the world of jQuery Freemasonry) since I 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%; }

from:

 .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 }
0
source

More articles:


All Articles