Expand content similar to google search images layout?

In my wordpress blog the posts are showed only using the feature image of each one ( as a grid or wall of images ). Layout is very similar to google search images.

When clicked it goes to the post itself showing the content in its single page.

Read More

Could someone give me an idea of how could I expand the content just like the new google search images is doing ?

In resume, how could the content appear under the image ( and scroll the page according ) with the X for closing that new div?

I understand the ajax calling that has to be done but I am a litte lost of how to implement it in jquery.

I supposse it has to follow this steps:

1) once clicked the image the “wall” scrolls to top and closes other content div that could be open
2) it opens a new div under
3) ajax calls the post content and puts in this new div

Thanks!

Related posts

Leave a Reply

1 comment

  1. This can be done using both css and jquery. Its a little hard to explain the whole process but to give you an idea. Use css selectors to correctly position the new div. And use ajax to load content.