Vill du skapa ett stilrent bildgalleri utan att behöva använda ett plugin? I denna guide visar vi hur du på ett enkelt sätt kan bygga ett funktionellt bildgalleri med hjälp av tre kodsnuttar. Genom att använda ren kod istället för plugins, undviker du både extra nedladdningar och de potentiella prestandaproblem som kan uppstå vid användning av tredjepartsverktyg.
1. Välj plats och lägg till HTML-redigerare
Först behöver du välja var du vill placera ditt galleri på sidan. Därefter, från din WordPress-meny, lägger du till en HTML-redigerare.
2. Lägg till HTML-kod och JavaScript
När HTML-redigeraren är på plats, lägg till följande HTML-kod i textrutan för HTML-kod:
<div class="galleri" id="galleri">
<img src="bild1" alt="Bild 1">
<img src="bild2" alt="Bild 2">
<img src="bild3" alt="Bild 3">
<img src="bild4" alt="Bild 4">
<img src="bild5" alt="Bild 5">
<div class="image-overlay" id="loadMore1">
<img src="bild6" alt="Bild 6">
<div class="overlay">+6 bilder</div>
</div>
</div>
<div class="galleri hidden" id="extraImages1">
<img src="bild7" alt="Bild 7">
<img src="bild8" alt="Bild 8">
<img src="bild9" alt="Bild 9">
<img src="bild10" alt="Bild 10">
<img src="bild11" alt="Bild 11">
<div class="image-overlay" id="loadMore2">
<img src="bild12" alt="Bild 12">
<div class="overlay">+6 bilder</div>
</div>
</div>
<div class="galleri hidden" id="extraImages2">
<img src="bild13" alt="Bild 13">
<img src="bild14" alt="Bild 14">
<img src="bild15" alt="Bild 15">
<img src="bild16" alt="Bild 16">
<img src="bild17" alt="Bild 17">
<img src="bild18" alt="Bild 18">
</div>
<script>
document.getElementById("loadMore1").addEventListener("click", function() {
document.getElementById("extraImages1").classList.remove("hidden");
this.querySelector(".overlay").style.display = "none";
});
document.getElementById("loadMore2").addEventListener("click", function() {
document.getElementById("extraImages2").classList.remove("hidden");
this.querySelector(".overlay").style.display = "none";
});
</script>3. Lägg till dina bilder med bild-URL
Byt ut bild-URL:erna för att passa dina egna bilder, genom att ersätta bild1, bild2 osv.
4. Lägg till CSS för att anpassa utseendet
För att ge ditt galleri rätt utseende och responsivitet, lägg till följande CSS-kod i din HTML-redigerare under anpassad CSS:
.galleri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 100%;
transition: all 0.3s ease-in-out;
margin-top: 10px;
}
.galleri img, .image-overlay img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
border-radius: 5px;
}
.image-overlay {
position: relative;
}
.image-overlay .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 400;
cursor: pointer;
border-radius: 5px;
}
.hidden {
display: none;
}
@media (min-width: 1025px) {
.galleri img, .image-overlay img {
height: 190px !important;
}
.image-overlay .overlay {
font-size: 20px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.galleri img, .image-overlay img {
height: 150px !important;
}
.image-overlay .overlay {
font-size: 18px;
}
}
@media (max-width: 768px) {
.galleri {
margin-top: 5px;
}
.galleri img, .image-overlay img {
height: 100px !important;
}
.image-overlay .overlay {
font-size: 14px;
}
.gallery {
gap: 5px;
}
}Nu borde ditt bildgalleri se ut och fungera så här
Slutord
Genom att följa dessa enkla steg kan du skapa ett stiligt och funktionellt bildgalleri utan att behöva installera plugins. Detta ger din webbplats både bättre prestanda och en mer professionell känsla.
Om du har några frågor eller vill ha ytterligare hjälp med att anpassa bildgalleriet efter dina specifika behov, tveka inte att kontakta oss på WPAssistans.se.
