Wie kann kann ich den Event listener in JavaScript in Android aufrufen & Änderungen vornehmen?

Ich würde gerne anhand dieser Anleitung für ein Problem auf den Event listener in JavaScript in Android zugreifen...

Siehe Link: https://broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

In order to play the video in Android, I also have an event listener in the JavaScript which plays the video when the element is clicked on, somewhat like this:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

Kann mir jemand bittet erklären, wie das genau bewerkstellige diesen Code in dem erwähnte Event Listener einzutragen bei einem Android Smartphone?

1 Antwort

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

24.07.2024, 13:18

Hi MrPatrol,

es gibt ein spezifisches Problem mit der Kodierung von Videos und das liegt nicht nur alleine an Android-Endgeräten. Um das Problem zu beschreiben, würde das den Rahmen hier sprengen. Kurz zusammengefasst - es hat mit Lizenzrechten und technischen Hindernissen zu tun.

Du solltest eine H.264-Codec oder einen AAC-Codec verwenden. Die Videos solltest du ohne Angaben des type-Attributs einbinden und der Aufruf kann via JavaScript erfolgen.

Folgendes zu EventListener: EventListener werden auf ein HTML-Element unter anderem gepackt um z.B. mit einem Click-Event den EventListener zu triggern.

let vidElem = document.querySelector("#meinVideo");
vidElem.addEventListener("click", ()=>{
if(videoElem.paused) {
videoElem.play();
}
});

Viel Spass

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

JavaScript, wofür steht in function(e) das e?

Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.



const checkbox = document.getElementById("remember");

checkbox.addEventListener(
    "change",                               
    function(e) {                           
        console.log(checkbox.value);        
        console.log(checkbox.checked);      
    }                 
);

...zum Beitrag

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zum Beitrag

Sind solche emails Scam muss ich mich damit epressen lassen?

Hi,

I am a professional hacker and have successfully managed to hack your operating system.

Currently I have gained full access to your account.

In addition, I was secretly monitoring all your activities and watching you for several months.

The thing is your computer was infected with harmful spyware due to the fact that you had visited a website with porn content previously.

╭ ᑎ ╮

Let me explain to you what that entails. Thanks to Trojan viruses, I can gain complete access to your computer or any other device that you own.

It means that I can see absolutely everything in your screen and switch on the camera as well as microphone at any point of time without your permission.

In addition, I can also access and see your confidential information as well as your emails and chat messages.

You may be wondering why your antivirus cannot detect my malicious software.

Let me break it down for you: I am using harmful software that is driver-based,

which refreshes its signatures on 4-hourly basis, hence your antivirus is unable to detect it presence.

I have made a video compilation, which shows on the left side the scenes of you happily masturbating,

while on the right side it demonstrates the video you were watching at that moment..ᵔ.ᵔ

All I need is just to share this video to all email addresses and messenger contacts of people you are in communication with on your device or PC.

Furthermore, I can also make public all your emails and chat history.

I believe you would definitely want to avoid this from happening.

Here is what you need to do - transfer the Bitcoin equivalent of $800 to my Bitcoin account

