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

JavaScript

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

thumbnails in gallery

Please take a look at my codepen :

http://codepen.io/tbeckett24/pen/VLwmWy

What I currently have is 4 scaled down images in a div with a class "thumbnails".

What I want to do is to be able to click the thumbnails and the reveal the full size picture in a div next to it with the class "large-image".

Any advice on achieving this would be great

1 Answer

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

Without giving you a code example as it would be more beneficial for you to attempt this yourself I'll explain a simple solution. This solution will require you to use jQuery.

Create the large div element and style and position it as you want then add a style display:none; to it.

Now implement a jQuery method click for any 'img'. Then when a use clicks on an image, you can (amongst other ways) 'clone()' the element and set the 'html()' of the large div to the cloned component.

If you can't figure it out, post what you get done in you're code pen here and then I'll try and help you further.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

thanks for your comment it really helped. It gave me that starting point to get going. i done some playing around as I found that using clone gave me the same thumbnail size picture and not the larger image I wanted. I found something that works.

Please take a look at my codepen:

http://codepen.io/tbeckett24/pen/VLwmWy

Works great. I haven't really tried to apply styling all I care about now is learning the functionality. my next step is this. When the big picture shows up after the thumbnail is clicked I'm trying to get a description to show under the picture. So each picture in the large-image div has its own description. I'm gonna do some research see if I can work it but any ideas are always helpful.

Jayden Spring
Jayden Spring
8,625 Points

Sorry should have mentioned when you do .clone() then you can remove the fixed height with .removeAttr('height').

You're solution is also very good - it requires more thinking meaning you learn more! If you wanted to tweak it more, you could create the div when the image is clicked, size it to the screen and set the images margin to auto without a height constraint. Then you would get a 'full screen' type view.

If you found my answer helpful please feel free to upvote it.

Jayden