Lightbox funktioniert nicht

[Aaron3219]

Aber ist das Formen des X mit spans nicht eine Lösung die oft angewandt wird?
Ich kenne es zumindest so.

Zu den anderen Problemen kann ich sagen, dass ich nochmal eine funktionierende Lightbox machen werden, wenn ich langeweile habe.

 

[DateYourWeight]

<div class="close">
      <div onclick="document.querySelector('.lightbox').style.display = 'none'">
        <span></span><span></span>
      </div>
    </div>

@Sempervivum genau so hatte ich es eingefügt und dann passiert nichts.
Und wenn ich wieder drauf klicke, ist <span></span><span></span> sogar wieder weg.

Mit dem kleinen Tricks geht's ja immerhin. Ich muss auch gestehen, das durch <span> erzeugte X finde ich schicker.

@Aaron3219 ja, gerne. Die vergleiche ich dann auch gerne miteinander, sodass ich bestenfalls wieder bisschen dazu lerne. :)

 

[DateYourWeight]

 <img onclick="lightbox(this)" class="small-picture" alt="Es ist ein Fehler aufgetreten" src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
     <style>
/* <![CDATA[ */
    * {
  margin: 0;
  padding: 0;
}
body {
  background: white;
  overflow: auto;
  text-align: center;
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 10000;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
}
.lightbox > div {
  position: relative;
}
.lightbox img {
  border-radius: 5px;
  width: 90%;
  max-height: 90%;
  max-width: 800px;
}
.small-picture {
  width: 100%;
  max-width: 300px;
  max-height: 90vH;
  cursor: pointer;
}
.close {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}
.close > div {
  position: relative;
  cursor: pointer;
}
.close span {
  display: block;
  width: 5px;
  height: 30px;
  background: white;
  border-radius: 100px;
  position: absolute;
  top: -15px;
  right: 38px;
}
.close > div > span:first-child {
  transform: rotate(45deg);
}

.close > div > span:last-child {
  transform: rotate(-45deg);
}
@media only screen and (max-height: 400px) {
  .small-picture {
    width: 100%;
    max-width: 300px;
    max-height: 90vH;
    width: auto;
  }
}
@media only screen and (max-height: 500px) {
  .lightbox img {
    max-width: 90%;
    max-height: 90vH;
    width: auto;
  }
}
/*]]>*/
</style>
<script>
function lightbox(im) {
document.querySelector(".lightbox img").src = im.src;
document.querySelector(".lightbox").style.display = "flex";
}
</script>

So? Das lässt sich dann gar nicht mehr öffnen.

 

[DateYourWeight]

Welch' Wunder, nun geht's auch im Firefox...

Vielen Dank! :)

Hab' noch eine Schwierigkeit mit einem Bild, was nur in Google Chrome dargestellt wird.
Aber dazu mache ich einen neuen Thread auf, aber erst morgen. Gute Nacht schon mal (Frühschicht). :)

 

[basti1012]

Ich hatte eben im anderen Thema auch nach einer light Box gesucht, die auch gut funktioniert, aber etwas kompliziert ist für Neulinge
*** Link entfernt, weil nicht mehr erreichbar ***
aber da jetzt alles geht bei dir solltest du es lieber so lassen

 

[DateYourWeight]

Das ist mal ein langer Code.
Funktioniert bei mir! Bleibe allerdings beim anderen, gefällt mir für meine Zwecke erstmal besser.
Aber @basti1012 danke dir!

 

[Gelöschtes Mitglied 36401]

Und ich finde für solche Leute ist Jimdo doch alles andere als "der letzte Müll".

Leider doch. Ich würde dir empfehlen, einen vernünftigen Webspace zu nutzen und wenn es kostenlos bleiben soll, dann tut es auch z.B. bplaced. Und anstatt sich mit einer Lightbox rumzuschlagen macht es mehr Sinn, sich mit HTML und CSS ernsthaft zu beschäftigen und dann Lightbox2 zu nutzen. Unter Strich hast du dann deutlich mehr davon.

 

[Gelöschtes Mitglied 36401]

Statt Lightbox 2 würde ich jedoch Fancybox empfehlen, denn diese lässt sich auf einem Mobilgerät durch Wischen bedienen, so wie man es dort gewöhnt ist.

Ups, diese Entwicklung von Fancybox ist an mir vorbeigegangen, danke für die Info.