(that is rather a simple process, which you can check out online in case if you don't know how to do that).

Below is my bitcoin account information (Bitcoin wallet):

bc1q7jtlsp6rpfrky6r4yygpmay6gcgylurxhy64er

Once the required amount is transferred to my account, I will proceed with deleting all those videos and disappear from your life once and for all.

Kindly ensure you complete the abovementioned transfer within 50 hours (2 days +).

I will receive a notification right after you open this email, hence the countdown will start.

Trust me, I am very careful, calculative and never make mistakes.

If I discover that you shared this message with others, I will straight away proceed with making your private videos public.

Have a nice day!

...zum Beitrag

Minecrfta script?

Ich habe dieses schript geschreiben:

command /dashboard <player>:

trigger:

open chest inventory with 1 row named "&l&6Dashboard" to player

set slot 0 of player's current inventory to barrier named "&cClose"

set slot 2 of player's current inventory to diamond named "&bDias!"

#---------------------------------------------#

on inventory click:

if player's current inventory's name is "&l&6Dashboard":

cancel event

if clicked slot is 2:

give 1 diamond to arg-1

if clicked slot is 0:

close player's inventory

send "&eDu hast das &aDashboard &cGeschlossen!"

und es kommt immer der fehler das ich argumente in einem event haben muss aber es ist schon im on inventory click event drinne

...zum Beitrag

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zum Beitrag

JavaScript in HTML aufrufen?

Hallo zusammen
Ich brauche eure Hilfe, weil ich noch nicht viel mit JS gemacht habe.

Ich habe bis jetzt immer mein <script>-Tag mit Funktionen und Variablen in der HTML-Datei gehabt - hat immer funktioniert.

Jetzt will ich das <script>-Tag in eine eigene Datei ablegen.
Um das zu verschachteln und projektorientiert zu machen, dass man nicht für jede Seite die Funktionsänderung vornehmen muss.

Deswegen hab ich mit "<script src="/fileadmin/public/js/myScript.js"></script>" die JS-Datei in die HTML-Datei implementiert.

Mein Problem: Die Events führen nicht mehr aus.

Liegt das an daran, dass document.getElementById sich die ID aus dem internen dokument sucht?
Wie kriege ich, dass die ID von der HTML-Datei angesprochen werden?

Vielen Lieben Dank und liebe Grüße

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

Navigation Bar in Html überdeckt zeilen-Wie kann ich das Beheben?

Hi Leute, Ich habe neulich eine navigation bar in Html css und javascript Programmiert. Jetzt habe ich aber das Problem, dass diese Navigation bar (Fixed on the top) Die ersten paar Zeilen, die ich schreibe überdeckt. Wenn ich in meinem

mit

die ersten paar Zeilen schreibe, werden diese von der Navigation bar überdeckt. Wenn ich aber einfach nur den Tag

schreibe, dann ist die navigation bar nicht mehr ganz oben sondern etwas nach unten verschoben. Das will ich auch nicht (: Was kann ich machen?

...zum Beitrag

JavaScript, wie funktioniert stopImmediatePropagation()?

Hallo, folgende Frage:

In JavaScript gibt es für die Unterbrechung des Ereignisflusses ja die Methode stopPropagation(). Diese Methode funktioniert aber doch nur so, dass das Weiterreichen des Events an weitere Elemente verhindert wird.

Hat man aber mehrere am gleichen Element registrierte Event-Listener-Funktionen und will den Ereignisfluss beispielsweise an Event-Listener-Funktion 1 stoppen, sodass keine Weiterleitung an die übrigen Event-Listener-Funktionen im gleichen Element erfolgt, verwendet man stopImmediatePropagation().

Klingt wirr, ich weiß, aber anders konnte ich es gerade nicht erklären.

Was ich mich jetzt aber frage: Ist stopImmediatePropagation() eigenständig zu verstehen oder beinhaltet stopImmediatePropagation() auch die Fähigkeit von stopPropagation()? Heißt, verhindert die Methode gleichzeitig auch, dass der Ereignisfluss für alle Event-Listener an anderen Elementen unterbrochen wird?

...zum Beitrag

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

...zum Beitrag

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

Was mache ich falsch in JavaScript?

Ich will die Rotation einen 2D-Versors berechnen und dafür, will ich erstmal den Realteil ausrechnen.

Mein Problem ist: Es rechnet einfach nicht.

Was mache ich falsch?:

window.addEventListener('keydown', (event) => {
    if (event.keycode === '13') {
        return
    };
    function calculate (calculate)
}
)


function calculate (calculate) {
    let z_rotaited = document.getElementById('RotatedComplexversorZ');
    let Rez = document.getElementById('Re(z)');
    let Imz = document.getElementById('Im(z)');
    let Rotationangle = document.getElementById('Rotationangleindegree');
    let result = Math.sqrt(Rez ** 2 + Imz ** 2) * Math.cos(Rotationangle + Math.atan2(Rez, Imz) * 180 / Math.PI);
    z_rotaited = result;
}
function calcAngleDegrees(containerRez, containerImz) {
    return Math.atan2(containerRez, containerImz) * 180 / Math.PI;
  }

(Wenn ich Enter drücke, soll die eine Funktion laufen, welche das rotierte z ausrechnet.
Die Funktion (mathematich gesehen) lautet:

z_{rotiert} = sqrt(Re(z)² + Im(z)²) * (phi + cos(arctan2(Re(z), Im(z))) i * sin(phi + arctan2(Re(z), Im(z))))
z = 2D-Versor
phi = der dazu adierte Winkel

Die Seite sieht so aus:

...zum Beitrag

PHP-Funktion auslösen bevor man die Seite verlässt?

Ich probiere grade aus, meine eigenen „Google Analystics“ zu machen, da das Originale zu teuer ist. Egal, kommen wir zurück zum Thema. Wie füge ich Daten zu einer MySQL-Datenbank hinzu, genau dann, wenn der User die Seite verlässt. Ich habe es bereits mit diesem JavaScript versucht:

How do i run PHP-Functions before the page unloads bwz. close? I tried `beforunload` but it never really worked. I want to insert a record for analystics into php database. Here is the JavaScript:


```
const beforeUnloadListener = (event) => {
   document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
}

window.addEventListener("beforeunload", beforeUnloadListener);

	const pageHideListener = (event) => {
    document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
}
document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
		document.write(' <?php 
		$sql2 = "DELETE FROM `SwiftSpion` WHERE ip = `$ip`";
$result2 = $conn->query($sql2);
	?> ');
  }
};

window.addEventListener("pagehide", pageHideListener);
```



I expect, that the MySQL-Command works when the user leaves the site.

...zum Beitrag

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen