117 lines
3.2 KiB
PHP
Executable File
117 lines
3.2 KiB
PHP
Executable File
|
|
<?php
|
|
$thisPage="grid";
|
|
$thistitel = " - Auswahl";
|
|
$_SESSION['thema'] = "Image Grid";
|
|
?>
|
|
|
|
<?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>
|
|
<?php $path_img = "<img style=\"width:100%\" src=\"/home/foto/views/images/grid/";
|
|
?>
|
|
<!-- Photo Grid -->
|
|
<div class="row">
|
|
<div class="column"><?php
|
|
echo $path_img."01.jpg\">";
|
|
echo $path_img."02.jpg\">";
|
|
echo $path_img."03.jpg\">";
|
|
echo $path_img."04.jpg\">";
|
|
echo $path_img."05.jpg\">";
|
|
echo $path_img."06.jpg\">";
|
|
echo $path_img."07.jpg\">";
|
|
echo $path_img."08.jpg\">";?>
|
|
</div>
|
|
<div class="column"><?php
|
|
echo $path_img."09.jpg\">";
|
|
echo $path_img."10.jpg\">";
|
|
echo $path_img."11.jpg\">";
|
|
echo $path_img."12.jpg\">";
|
|
echo $path_img."13.jpg\">";
|
|
echo $path_img."14.jpg\">";
|
|
echo $path_img."15.jpg\">";?>
|
|
</div>
|
|
<div class="column"><?php
|
|
echo $path_img."16.jpg\">";
|
|
echo $path_img."17.jpg\">";
|
|
echo $path_img."18.jpg\">";
|
|
echo $path_img."19.jpg\">";
|
|
echo $path_img."20.jpg\">";
|
|
echo $path_img."21.jpg\">";
|
|
echo $path_img."22.jpg\">";
|
|
echo $path_img."23.jpg\">";
|
|
echo $path_img."24.jpg\">";?>
|
|
</div>
|
|
<div class="column"><?php
|
|
echo $path_img."25.jpg\">";
|
|
echo $path_img."26.jpg\">";
|
|
echo $path_img."27.jpg\">";
|
|
echo $path_img."28.jpg\">";
|
|
echo $path_img."29.jpg\">";
|
|
echo $path_img."30.jpg\">";
|
|
echo $path_img."31.jpg\">";
|
|
echo $path_img."32.jpg\">";?>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// Get the elements with class="column"
|
|
var elements = document.getElementsByClassName("column");
|
|
var i; // Declare a loop variable
|
|
|
|
function one() { // Full-width images
|
|
for (i = 0; i < elements.length; i++) {
|
|
elements[i].style.msFlex = "100%"; // IE10
|
|
elements[i].style.flex = "100%";
|
|
}
|
|
}
|
|
|
|
function two() { // Two images side by side
|
|
for (i = 0; i < elements.length; i++) {
|
|
elements[i].style.msFlex = "50%"; // IE10
|
|
elements[i].style.flex = "50%";
|
|
}
|
|
}
|
|
|
|
function four() { // Four images side by side
|
|
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";
|
|
?>
|