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
Denis Zhidkov
2,660 PointsWhy does image gallery doesn't appear with full height?
Can anyone help me with the problem that I have with image gallery on my page? During the first load the height of image gallery doesn't appear in full width. When I reload the page the width get to the normal size. Can't understand why...
Webpage: http://halloween.hooters.com.ru/tatiyana
Thanks a lot in advance, Denis
Denis Zhidkov
2,660 PointsThe correct URL is http://halloween.hooters.com.ru/tatiyana
2 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsSo, first up, I can access the page at http://halloween.hooters.com.ru/masha
Not sure what the character on the end was meant to be, but it probably shouldn't be there.
As for the style issues, I noticed that the link tags used to load the flickity.css and bootstrap.min.css have the prefetch value in the rel attribute:
<link rel="stylesheet prefetch" href="http://flickity.metafizzy.co/flickity.css">
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
When I load the site and check the Chrome Dev Tools, those prefetches are failing.
Also, I get a 404 on the js/index.js file:
<script src="js/index.js"></script>
Not sure if any of that is related. The gallery loaded fine for me the first time, or after resizing the browser, but on refresh, it is squished to a very small height (same width though).
Denis Zhidkov
2,660 PointsI created 2 css files (flickity.css and bootstrap.min.css) and uploaded them to css folder. Changed all links to this files in html files. But it didn't help. The height of the image gallery is very small but when I am trying to resize the window it gets to the normal size. It also get to the normal size when I reload the page.
Any suggestions?
Iain Simmons
Treehouse Moderator 32,305 PointsTry the old URLs but remove the prefetch from the rel attribute.
Iain Simmons
Treehouse Moderator 32,305 PointsOr make sure you're correctly initialising the JavaScript, and only once the page is loaded.
Did you fix the issue with the index.js file?
Denis Zhidkov
2,660 PointsI uploaded old URLs and removed the prefetch from the rel. Nothing changed. I didn't quite understand what should I fix in index.js file, could you please explain?
Iain Simmons
Treehouse Moderator 32,305 PointsBefore I got a 404 Not Found error for the file js/index.js. That seems to have gone now, but you might want to check there's no issues serving that file.
Try setting the flickity option imagesLoaded to true.
"Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded."
Denis Zhidkov
2,660 PointsThanks. Imageloaded sets to true helped!
Sam Donald
36,305 PointsOn the page you linked to I don't see any image gallery at all. There's a image slider, but that seems fine to me.
If I click the "all the girls" button at the top I go to a page with an image gallery. Every image is the same, I women in a red dress. These all seem to display perfectly to me. And resize appropriately with media queries.
Perhaps you just need to empty your browsers cache and clear history.
I find that can cause issues for me when I'm building a site.
Sam Donald
36,305 PointsSam Donald
36,305 PointsAre you sure that's the right link? I'm getting a 404 error.