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

    Clean, simple and beautiful!
    I will use this idea for abandoned dogs adoption website. Thank you!

  2. 6

    Great plugin. Just one request, would it be possible for you to do a version that somehow integrates the history/bbq plugin?

  3. 10

    Awesome! you just nailed it Mary Lou. Love your tutorials. Thank you so much.

  4. 11

    Excellent work! (As always).
    Just a shame, when in full screen mode the thumbnails seem redundant. Be excellent to be able to then click them and they become the background. jQuery newb here :(

    Anyone know how to do such? Can’t see it being much of an extension

  5. 15

    Nice work ! I use the same technique for my site, err, sandbox. I’ll compare codes, mine is a experimental not optimized mess and i have not implemented any fullscreen mode.

    This will be very useful, thanks a lot.

  6. 16

    Nice work. However I find the interface slightly hard to figure out. I think it’s mainly because of the style of the arrows an link to view in full screen.

  7. 17

    Hi Mary Lou , please you have to help me!!i can’t figure out how to change color for each “block”, i’m really bad codder .It’s a little bit confusing but i want to use this template as a “blog” so i want to implement different colors on the block for different categories. I ‘m pretty sure you will understand me. As bad codder as i am i tryed really hard do to it by myself, but i guess i’m outta of the ligue!I know its kind of boring for you cause you already made this template for us, but if you can help me on that one please, i will be really thankfull as i have an interview next week and i really want to show them my work this way. Thank you

    –>If anybody else can help too , please feel free to contact me.Thanks

  8. 18

    I love this. I think I need to make this into a wordpress theme if it already has not been done.

    Good job!

  9. 19

    Hello,

    I love this template! I am just having one problem. I have included captions with each of the expanded images. Sometimes this text doesn’t show and the blocks of text that don’t show change from time to time. But if I nudge the corner to resize the window or go backwards through the images it will appear! I have checked the code over and over and can’t figure out whats happening! I am submitting work for a review this Friday and have to fix this right away! Any help you could offer would be wonderful. Thanks!

  10. 20

    ok i have to apologize!!cause i finally got the solution!!it was really simple. I told you i wasn’t good codder. I’m designer but not codder.
    Anyway , i still have to figure out how to apply different size on each block.

    if you have an idea please?

    thanks

Comments are closed.