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.

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 61

Comments are closed.
  1. Great gallery! I would like to know how to edit the thumbnails so that when in full screen mode they can be clicked and they become the background.

    Any advice??

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

    Gerhard

  3. 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~~~

  4. 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 🙂

  5. Hello,

    Is it possible to apply the image caroussel on the full sized images?
    So that you can see all the full size images as a bakcground.

    I hope to hear from you!
    Thank you in advance!

  6. Hello,

    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?

    Thanks,
    Abriel