Ich hab mir mal den gesamten Code genau angeschaut um auch alles nachvollziehen und verstehen.
Dabei ist mir aufgefallen, dass ich viel weniger und verständlichen html- Code habe als zb. mit Bootstrap.
Was ich gut fände wäre, wenn ich einen Fliter bei der Galerie auswähle die animiert zu ihrem Platz gleiten. so wie hier
Ist das überhaupt möglich bzw. wie groß wäre der Aufwand?
Das ist gut. Es kommen ja noch Bilder später dazu.
Man! Wo nimmst du das alles nur her?
Das hätte ich nie hinbekommen. Super, dass es das Forum gibt.
Vielen Dank!
So es ist neu hochgeladen
style.css
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.image-gallery>figure {
margin: 0;
flex-basis:350px;
/* width: 350px; */
position: relative;
cursor: pointer;
}
.image-gallery::after {
content: "";
flex-basis: 350px;
}
.image-gallery figure img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}
figure.hidden {
flex-basis: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(57, 57, 57, 0.502);
top: 0;
left: 0;
transform: scale(0);
transition: all 0.2s 0.1s ease-in-out;
color: #fff;
border-radius: 5px;
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
/* hover */
.image-gallery figure:hover .overlay {
transform: scale(1);
} filter.css
/* body,h1,ul,li{
margin: 0;
padding: 0;
} */
body{
background-color: #667d8e;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#filter{
width: 85%;
margin: 50px auto;
}
#filter>ul{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px;
border-bottom: 2px solid rgba(2, 2, 2, 0.57);
padding-bottom: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
#filter>ul>li{
list-style: none;
background-color: rgb(191, 155, 230);
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
font-size: 1.2em;
}
#filter>ul>li.active{
background-color: rgba(41, 255, 41, 0.897);
}
.photo{
width: 85%;
padding: 0 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.photo img{
width: 300px;
height: 180px;
margin-bottom: 10px;
}und das script
const liItem = document.querySelectorAll('ul li');
const figureItem = document.querySelectorAll('div.image-gallery figure');
liItem.forEach(li => {
li.onclick = function() {
//active
liItem.forEach(li => {
li.classList.remove('active');
})
li.classList.add("active");
//Filter
const value = li.textContent;
figureItem.forEach(figure => {
if (figure.dataset.filter == value.toLowerCase() || value == "All") {
figure.classList.remove('hidden');
} else {
figure.classList.add('hidden');
}
});
}
});noch ist aber der Wurm drin
Ich sehe schon einen Fehler:
Code// falsch: // if (figure.dataset['data-filter'] == value.toLowerCase() || value == "All Menu") { if (figure.dataset.filter == value.toLowerCase() || value == "All Menu") {
Den hatte ich schon lokal korrigiert.
Ich versuche jetzt alles umzusetzen dann lade ich neu hoch
Dein Post #40 erklärt einiges Jetzt schau ich mal wo ich das in der css unterbringe
Dar war anstatt Semicolon Doppelpunkt .
Jetzt ist es im Script
Und was genau soll ich aus dem css nehmen?
da zeigt er Fehler egal wo ich es hinschreibe
Also wenn du das meinst
.image-gallery>figure {
margin: 0;
flex-basis: 0;
/* width: 350px; */
position: relative;
cursor: pointer;
}
.image-gallery::after {
content: "";
flex-basis: 350;
}
.image-gallery figure img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}dann sind alle Bilder weg. Hoffentlich geh ich euch nicht auf den Zeiger
Wähle ich anschließen "Alle" sind alle weg und ich muss die Seite neu Laden um sie wieder zu sehen.
Das konnte ich zwischenzeitlich beheben
Also der Filter läuft sehr suboptimal.
Wählt man einen Filter werden zwar nur die gewählten Bilder gezeigt aber leider an der Position wo sie ja sowieso sind.
Bei sehr viel Bildern wäre das Fatal.
Wähle ich anschließen "Alle" sind alle weg und ich muss die Seite neu Laden um sie wieder zu sehen.
Hast du dazu eine Idee
so sieht es aus!
so wäre es wünschenswert
Ganau das hatte ich probiert aber mit "class" klappen tut es aber mit "ID".
Noch eine Frage bezüglich des Scripts
<!--Scripte
==================================================================-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/fancybox.umd.js"></script>
<script type="text/javascript" src="js/totop.js"></script>
<script>
Fancybox.bind('[data-fancybox]', {
// Your custom options
});
</script>
<script>
const liItem = document.querySelectorAll('ul li');
const imgItem = document.querySelectorAll('.photo img');
liItem.forEach(li => {
li.onclick = function() {
//active
liItem.forEach(li => {
li.className = "";
})
li.className = "active";
//Filter
const value = li.textContent;
imgItem.forEach(img => {
img.style.display = 'none';
if (img.getAttribute('data-filter') == value.toLowerCase() || value == "All Menu") {
img.style.display = 'block';
}
})Ist es nicht besser das script in eine Datei (fiter.js) zu packen und wie Oben einzubinden?
Ich habe es gelesen aber nicht ansatzweise verstanden
Was muss ich an der filter.css verändern dass es keine Konflikte gibt?
body,h1,ul,li{
margin: 0;
padding: 0;
}
body{
background-color: #667d8e;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
section{
width: 85%;
margin: 50px auto;
}
section h1{
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
color: white;
font-size: 2em;
}
ul{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.57);
padding-bottom: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
ul li{
list-style: none;
background-color: rgba(255, 255, 255, 0.5);
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
font-size: 1.2em;
}
ul li.active{
background-color: rgba(41, 255, 41, 0.897);
}
.photo{
width: 100%;
padding: 0 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.photo img{
width: 200px;
height: 180px;
margin-bottom: 10px;
}Danke vielmals. Ich probier das Morgen aus
Genau da ist es her.
Wie kann ich den zwischen H1 und der Flexbox (Image-Galerie) platz schaffen. Will da noch ein Filter einbauen.
nach diesem Schema
<section>
<h1>Filter Image</h1>
<ul>
<li class="active">All Menu</li>
<li>Food</li>
<li>Car</li>
<li>House</li>
<li>Travel</li>
</ul>
<div class="photo">
<img src="img/food1.jpeg" data-filter="food">
<img src="img/food2.jpeg" data-filter="food">
<img src="img/food3.jpeg" data-filter="food">
<img src="img/food4.jpeg" data-filter="food">
<img src="img/mobil1.jpeg" data-filter="car">
<img src="img/mobil2.jpeg" data-filter="car">
<img src="img/mobil3.jpeg" data-filter="car">
<img src="img/mobil4.jpeg" data-filter="car">
<img src="img/rumah1.jpeg" data-filter="house">
<img src="img/rumah2.jpeg" data-filter="house">
<img src="img/rumah3.jpeg" data-filter="house">
<img src="img/rumah4.jpeg" data-filter="house">
<img src="img/travel1.jpeg" data-filter="travel">
<img src="img/travel2.jpeg" data-filter="travel">
<img src="img/travel3.jpeg" data-filter="travel">
<img src="img/travel4.jpeg" data-filter="travel">
</div>
</section>
<script>
const liItem = document.querySelectorAll('ul li');
const imgItem = document.querySelectorAll('.photo img');
liItem.forEach(li => {
li.onclick = function() {
//active
liItem.forEach(li => {
li.className = "";
})
li.className = "active";
//Filter
const value = li.textContent;
imgItem.forEach(img => {
img.style.display = 'none';
if (img.getAttribute('data-filter') == value.toLowerCase() || value == "All Menu") {
img.style.display = 'block';
}
})
}
});
</script>Da hab ich erst mal zu tun. Vielleicht hast du ja eine Eingebung wie mich von den externen Scripts befreien kann. 
Das mit dem A-Tag hab ich selbst gefunden.
Aber mit dem anderen habe ich stunden gekämpft gelesen und geyoutubed. Ich war echt kurz vorm aufgeben
Was habe ich beim Local einbinden falsch gemacht
Status
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Stylesheets
===================================================================-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
#
#
#
#
<section id="galerie">
<!-- <div class="container"> -->
<h1 class="heading-text">Galerie</h1>
<div class="image-gallery">
<figure>
<a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg"></a>
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</figure>
#
#
#
<!--Scripte
==================================================================-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="js/totop.js"></script>
</body>
</html>Also genau wie in der dokumentation.
Aber irgend was fehlt!
Ich lade es mal so hoch
Kannst du mir was besseres empfehlen? Bin da aufgeschlossen. Am besten was ich auf deutsch lesen kann.
Hab die ganze zeit probiert und getestet. Und bin an meine Grenzen gestoßen.
So hab ich die Lightbox eingebunden
!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Stylesheets
===================================================================-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/default.css">
-----------------------------------------
<section id="galerie">
<!-- <div class="container"> -->
<h1 class="heading-text">Galerie</h1>
<div class="image-gallery">
<figure>
<a href="img/galerie/dog/dog1.jpg" title="Gerda" data-lightbox-gallery="all"></a>
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</figure>
<figure><img src="img/galerie/food/kul1.jpg" alt="" />
<figcaption class="overlay">Entenschinken</figcaption>
----------------------------------------------------------
<!--Scripte
==================================================================-->
<script src="js/nivo-lightbox.js" type="text/javascript"></script>
<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/totop.js"></script>in einem funktionierendem Beispiel sieht es so aus
<div class="portfolio-items row grid">
<div class="col-sm-6 col-md-3 col-lg-3 anti">
<div class="portfolio-item">
<div class="hover-bg">
<a href="img/portfolio/Antipasti/antipastimista.png" title="Antipasi Mista" data-lightbox-gallery="all">
<div class="hover-text">
<h4>Antipasti Mista</h4>
</div>
<img src="img/portfolio/Antipasti/antipastimista_th.png" class="d-block mx-auto img-thumbnail" alt="Project Title"> </a>
</div>
</div>
</div>Ich bekomme es nicht adaptiert und brauche Hilfe
Damit wir uns richtig verstehen. Ich möchte da die Nivo-Lightbox drüber legen,
das heißt ich muss auf das Bild einen link auf das bild in passende Größe legen. Dann müsste es mit hoover und figcaption auch klappen. Oder?