CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniela Gocheva
Daniela Gocheva

Reputation: 63

Simple gallery loading all pictures when opened for a first time

I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.

Here's the HTML:

<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>


<nav class="nav">
<ul>
<li class="current"><a href="Index.html"><b>MENU</b></a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">PHOTOGRAPHY</a></li>
<li><a href="QuotesAndThoughts.html">QUOTES & THOUGHTS</a></li>
<li><a href="AboutMe.html">ABOUT ME</a></li>
</ul>
</nav>



<div id="gallery">
    <div id="thumbs">
        <a href="javascript: changeImage(1);"><img src="Pictures/Photography/image1.jpg" alt="" /></a>
        <a href="javascript: changeImage(2);"><img src="Pictures/Photography/image2.jpg" alt="" /></a>
        <a href="javascript: changeImage(3);"><img src="Pictures/Photography/image3.jpg" alt="" /></a>
        <a href="javascript: changeImage(4);"><img src="Pictures/Photography/image4.jpg" alt="" /></a>
        <a href="javascript: changeImage(5);"><img src="Pictures/Photography/image5.jpg" alt="" /></a>
        </div>
    <CENTER>
    <div id="bigimages">
        <div id="normal1">
            <img src="Pictures/Photography/bigimage1.jpg" alt=""/>
        </div>  

        <div id="normal2">
            <img src="Pictures/Photography/bigimage2.jpg" alt=""/>
        </div>  

        <div id="normal3">
            <img src="Pictures/Photography/bigimage3.jpg" alt=""/>
        </div>  

        <div id="normal4">
            <img src="Pictures/Photography/bigimage4.jpg" alt=""/>
        </div>  

        <div id="normal5">
            <img src="Pictures/Photography/bigimage5.jpg" alt=""/>
        </div>

    </div>
</div>

</BODY>
</HTML>

Here's the CSS:

html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}

img {
    border: none;
}

#gallery {
    margin: 0 auto;
    width: 100%;
}
#thumbs {
    margin: 10px auto 10px auto;
    width: 100%;
}
#bigimages {
    width: 100%;
    float: left;
}
#thumbs img {
    width: 50px;
    height: 50px;
}
#bigimages img {
    border: 4px solid #555;
    margin-top: 5px;
    height: 500px;
}
#thumbs a:link, #thumbs a:visited {
    width: 50px;
    height: 50px;
    border: 6px solid #555;
    margin: 6px;
    float: left;
}
#thumbs a:hover {
    border: 6px solid #888;
}

And finally here's my simple JavaScript:

function changeImage(current) {
    var imagesNumber = 5;

    for (i=1; i<=imagesNumber; i++) {   
        if (i == current) {
            document.getElementById("normal" + current).style.display = "block";
        } else {
            document.getElementById("normal" + i).style.display = "none";
        }
    }
}

Upvotes: 0

Views: 95

Answers (2)

usererror
usererror

Reputation: 61

You could simply hide them via CSS.

#bigimages > div:not(:first-child) { display: none; }

This should display only the first big image. Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:

#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }

Upvotes: 1

Akshat
Akshat

Reputation: 479

You can hide those images on load event. Like this:

window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
    images[i].style.display = "none";
  }
}

Upvotes: 0

Related Questions