XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

almost finished

Browse Source
master
Ottis 5 years ago
parent a5e8aac65b
commit 2164aaad67
1 changed files with 24 additions and 59 deletions
Show Stats Download Patch File Download Diff File

81
09/photos.html
Unescape Escape View File

@ -65,6 +65,7 @@
<div id="left"> <div id="left">
<section id="photos"> <section id="photos">
<!-- Header -->
<div class="header" id="myHeader"> <div class="header" id="myHeader">
<h1>Image Grid</h1> <h1>Image Grid</h1>
<p>Click on the buttons to change the grid view.</p> <p>Click on the buttons to change the grid view.</p>
@ -73,74 +74,38 @@
<button class="btn" onclick="four()">4</button> <button class="btn" onclick="four()">4</button>
</div> </div>
<!-- Photo Grid -->
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<img src="./media/imgs/01-min.jpg"> <img src="./media/imgs/01-min.jpg" style="width:100%">
<img src="./media/imgs/02-min.jpg"> <img src="./media/imgs/02-min.jpg" style="width:100%">
<img src="./media/imgs/03-min.jpg"> <img src="./media/imgs/03-min.jpg" style="width:100%">
<img src="./media/imgs/04-min.jpg"> <img src="./media/imgs/04-min.jpg" style="width:100%">
<img src="./media/imgs/05-min.jpg"> <img src="./media/imgs/05-min.jpg" style="width:100%">
<img src="./media/imgs/06-min.jpg"> <img src="./media/imgs/06-min.jpg" style="width:100%">
<img src="./media/imgs/07-min.jpg"> <img src="./media/imgs/07-min.jpg" style="width:100%">
<img src="./media/imgs/08-min.jpg"> <img src="./media/imgs/08-min.jpg" style="width:100%">
<img src="./media/imgs/09-min.jpg"> <img src="./media/imgs/09-min.jpg" style="width:100%">
<img src="./media/imgs/10-min.jpg"> </div>
<img src="./media/imgs/11-min.jpg"> <div class="column">
<img src="./media/imgs/12-min.jpg"> <img src="./media/imgs/10-min.jpg" style="width:100%">
<img src="./media/imgs/13-min.jpg"> <img src="./media/imgs/11-min.jpg" style="width:100%">
<img src="./media/imgs/14-min.jpg"> <img src="./media/imgs/12-min.jpg" style="width:100%">
<img src="./media/imgs/15-min.jpg"> <img src="./media/imgs/13-min.jpg" style="width:100%">
<img src="./media/imgs/16-min.jpg"> <img src="./media/imgs/14-min.jpg" style="width:100%">
<img src="./media/imgs/17-min.jpg"> <img src="./media/imgs/15-min.jpg" style="width:100%">
<img src="./media/imgs/18-min.jpg"> <img src="./media/imgs/16-min.jpg" style="width:100%">
<img src="./media/imgs/17-min.jpg" style="width:100%">
<img src="./media/imgs/18-min.jpg" style="width:100%">
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</article> </article>
</main> </main>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "100%"; // IE10
elements[i].style.flex = "100%";
}
}
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%"; // IE10
elements[i].style.flex = "50%";
}
}
// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "25%"; // IE10
elements[i].style.flex = "25%";
}
}
// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save