Expanding Fullscreen Grid Portfolio

Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”. If you know Flipboard for the iPad, then you might recognize this effect we got inspired with.

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Mary Lou, how easily would this script be modified to make the expanding box stay within a parent width, but expand to the needed height of whatever is loaded into the box? Basically I want to constrain the box expand to 960px and have the height inherit what is in the box when it loads.

Hello and thanks for this fantastic post, it is really great! But i also have the same question as Nikki, is there a way to hide the project description on request? i’ve tried fiddling with jquery but i haven’t coded it before and it doesn’t seem to work :(

Hello Mary Lou! Nice work!
I have one question. Is it possible to configurate a fullscreen slideshow for each portfolio item.
Sorry my knowledge in jquere is not enough to find a solution. Maybe you can give me an answer. Thx in advance.

Hi Mary,
Thank you for the great work. I used your code to build one of my webpage. However I couldn’t solve one question: all of the are inside of tag. If I duplicate the container twice. the second one doesn’t not work:( Can you help me with it? Or Can I hire you to do so? Thank you~~~

Hello,
I really love your work. I have one question. I would like to know if it is possible to put a close or hide option on the text overlay in the full-screen version? So that I can view the whole background. I would really like to use it in one of my webpages. Thank you :)

I’ve been working with the code and I wanted to know the same as Rene how it would be possible to apply the image caroussel JavaScript and alter it so whenever you click on the next arrow, it would change the background image to match the thumbnail shown?