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
Robert James
20,491 PointsImage galleries with HTML and CSS
Hi
I have built a website for an artist, and have a number of pages with image galleries!
At the moment i have resized the images, then when you click an image it enlarges using a jQuery lightbox showing a full size of the image. This all works!
Some of the images are different sizes, so the smaller images in the gallery are different sizes which makes the layout a little uneasy!
What i want to be able to do is resize and crop the images so that i have thumbnails that are all the same size, until you click and open the full image.
Is anyone able to help? Thanks in advance!
2 Answers
cesare
15,180 PointsTry to replacing imgs with divs like this:
HTML
<div class="image" style="background-image:url(image.jpg)"></div>
<div class="image" style="background-image:url(image2.jpg)"></div>
<div class="image" style="background-image:url(image3.jpg)"></div>
CSS
.image {
width: 50px;
height: 50px;
background-size: cover;
}
There are many solutions, this is one of these. You can also search for jQuery Image Grid plugins, or tutorial to "how to" create dynamic images thumbnails.
Wayne Priestley
19,579 PointsHi Robert,
You could resize all your images so have have equal sized thumbnail images for your gallery pages, then have the full sized images linked to those so that when the thumbnail is clicked the large image appears.
I would suggest using a Modal for the full size images so the users stay on the gallery page and the image pops up, and can be closed without navigating back and forth.
Some very good Modals are available already written for you and are available with a quick Google search. If you need any more help, just ask.
Hope this helps.
Wayne Priestley
19,579 PointsI like this Modal found at codepen as its css only and looks clean.
Robert James
20,491 PointsYeh i was thinking of resizing so that they were all the same but of the images are like for example 400 x 800, which would make them look squashed???
What i was hoping to be able to do was re-size and crop, so maybe like a proportion of the image was visible in the thumbnail then when you click you view the full image.
As for the large image view i am using a lightbox so you dont have to click back, there is just an overlay over the gallery! I will look into these modals though.
Thanks!
Wayne Priestley
19,579 PointsHey Robert,
Not sure if your using a Mac or PC, but there are lots of apps that will let you just choose a certain pixel size so you can crop all the images to say 200x400 then save them as your thumbnails.
You can do as you suggested and take the crop to contain the most interesting part of the full image. Then use your light box to display the full image.
Robert James
20,491 PointsUsing a PC. I could use PS to to crop them to the main part of the image, that would mean uploading to sets of the image, one for the thumbnail and one for the larger preview i guess??? and i'm working with well over 100 images, so probably not practical. What do you think?
I guess best option would be a re-size in html/css for the thumbnail then show the full image when clicked!
Thanks