so, trying come radom-like image wall. discovered jquery plugin called freewall.
i able come this:
everytime reload page, images new widths , positions. gives nice "random" animation going on, can see on right there's empty space should filled previous image... other times makes 3 lines instead of 2.
the code i'm using part copied sourced , mixed mine. don't quite understand random generation process doesn't make sense me. works point...
this current code:
<div class="container"> <div id="freewall" class="free-wall bottomeq"></div> <script type="text/javascript"> $(document).ready(function() { var temp = "<a href='{url}'><div class='mosaic-cell' style='width:{width}px; height: {height}px; background-image: url(<?php print $basedir; ?>{imgurl}); '></div></a>"; var w = 1, html = ''; var categories = json.parse('<?php print json_encode($categories); ?>'); categories.shift(); categories.shuffle(); $.each(categories, function(index, category){ w = 200 + 400 * math.random() << 0; ctemp = temp.replace(/\{height\}/g, 200); ctemp = ctemp.replace(/\{width\}/g, w); ctemp = ctemp.replace("{imgurl}", category.image.full); html += ctemp; }); $("#freewall").html(html); var wall = new freewall("#freewall"); wall.reset({ selector: '.mosaic-cell', animate: true, cellw: 200, cellh: 200, onresize: function() { wall.fitwidth(); } }); wall.fitwidth(); // scroll bar appear; $(window).trigger("resize"); }); </script> </div> - how can avoid empty spaces, forcing previous image fill remaining space?
- what
w = 200 + 400 * math.random() << 0;exactly?<< 0? - how can force 2 lines on freewall, didn't notice usable parameter on documentation.
thank you.
