PS: Außerdem hast Du ein leeres a-Tag im HTML, statt dessen muss dieses den Inhalte des figure-Tags umschließen:
<figure>
<a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg">
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</a>
</figure> In der Doku wird angegeben, dass man das über CDN einbinden soll, d. h. im Head:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>Und am Ende des Body:
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox]', {
// Your custom options
});
</script>Versuche das zunächst so, wenn Du lieber unabhängig vom CDN sein willst, können wir das noch ändern.
Wie oben, Fancybox. Bezüglich der Lizenz finde ich auf Github dies:
Fancybox is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).
Ich lese da auf Github:
A simple, flexible, responsive, retina-ready jQuery lightbox plugin
Das bedeutet, dass Du jQuery vor nivo-lightbox.js einbinden musst.
Ich frage mich jedoch ob es empfehlenswert ist, ein Skript einzusetzen, das nicht mehr gepflegt wird und wozu es keine Doku gibt.
Klar, bzgl. der Lightbox haben wir die selbe Situation, ob mit divs oder mit figure-img-figcaption.
Was im CSS noch angepasst werden muss:
das li muss durch figure ersetzt werden und dem figure-Tag müssen wir das margin nehmen:
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.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;
}
.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);
} Und statt des ul ist jetzt das div unser Container für die Galerie und muss die Klasse "image-gallery" bekommen:
<section id="galerie">
<div class="image-gallery">
<h1 class="heading-text">Gallerie</h1>
<figure>Da muss das CSS noch ein wenig mehr angepasst werden, ich sehe mir das an ...
Damit auch das CSS funktioniert musst Du noch die Klasse zuweisen:
<figure>
<img src="img/galerie/dog/dog1.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</figure>Ja genau, so habe ich mir das vor gestellt.
Die Überlappung liegt daran, dass Du die Höhe einer Seite deines Onepagers auf 100vh begrenzt hast. Die Galerie passt dort nicht hinein und steht oben und unten über.
Ich sehe zwei Möglichkeiten, dass zu beheben:
Wegen der Nachteile von 1. würde ich 2. bevorzugen.
Noch einige Anmerkungen zur Galerie:
Dort werden Listenelemente ul,li verwendet. "Liste" ist ein dehnbarer Begriff, aber IMO ist es wenig angebracht, das für alles und jedes zu benutzen. figure-Tags mit figcaption für das Overlay wären wesentlich passender.
Und was die Lightbox betrifft: Leider geht der Link zur Doku ins Leere, anscheinend wird diese nicht mehr richtig gepflegt. Selber empfehle ich gern Fancybox:
Fancybox | Best JavaScript lightbox alternative
Allerdings sehe ich bei der aktuellen Version einen Menüpunkt "Pricing", da müsste man prüfen, wie es mit der Lizenz aussieht.
Auf dem Smartphone scheint sich etwas zu überlappen, ist das das Problem, das Du meinst?
Ja, was m.scatello dir empfohlen hat ist eine empfehlenswerte und gebräuchliche Methode. Hier wird es genauer beschrieben:
PHP/Tutorials/Templates/Dateien mit include nachladen – SELFHTML-Wiki
Es gibt auch Lösungen mit Javascript aber die sind mit Sicherheit komplizierter.
Ich finde, es lohnt sich schon, einen lokalen Webserver zu installieren. Ist ja schnell gemacht und nicht besonders kompliziert.
In dem Fall handelt es sich nur um Dummies weil der Autor seine Menüs präsentieren will, ohne auf echte Unterseiten zu verweisen.
Aber Obacht, sieh dir mal das Datum an: Das CSS ist vollkommen veraltet, ist noch mit float realisiert. Vergiss diese Demos besser.
Hallo Jürgen,
In den Beispielen mit DD-Menus, die im Internet mir angesehen habe, sind die weiterführenden Links "kastriert".
Da steht dann nur sowas wie a href="#nogo", also kein echter Link.
Das wäre dann ein seiteninterner Verweis auf einen Anker und es handelt sich wahrscheinlich um einen so genannten Onepager wo alle Seiten in einer HTML-Datei versammelt sind. (Es sei denn, die Links werden auf irgend eine Weise umgearbeitet.)
Poste doch mal die URL einer solchen Seite, dann kann man genaueres sagen.
Und für die next- und prev-Buttons wolltest Du wahrscheinlich translateY verwenden, damit sie vertikal richtig zentriert sind:
.container #next,
.container #prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
background-color: #fff;
color: #333;
cursor: pointer;
border-radius: 50%;
box-shadow: 5px 10px #3337;
}
.container #next {
right: -60px;
}
.container #prev {
left: -60px;
}Dein Layout für die Slides kannst Du übrigens ein wenig vereinfachen und ganz ohne abs. Positionierung umsetzen:
<div class="container">
<div class="slide-container active">
<div class="user">
<img src="images/dia0.jpg" alt="">
<div class="user-info">
<h3>John Doe</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<i class="fa-solid fa-quote-right icon"></i>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
repudiandae esse officiis ad quaerat harum?
</p>
</div>
<div class="slide-container"> * {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 70px;
background-color: #3498db;
}
.container {
position: relative;
perspective: 1000px;
}
.container .slide-container {
border-radius: 5px;
background-color: #fff;
box-shadow: 0 5px 10px #333;
width: 450px;
padding: 20px;
margin: 10px;
transform-style: preserve-3d;
}
.container .slide-container .icon {
margin-left: auto;
align-self: flex-start;
font-size: 90px;
color: #3498db;
}
.container .slide-container .user {
display: flex;
align-items: center;
}
.container .slide-container img {
height: 100px;
width: 100px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.container .slide-container .user .user-info h3 {
color: #333;
font-size: 20px;
}
.container .slide-container .user .user-info .stars i {
color: #3498db;
font-size: 15px;
}
.container .slide-container .text {
color: #333;
font-size: 14px;
padding-top: 15px;
font-style: italic;
}
.container .slide-container {
display: none;
}
.container .slide-container.active {
display: block;
}
.container #next,
.container #prev {
position: absolute;
top: 50%;
transform: translateX(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
background-color: #fff;
color: #333;
cursor: pointer;
border-radius: 50%;
box-shadow: 5px 10px #3337;
}
.container #next {
right: -90px;
}
.container #prev {
left: -60px;
}
.container #next:hover,
.container #prev:hover {
background-color: #333;
color: #fff;
}Jetzt getestet und Visual-Studio-Code sowie der Seiteninspektor haben es an den Tag gebracht: Für den ersten Container fehlt ein schließendes </div>:
<body>
<div class="container">
<div class="slide-container active">
<div class="slide">
<i class="fa-solid fa-quote-right icon"></i>
<div class="user">
<img src="img/mann.jpg" alt="">
<div class="user-info">
<h3>John Doe</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
repudiandae esse officiis ad quaerat harum?
</p>
</div>
</div> <!-- dies fehlte -->
<div class="slide-container">So hatte ich das nicht gemeint, versuche dies:
index = (index + 1) % slides.length;
Ohne das groß getestet zu haben würde ich sagen, dass hier ein Gleichheitszeichen fehlt:
index (index + 1) % slides.length;
Ebenso in prev.
Ich bin dann aber erst Mal raus, wegen der Sache mit den vielen Köchen. (Wie früher schon Mal).
Viel Erfolg noch und gutes Gelingen!