Setting up jquery masonry on your drupal website

In this screencast we would be learning how to set up the masonry module on a drupal website. Jquery mansory is a dynamic layout plugin for jquery. With this plugin you can achieve a responsive design close to something like pintrest. The creator of masonry David DeSandro describes this plugin as "The flip-side of CSS floats". In other to achieve the desired result, we made use of two modules

1) Masonry Module http://drupal.org/project/masonry

2) Views infinte scroll  http://drupal.org/project/views_infinite_scroll

Here is a tutorial on how to setup the views infinte scroll module in drupal.   Tutorial

 

To follow this tutorial, it is assumed you have some knowledge of how to use the views module in drupal. 

There was a bug with the masonry module not working with the views infinte scroll module. to solve/fix this issue, here is a link where I got the patches 

http://drupal.org/node/1808018

Get the patch on #3 and #4 and everything should work fine.

Comments

Nice tutorial! We implemented the technique that you describe in the following project and the result is really satisfying. Check it out: http://www.top7news.gr/blogs

Add new comment