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

HTML How to Make a Website Creating HTML Content Add Image Gallery Content

My images only show as standard picture thumbnails on my preview tab.

My preview page loads but the images appear as thumbnails instead of the full size pictures like in the video? When I click on each individual picture (on preview page) they do load up, but I assume there should be pictures rather than thumbnails before i do this? Please help!

6 Answers

Hi Paul,

I you creating the index.html file with the 5 images on ?

Craig

Yes the images are on the index.html so when I click on the thumbnail the real images come up

Hi Paul,

Code should look like below,

index.html file

html
            <section>
              <ul id="gallery">
                <li>
                    <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>
                <li>
                    <a href="img/numbers-02.jpg">
                        <img src="img/numbers-02.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>
                <li>
                    <a href="img/numbers-06.jpg">
                        <img src="img/numbers-06.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>
                <li>
                    <a href="img/numbers-09.jpg">
                        <img src="img/numbers-09.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>
                <li>
                    <a href="img/numbers-12.jpg">
                        <img src="img/numbers-12.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>                
              </ul>
            </section>

Check you markup look like the above is so I will drop in the relevant css for the images I would also check you have the correct href="" 's for the images as things are easily overlooked at all levels of coding.

Regard Craig

Thanks Craig. I'll have a really good look. Hopefully it will work!

No problem,

here is the relevant css just in case you want it for reference:

css

img {
    max-width: 100%;
}


/*****************************
page: portflio
*****************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;

}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}

hope this helps in some way Paul !

Craig

Thanks craig. It all works now. All I needed to do was start that HTML line from scratch and be patient and it works now. Really couldn't see what i'd done to begin with though!

Happenes to everyone from beginners to experts Paul my flaw is css selectors ... Once im past the normal element / id / class selector i hit a wall lol , but there really is some great resources out there my favourite is the mozilla dev network if you become familiar with that it will become a huge help in the near future!

Craig