Creating a Responsive Photo Gallery with Templating

Responsive Photogallery on Code Pen

Here is the link to the working web application on CodePen (Works with your mobile too!):
http://codepen.io/samualli/pen/VYeZqN

This is a Responsive Photo gallery that utilizes a simple database and creates a visual output of each photo with it’s associated subtitles and links, and lays it out in a grid format. When the photo is moused-over, the description and title associated with each photo animates onto the screen.

Our professor Tim (the head at OddlyStudios) taught us how to use templating via the Underscore JS library.  This basically means using a sort of plugin for Javascript we can take different organized data and output it any way we want.

There is a reason behind the Hover Animation!

The challenge for this little project was problem solving how to display the title and description of each picture in the least obscuring way as possible to keep the photos as the primary focal point.  As I was brainstorming I decided on showing the text only when the user hovers over the photo to leave the photo unobscured until the user is interested in it.  The beautiful thing was that our mobile browsers have the capability to interpret the jQuery hover function as taps on your screen making this work on mobile devices as well.

Getting the Darn Hover to Function

One of the first challenges to get this baby beast function was to get the text to animate, and the photo to stand still when the user hovers over the photo.

My solution was to separate the text and the photo into two separate elements.  Technically this means that in the HTML, the text <div> will be nested within the photo <div>.  The beauty of this solution was that both the photo element and the text element can respond differently.  So in the case of my code, the “.contentBox” (the CSS class that effects each photo in the grid) will change the border color while the “.boxCover” will animate and show the text when the user rolls over the photo (“.contentBox”).

The Animation (Updated!)

In order to get this nifty little animation to work, this is what I did:

1) A white box containing all the text exists ninja-like over each photo and contains the specific description and photo title.  It is given a 40% height to take 40% of the picture real estate and positioned accordingly (60% from the top).

the CSS for the image cover

 

 

 

 

The magic is in the opacity!  Here’s what it would look like if we blew away the smoke and mirrors:

Opacity at 100%
Opacity at 100%

2) Here is the nifty jQuery function that creates the effect in a single line!

 

 

 

 

So once the box that houses all our content is hovered over, it finds the specific “.boxCover” that is associated with the box that was hovered over and applies the fadeTo animation to it.  In our case, it brings the opacity from 0% to 80%.  The second part of the function is when we hover out and fades the opacity of the text box back to 0%.

I wanted the animation to fade slowly for a nice effect when the box is hovered and to quickly fade when the user hovers out to create a more seamless transition between pictures.

Responsive Design!

When you resize the browser window, or look on the browser in your phone you can see that the number of columns adjust automatically because the width of the .vertWrapper (that houses all the content) is set at 75%.  This allows for the photos to realign and adjust automatically when the screen is resized.  Also another handy tip was to change our font sizes from px to em because em allows the font size to scale with font itself.

All this was made possible because my professor Tim taught us how to use Underscore, use JSON objects and how to layout the pictures using position.  Check out his codepen for great tutorials!  My professor Tim from OddlyStudios: http://codepen.io/OddlyTimbot/

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s