CODEWITHSUNDEEP
thumbnailslightbox
Mark LoProto
Mark LoProto

Reputation: 3

Creating Thumbnails for Lightbox Images

Can't for the life of me get my images to be thumbnails. Page is:

www.aliceskids.org/kidswehelp2.html

I have it calling:

#kidswehelp_images {
position: relative;
float: left;
width:  25px;
height: 25px;
background-position: 50% 50%;
background-repeat:   no-repeat;
background-size:     cover;}

Just trying to get the images to be sized the same so it's a lot neater.

[http://www.aliceskids.org/kidswehelp2.html]

  <a href="../images/thankyounotes/girl_clothing.jpg" data-lightbox="kidswehelp" data-title=""><img id="clothing" src="../images/thankyounotes/girl_clothing.jpg" class="myThumbs"></a>

    <a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="myThumbs"></a>

    <a href="../images/thankyounotes/soccer_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="soccer" src="../images/thankyounotes/soccer_equipment.jpg" class="myThumb"></a>

    <a href="../images/thankyounotes/maxx_clothing.jpg" data-lightbox="kidswehelp" data-title=""><img id="maxx" src="../images/thankyounotes/maxx_clothing.jpg" class="myThumb"></a>

    <a href="../images/thankyounotes/new_shoes.jpg" data-lightbox="kidswehelp" data-title=""><img id="newshoes" src="../images/thankyounotes/new_shoes.jpg" class="myThumb"></a>'

That's for the images.

This is from the stylesheet:

'.myThumbs {
float: left;
margin-right: 1%;
margin-bottom: 0.5em;
width: 50%;
height: 50%;}'

Upvotes: 0

Views: 572

Answers (1)

Simon
Simon

Reputation: 784

You are applying 25px to the whole div rather than the images themselves.

Give each image in that group a class like:

class="mythumbs"

then add the CSS

.myThumbs {
width:  25px;
height: 25px;
}

you can then remove your CSS for #kidswehelp_images

Upvotes: 0

Related Questions