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.


View demo Download source

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.

The beautiful images are by Kyle van Horn, check out his Flickr Photostream.

jQuery Masonry is by David deSandro and you can find it here.

The HTML for an item in the portfolio is the following:

<div class="item block" data-bgimage="images/1.jpg">
	<div class="thumbs-wrapper">
		<div class="thumbs">
			<img src="images/thumbs/1.jpg"/>
			<img src="images/thumbs/2.jpg"/>
		</div>
	</div>
	<h2 class="title">Personal Works</h2>
	<p class="subline">Concept <span class="fancy">&</span> Design</p>
	<div class="intro">
		<p>
			Some short introduction 
			<a href="#" class="more_link">View project</a>
		</p>
	</div>
	<div class="project-descr">
		<p>A longer description...</p>
	</div>
</div>

We use a jQuery template for the fullscreen structure:

<!-- Fullscreen jQuery template -->
<script id="fullviewTmpl" type="text/x-jquery-tmpl"> 
	{{html bgimage}}
	<div class="full-view">
		<span class="full-view-exit">Exit full screen view</span>
		<div class="header">
			<h2 class="title">${title}</h2>
			<div class="full-nav">
				<span class="full-nav-prev">Previous</span>
				<span class="full-nav-pages">
					<span class="full-nav-current">${current}</span>/
					<span class="full-nav-total">${total}</span>
				</span>
				<span class="full-nav-next">Next</span>
			</div>
			<p class="subline">${subline}</p>
			<span class="loading-small"></span>
		</div>
		<div class="project-descr-full">
			<div class="thumbs-wrapper">
				<div class="thumbs">{{html thumbs}}</div>
			</div>
			<div class="project-descr-full-wrapper">
				<div class="project-descr-full-content">
					{{html description}}
				</div><!-- project-descr-full-content -->
			</div>
		</div><!-- project-descr-full -->
	</div><!-- full-view -->
</script>

When loading the page, we have the initial grid view:

And when we click on “View Project”, the fullscreen mode will be loaded:

We hope you like this little experiment and find it useful!

View demo Download source

Previous:
Next:

Tagged 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.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 61

Comments are closed.
  1. 6

    That full screen view is sweet! Have you tested this on common browsers/versions?

    Thanks for sharing this gem with us.

  2. 12

    This is great. I’d love to implement this for my web portfolio. It’s a really beautiful method to display projects. Thanks for posting!

  3. 13

    Hi Mary,

    I love your tutorials; it’s nice to see something different for a change.

    How can I contact you for some freelance / contract work, if you’re still available?

  4. 15

    the dynamical grid is perfect for android browser execpt for the fullscreen :)

  5. 17

    hi mary…. very nice just like the other posts,,, thx for this… do u have a personal site?? i ve been learning a lot with you.. thx..

  6. 18

    You guys are the best at codrops!!I’m a graphic designer knowing a few things about coding , but you guys make it so simple for us …yes i have a problem with the math, coding and all this things which made my head bouncing around, but thank you so much, i discovered that jQuery Masonry last week and i was trying to figured out how to make exactly the same template (the fullscreen view is a plus for me)

    By he way, i want to know if i can use your code to do my portfolio?

    Bye

  7. 19

    Hi thanks for posting another great piece of jquery, its always great to check out new designs and functionality, like Wilson mentioned above do you have a personal showcase of your work anywhere on the web?

  8. 20

    Thank you Mary! Nice work! And Moreno I like your site as well!

Comments are closed.