[TYPO3-german] Lightbox-Funktion

Jens Hansen jens.hansen at 1024x768.net
Sat Jan 17 18:46:53 CET 2015


Hallöchen,

ich habe ein Problem mit meiner Lightbox...
Ich habe Typo3 aufgesetzt und eine Lightbox verwendet. (Lightbox-Quelle: github.com/lokesh/lightbox2)

Beispielgalerie hier:
1024x768.net/cms/index.php?id=14

Das Problem ist Folgendes: Die Lightbox wird aufgerufen, auch die Ladegrafik funktioniert und auch der Closer, allerdings funktioniert die "vor" und "zurück"-Funktion nicht.

Vielleicht hat jemand eine Idee oder kann mir sagen, warum das so ist und hat vielleicht einen Lösungsvorschlag!?!

Die wahrscheinlich dazugehörigen Codefragmente sind im JS:

[code lang=javascript]
      if (this.album.length > 1) {
        if (this.options.wrapAround) {
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
          }
          this.$lightbox.find('.lb-prev, .lb-next').show();
        } else {
          if (this.currentImageIndex > 0) {
            this.$lightbox.find('.lb-prev').show();
            if (alwaysShowNav) {
              this.$lightbox.find('.lb-prev').css('opacity', '1');
            }
          }
          if (this.currentImageIndex < this.album.length - 1) {
            this.$lightbox.find('.lb-next').show();
            if (alwaysShowNav) {
              this.$lightbox.find('.lb-next').css('opacity', '1');
            }
          }
        }
      }
    };
[/code]

und im CSS:

[code lang=css]
lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../template/img/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../template/img/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
[/code]

Ich hoffe, ich habe nichts vergessen, ansonsten gerne Feedback und ich hoffe, Ihr könnt mir helfen!

LG Jens


More information about the TYPO3-german mailing list