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!
@graphical_force
i’ve converted to html5 wordpress theme already.
hows your jQuery? there are still things i’d like to tweak.
fancy collab on getting it finished?
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.
Mary Lou I just can say: your work is simply…Delicious !
Hey !
If you liked Masonry, you should try Isotope by the same developer wich allows you to filter, reorder, creat, and other stuffs !
http://isotope.metafizzy.co/index.html
how can i embed a video light box in the content block?…. can you help me?
Thanks.
C.
Is there a way to put a close or hide option on the text overlay in the full-screen version?
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 :(
Hey! This is such a great post!
Would love iPhone support.
I’ve modified this design to work with my portfolio and blog! It’s just gone live at http://www.nickhurley.co.uk if you fancy having a look!
Thanks again Mary!
Hello,
Nice script ! I try to put it on a page with the jquery function load() but it don’t work. Could you help me ?
Thanks !
F.
Hi, this is great material, thx a lot.
btw, i’m trying to make the text background when clicking view project to semi transparant white which I think it would make it more neat, can you help me with it?
hi.very good
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??
Have you found a solution for the clicked background?
Very nice indeed!
It doesn’t display properly as in your demo.
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
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 :)
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!
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