Live Suche

HTML

<form>
  <input type="text" id="search" placeholder="Live Suche" style="border-radius: 0; width: 75%; border: 0,3px solid #000;">
</form>
<br>
<br>
<div id="gallery" style="display: none;">
  <!-- Hier werden die Bilder angezeigt -->
</div>
<div id="overlay">
  <img id="fullscreen-image" src="" alt="Fullscreen Image">
</div>

CSS

<style>
#gallery {
  display: flex;
  flex-wrap: wrap;
  height: 500px; /* Höhe des Elements festlegen */
  overflow-y: scroll; /* Scrollleiste nur vertikal anzeigen */
}

#gallery::-webkit-scrollbar {
  width: 8px; /* Breite der Scrollleiste */
}

#gallery::-webkit-scrollbar-thumb {
  background-color: #f95c06; /* Farbe des Scrollbalkens */
  border-radius: 10px; /* abgerundete Ecken */
}

#gallery::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Farbe des Hintergrunds */
}  
  
#gallery img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  margin: 10px;
}

#gallery p {
  margin-top: 5px;
  text-align: center;
  display: block;
  width: 300px; /* Breite auf die Breite des Bildes setzen */
  white-space: nowrap; /* Namen nicht umbrechen */
  overflow: hidden; /* Namen ausblenden, wenn er zu lang ist */
  text-overflow: ellipsis; /* am Ende des Namens ... anstelle des abgeschnittenen Teils anzeigen */
}

.gallery-image {
display: inline-block;
margin: 10px;
text-align: center;
}

.gallery-image img {
display: block;
max-width: 300px;
}

.gallery-image p {
margin-top: 5px;
}

#overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

#fullscreen-image {
  position: fixed;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  max-width: 90vw;
}

body {
  overflow: hidden;
}

#search:focus {
  border-color: #f95c06;
  outline: none;
}

#search {
  margin: 0 auto;
  display: block;
}

</style>

JavaScript

<script>
const images = [
  { name: "REMKO CMT 120 IM", src: "https://rsf-shop.de/wp-content/uploads/REMKO-CMT-120-IM.jpg" },
  { name: "REMKO CMF 320 Duo AM", src: "https://rsf-shop.de/wp-content/uploads/REMKO-CMF-320-Duo-AM.jpg" },
  { name: "REMKO CLK 30 mit Geblaese", src: "https://rsf-shop.de/wp-content/uploads/REMKO-CLK-30-mit-Geblaese.jpg" },
  { name: "REMKO BL 352 DC AT", src: "https://rsf-shop.de/wp-content/uploads/REMKO-BL-352-DC-AT.jpg" },
  { name: "REMKO ATY 351 DC AT", src: "https://rsf-shop.de/wp-content/uploads/REMKO-ATY-351-DC-AT.jpg" },
  { name: "REMKO ATY 350 AT", src: "https://rsf-shop.de/wp-content/uploads/REMKO-ATY-350-AT.jpg" },
  { name: "REMKO ATY 261 DC AT", src: "https://rsf-shop.de/wp-content/uploads/REMKO-ATY-261-DC-AT.jpg" },
  { name: "WKF 180 IM", src: "https://rsf-shop.de/wp-content/uploads/WKF-180-IM.jpg" },
  { name: "WKF 180 compact AM", src: "https://rsf-shop.de/wp-content/uploads/WKF-180-compact-AM.jpg" },
  { name: "WKF 120 Duo S Line AM", src: "https://rsf-shop.de/wp-content/uploads/WKF-120-Duo-S-Line-AM.jpg" },
  { name: "WKF 120 Duo IM", src: "https://rsf-shop.de/wp-content/uploads/WKF-120-Duo-IM.jpg" },
  { name: "WKF 120 compact S Line AM", src: "https://rsf-shop.de/wp-content/uploads/WKF-120-compact-S-Line-AM.jpg" },
  // Hier können Sie weitere Bilder hinzufügen
];

const searchInput = document.getElementById("search");
const gallery = document.getElementById("gallery");
const overlay = document.getElementById("overlay");
const fullscreenImage = document.getElementById("fullscreen-image");

function displayImages(images) {
  gallery.innerHTML = "";
  images.forEach(image => {
    const img = document.createElement("img");
    const name = document.createElement("p");
    name.textContent = image.name;
    img.src = image.src;
    img.alt = image.name;
    img.addEventListener("click", () => {
      overlay.style.display = "flex";
      fullscreenImage.src = image.src;
    });
    gallery.appendChild(img);
   ...