LiveCams in Lightbox öffnen lassen?

Hi,

Musst de über html einfügen. Zum Beispiel so. Hier das Beispiel, https://mrt-rosenheim.de/webcam.php

<div class="thumb_box">
<!-- Thumbnail -->
<img src="https://www.platzcam.de/MRT1.jpg" style="width: 100%; cursor: pointer;" id="thumb1" />
</div>

<div id="bild_box1"align="center">
<img src="wo die Webcam das Bild ablegt " class="bild" id="bild1" style="position: fixed; top:50px; left:15vw; width: 70vw; z-index:1000; background-color: #aaffaa;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

cursor: pointer; display:none;" />
</div>

css fehlt noch.

.thumb_box {
width: 100%;

display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

}

.bild_box {
position: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: fixed;
}
.transparent-iframe {
background-color: transparent;
border: none;
width: 100%;
height: 620px;
}

<img src="wo die Webcam das Bild ablegt " class="bild" id="bild1" style="position: fixed; top:50px; left:15vw; width: 70vw; z-index:1000; background-color: #aaffaa;

Da must du noch den Pfad des Bildes einfügen

schau mal noch mal hier meinst du es so? https://mrt-rosenheim.de/webcam.php

<div class="thumb_box">
<!-- Thumbnail -->
<img src="https://playa-cam.es/camera1" style="width: 100%; cursor: pointer;" id="thumb1" />
</div>

<div id="bild_box1"align="center">
<img src="https://playa-cam.es/camera1" class="bild" id="bild1" style="position: fixed; top:50px; left:15vw; width: 70vw; z-index:1000; background-color: #aaffaa;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

cursor: pointer; display:none;" />
</div>

css: .thumb_box {
width: 100%;

display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

}

.bild_box {
position: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: fixed;
}
.transparent-iframe {
background-color: transparent;
border: none;
width: 100%;
height: 620px;
}

einfach den Videolink einfügen un gut ist es ist egal ob Bild oder Video.
Siehts ja auf meiner Seite wies funktioniert. Solle es denn so aussehen?

das css must du unter Einstellung css einfügen!

und das CSS: nicht mit kopieren

<style>

.thumb_box {
width: 100%;

display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

}

.bild_box {
position: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: fixed;
}
.transparent-iframe {
background-color: transparent;
border: none;
width: 100%;
height: 620px;
}

</style>

habe noch was vergessen. Du musst noch ein HTML einfügen am besten unten. Das ist dann das Skript.

<script>
let screenie = 100;
let erlaubt = "nein";
setInterval(function () {
screenie = window.innerWidth;
console.log("screenie: ", screenie);
if (screenie > 500) {
erlaubt = "ja"
}
else
{erlaubt = "nein";}
console.log("erlaubt: ", erlaubt);

}, 500);

let dumbo = document.getElementById("thumb1");
let bild = document.getElementById("bild1");

dumbo.addEventListener("click", function () {
if (erlaubt == "ja") bild.style.display = "flex";
// dumbo.style.display = "none";
});
bild.addEventListener("click", function () {
bild.style.display = "none";
//dumbo.style.display = "flex";
});
   
let dumbo2 = document.getElementById("thumb2");
let bild2 = document.getElementById("bild2");
  
dumbo2.addEventListener("click", function () {
if (erlaubt == "ja") bild2.style.display = "flex";
// dumbo.style.display = "none";
});
bild2.addEventListener("click", function () {
bild2.style.display = "none";
//dumbo.style.display = "flex";
});

  
</script>

mach das erst mal für die erste Cam.

bei der zweiten Cam musst Du dann "id=bild2" eintragen und id="thumb2"

hast Du WhatsApp? Dann könnten wir mal über WhatsApp sprechen.

nein das Skript auf der Seite mit html widgets einfügen.

und das in die CSS einfügen

<style>

.thumb_box {
width: 100%;

display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 6px grey, -2px -2px 4px white;

}

.bild_box {
position: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: fixed;
}
.transparent-iframe {
background-color: transparent;
border: none;
width: 100%;
height: 620px;
}

</style>

Das Skript aus den CSS löschen.

nein das Skript nicht in der Cam einfügen sonder als extra im HTML widgets einfügen.

Hallo bvtina,

alternativ probier mal folgenden Code im Widget Quelltext, der nutzt die in ZP enthaltene Lightbox "Fancybox":

<a href="https://playa-cam.es/camera1#stream.jpg" class="openLightboxStream" style="text-decoration: none; border: none">
    <img src="https://playa-cam.es/camera1#stream.jpg" style="max-width: 100%; height: auto">
</a>
<script>
$z(document).ready(function () {
    if (!window.$camLightboxInit) {
        $z("a.openLightboxStream").fancybox({type: "image"});
        window.$camLightboxInit = true;
    }
});
</script>

Bei der URL musst du #stream.jpg anhängen, damit die Fancybox das korrekt als Bild erkennt.

Du darfst das Skript nicht bei der Cam einfügen. Sondern ein extra html Widget auf der Seite mit dem Skript einfügen.
Aber das von Philipp ist auch eine Lösung.

Zitat von bvtina

Hallo Sammyz

Es Funzt!!!
LIVE

Vielen Dank an dich für deine Hilfe!!!

👍👍👍🙏🙏🙏👍👍👍

Na dann ist alles gut wenn es Dir gefällt.

Gruß

Sammy

Hi hier das Skript aufgeräumt mit Erklärung Text und es kann man leichter erweitern.

Gruß

Sammy

<script>
let erlaubt = false;

// Prüft die Bildschirmbreite und setzt "erlaubt"
function checkScreenWidth() {
erlaubt = window.innerWidth > 500;
console.log("Screenbreite:", window.innerWidth, "| erlaubt:", erlaubt);
}

// Beim Start und bei jeder Fensteränderung prüfen
checkScreenWidth();
window.addEventListener("resize", checkScreenWidth);

// Funktion zum Verbinden von Thumbnail & großem Bild
function setupImageToggle(thumbId, imageId) {
const thumb = document.getElementById(thumbId);
const image = document.getElementById(imageId);

if (!thumb !image) return;

thumb.addEventListener("click", () => {
if (erlaubt) image.style.display = "flex";
});

image.addEventListener("click", () => {
image.style.display = "none";
});
}

// Alle Bildpaare hier eintragen
setupImageToggle("thumb1", "bild1");
setupImageToggle("thumb2", "bild2");
// Bei Bedarf weitere aufrufen: setupImageToggle("thumb3", "bild3");

</script>