Bilder nachrutschen lassen – Bildergalerie
Hallo zusammen,
ich bräuchte mal ein bisschen Hilfe. Ich habe eine Imagebox (imgBX) gebaut, in der nebeneinander 3 Karten (card) angeordnet sein sollen und dann ein Umbruch in die nächste Zeile erfolgen soll. Dort wieder 3 Karten usw. Bei voller Bildschirmbreite sollen box1 und Details nebeneinander angeordnet sein.
Bei Bildschirmbreite 600px und kleiner sind die Karten vertikal angeordnet und die box1 steht über Details.
Meinen bisheriger Versuch habe ich auf Codepen gestellt. Kann mir jemand weiter helfen? Danke!
https://codepen.io/Lupus_III/project/editor/AVmzry
Der hier verwendete Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jQuery imgal.js Masonry Photo Gallery Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/flatly/bootstrap.min.css">
<link href="https://www.jqueryscript.net/demo/masonry-photo-gallery-imgal/imgal.min.css" rel="stylesheet">
<style>
body{
display:flex;
}
figure{
border:1px solid black;
text-align:center;
padding:5px;
}
figcaption{
padding:5px;
height:30px;
line-height:20px;
}
.column {
display: none;
}
#ee{
width:100px;
border:2px solid black;
resize: both;
overflow: auto;
height:100px;
}
.show {
display: block !important;
}
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
#ww{
flex-direction:column;
}
</style>
</head>
<body>
<div id="ee"><p id="info"></p>
bla bla</div>
<div class="container">
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> Nature</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('people')"> People</button>
</div>
<br><br>
<div id="ww" class="imgal-container">
<figure class="column nature"><img src="https://source.unsplash.com/1600x900/?fitness" alt="Image Alt Text" class="imgal-img"><figcaption>Text</figcaption></figure>
<figure class="column nature"><img src="https://source.unsplash.com/1200x900/?yoga" alt="Image Alt Text" class="imgal-img"><figcaption>Text</figcaption></figure>
<figure class="column nature"><img src="https://source.unsplash.com/900x1200/?fitness" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column nature"><img src="https://source.unsplash.com/1200x600/?yoga" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column nature"><img src="https://source.unsplash.com/1100x900/?fitness" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column cars"><img src="https://source.unsplash.com/1300x900/?yoga" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column cars"><img src="https://source.unsplash.com/900x1100/?fitness" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column cars"><img src="https://source.unsplash.com/1100x600/?yoga" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column cars"><img src="https://source.unsplash.com/1100x900/?gym" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column cars"><img src="https://source.unsplash.com/1300x900/?cat" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/900x1100/?dog" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/1100x600/?nature" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/1200x900/?gym" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/1600x900/?cat" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/900x1500/?dog" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
<figure class="column people"><img src="https://source.unsplash.com/1500x600/?nature" alt="Image Alt Text" class="imgal-img"><figcaption>bla beschreibung</figcaption></figure>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/masonry-photo-gallery-imgal/imgal.js"></script>
<script>
var observer = new MutationObserver(function(mutations) {
widt=document.getElementById( 'ww' ).offsetWidth;
document.getElementById('info').innerHTML=widt;
if(widt<=401){
document.getElementById('ww').style.display='flex';
}else {
document.getElementById('ww').style.display='block';
}
});
var target = document.querySelector('#ee');
observer.observe(target, {
attributes: true
});
filterSelection("all");
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
console.log(arr2)
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.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>
</html>