jQuery Masonry Tips

jQuery Masonry : http://masonry.desandro.com/index.html

If call ajax and render each elements dynamically by javascrit, need to call 'appended' method. but sometimes the elements only to be shown on single column.
if need to show elements with multiple columns,
set width first
$("#div").masonry({columnWidth: 310});


 var box = renderSingleElement(item);
 var $singlebox = $(box);
 $("#div_single_element").append($singlebox).masonry( 'appended', $singlebox);

take note if set column width as 310, the width of single element should not be greater than 285, otherwise the elements still be in one column, not multiple columns, so take care to set the element width and column width.

expose URL to access local files on server

Sometimes, we need to access local files on server via HTTP URL. If the files are under /webapp/<project>, take tomcat as an example, it is very east to access them via relative path. If the files are outside of tomcat or other web app servers, how to resolve it?

1) create soft link at /var/www/html/<your root context>


ln -s <file location on server> imgupload


2) modify apache setting

<Directory />
Options FollowSymlinks
Allow from all
</Directory>

refer to http://httpd.apache.org/docs/2.2/mod/core.html

3) then on web page
<img src="/imgupload/<subfolder if have>/abc.jpg" />

use JSTL to render image blob

1) on DB level, use byte[] to present image

private byte[] image

2) on servlet level, encode byte[] with Base64

String imageBase64=Base64.encode(image);

3)

<img src="data:image/jpg;base64, ${base64Image} "  height="152" width="267"/>