Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Logan Sparlin
Logan Sparlin
4,322 Points

Interactive Photo Grid

Okay, so I'm trying to implement an idea that I've had, but don't know where to start. I'm going to describe this in the best detail, and most clear english as possible, so I hope you understand what I'm trying to do.

I'm creating a website for a company that has 23 employees, but they all play a major role and are featured on the website. I'm trying to implement a photo grid that has 6 people per row, and 4 rows. I want the grid to just be the images of the people with no text or anything. So the photos will be laying right next to and on top of each other, no spacing. Then, when you hover over the image it shows the person's name and position over the image. I understand how to do this part, so I do not need ideas on this.

However, I want the user to be able to click on the image of the employee that they want to gather more information about, and then I want a section that is 100% width and a specific amount tall to span the width of the entire page, almost like a modal, but that doesn't pop up over the content. This section will have all the information about the employee that the person selected. Then, when the user clicks again, it closes and goes back to the same grid that was there before, or the user has the option to click another image in the grid either above or below the new section with the employees information and it will change the info inside the new section from the first employee they clicked on to the second.

It should be almost like a tab that you click on and it expands new content into a new area. I am very sorry if this doesn't make any sense, and will try and answer any questions as clearly as possible. I don't have any code yet, because I don't really know how to start.

Any input would be helpful, thanks!

-Logan

3 Answers

Is the effect you're describing the same one used on Google Images? http://www.google.com/imghp

Logan Sparlin
Logan Sparlin
4,322 Points

Neal,

Yes that is exactly what I'm looking for. I can't believe I didn't think of using that as an example.

Logan Sparlin
Logan Sparlin
4,322 Points

Neal,

Yes that is exactly what I'm looking for. I can't believe I didn't think of using that as an example.

James Barnett
James Barnett
39,199 Points

If you still need help ...

Let us know after you've got some code that does the parts you know how to do and some mocks ups to show the parts you don't know how to do.