Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Logan Sparlin4,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 Sparlin4,322 Points
Yes that is exactly what I'm looking for. I can't believe I didn't think of using that as an example.
James Barnett39,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.