107 lines
3.4 KiB
PHP
Executable File
107 lines
3.4 KiB
PHP
Executable File
|
|
<?php
|
|
$thisPage="grid";
|
|
$thistitel = " - Auswahl";
|
|
$_SESSION['thema'] = "auswahl";
|
|
?>
|
|
|
|
<?php
|
|
include __DIR__ . "/../layout/header_drop.php";
|
|
include __DIR__ . "/../inc/foto_nav.php";
|
|
// include __DIR__ . "/../css/navi.css";
|
|
|
|
include __DIR__ . "/../css/image_grid.css";
|
|
// include __DIR__ . "/../css/gallery.css";
|
|
|
|
$thema = $_SESSION['thema']; //"ostfriesland";
|
|
|
|
?>
|
|
<body>
|
|
<!-- Header -->
|
|
<div class="header" id="myHeader">
|
|
<h1>Image Grid</h1>
|
|
<p>Change the grid view:
|
|
<button class="btn" onclick="one()">1</button>
|
|
<button class="btn active" onclick="two()">2</button>
|
|
<button class="btn" onclick="four()">4</button></p>
|
|
</div>
|
|
|
|
<!-- Photo Grid -->
|
|
<div class="row">
|
|
<div class="column">
|
|
<img src="/home/foto/views/images/grid/01.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/02.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/03.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/04.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/05.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/home/foto/views/images/grid/06.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/07.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/08.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/09.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/10.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/home/foto/views/images/grid/11.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/12.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/13.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/14.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/home/foto/views/images/grid/15.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/16.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/17.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/18.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/19.jpg" style="width:100%">
|
|
<img src="/home/foto/views/images/grid/20.jpg" style="width:100%">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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>
|
|
|
|
<?php
|
|
include __DIR__ . "/../js/filter_1.inc.js";
|
|
include __DIR__ . "/../layout/footer.php";
|
|
?>
|