Frage JavaScript für Lightbox wird nicht erkannt beim Einbinden der Lokesh Dhakar Lightbox in HTML Template

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Hi Forum,

ich bin relativ neu im Umgang mit HTML5 bzw. CSS und arbeite gerade mit verschiedenen Templates. Ich arbeite mit Dreamweaver CC 2020 auf einem Mac unter Catalina (10.15.2).
Momentan versuche ich die Lightbox v2.11.1 von Lokesh Dhakar (https://www.lokeshdhakar.com/projects/lightbox2/#getting-started) in das Template Dimension (https://html5up.net/dimension) einzubinden. Ich habe alle Schritte des Tutorials befolgt (https://wiki.selfhtml.org/wiki/HTML/Tutorials/Lightbox_einbinden).
Ich habe die Schritte mehrmals wiederholt aber leider hat dies nichts gebracht. Die Images aus dem .zip Ordner habe ich in der .CSS Datei richtig verlinkt (werden in der Code Vorschau auch angezeigt). jQuery.js ist im Code vor der Lightbox.js.
Mir ist nun aufgefallen, dass der Script Lightbox.js scheinbar nicht berücksichtigt wird, denn wenn ich Ihn aus dem Body tag entferne ändert sich rein gar nichts! (eingebunden: <script src="assets/js/lightbox.js"></script>).

Leider treten trotzdem folgende Probleme auf:
Beim Template Dimension öffnet sich das Bild in groß und die Lupe zum vergrößern erscheint, jedoch lässt sich das große Bild nicht schließen.
Ebenfalls werden die Navigationspfeile und der schließen Pfeil nicht angezeigt, Ich kann also nichts machen außer die Seite zu schließen.

Vielen Dank schon einmal für eure Hilfe!
 
Zuletzt bearbeitet:

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Hi basti1012,

jQuery (v3.4.1) ist natürlich eingebunden, das hatte ich auch geschrieben.
Seite ist leider noch nicht online, hier aber mal die scripts aus dem Quellcode:
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/lightbox.js"></script>
</body>
 

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
Die lightbox.css hast du auch eingebunden ?
Was schreibt die Konsole den so an Fehler ?
Hast du mal reinfolge ändern versucht ( lightbox.ja an 2 stelle zb)?

Poste doch mal den ganzen Code.
Oder bei Codepen nee Seite fertig machen.
Wenn das bei Codepen klappt , dann mußt du mal einen Codepen fertig machen wo alles mit drinne ist.

ZB
Du öffnest deine Seite und machst die Konsole an.
Unter "Elements" gehst du hoch auf das <html> und machst einen Rechtsklick und gehst auf copy outerHTML.
Den Kram kopierst du bei Codepen in das html Feld rein .

So können wir sehen was im Browser ankommen tut und vieleicht auch ohne raten weiter helfen
 
  • Like
Reaktionen: nlsn

m.scatello

Senior HTML'ler
15 Februar 2017
1.664
196
63
@basti1012
Hör doch mal auf mit dem sch... Codepen. Wenn eine Seite nicht online ist, dann sollte man das ändern, wenn man Hilfe haben möchte. Zur Not tut es ja auch ein Freehoster.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.175
248
63
20
@m.scatello seh ich ein wenig anders. Gerade einfache OnePager lassen sich sehr gut in kleinen fiddles darstellen. Generell ist das online stellen einer Seite aber empfehlenswerter. Wenn das basti‘s bevorzugte Weise ist Hilfe zu leisten, dann lass es ihn dich einfach so machen wie er möchte. Du kannst es ja anders machen.

Kleiner Zusatz: Äußere solche Kritik doch nicht immer in einem Thread, der eigentlich nichts damit zu tun hat. Wofür gibt es denn die privaten Nachrichten?

Das ist zumindest meine Meinung. Und bitte jetzt keine Diskussion starten (dann bitte per PN). Schließlich wollen wir immer noch @nlsn helfen.
 
Zuletzt bearbeitet:
  • Like
Reaktionen: nlsn

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Hi Leute,

die Lightbox.css ist eingebunden und die Bilder für die Navigation sind ebenfalls im selben Ordner wie die Lightbox.css.
Fehler werden im Quellcode keine angezeigt.. Reihenfolge habe ich auch schon geändert..

Im Quellcode werden mir keine Fehler angezeigt.

Im Javascript Lightbox.js werden folgende Fehler angezeigt (siehe Anhang)
 

Anhänge

  • Bildschirmfoto 2020-01-29 um 17.47.49.png
    Bildschirmfoto 2020-01-29 um 17.47.49.png
    65,4 KB · Aufrufe: 5

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
So sieht das Ganze im Browser aus:
 

Anhänge

  • Bildschirmfoto 2020-01-29 um 08.18.12.jpg
    Bildschirmfoto 2020-01-29 um 08.18.12.jpg
    460,7 KB · Aufrufe: 6

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Möglicher Weise mag dein Dreamweaver dieses Javascript nicht? Versuche doch mal die Seite im Browser zu öffnen.
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
Ohne jetzt deine Seite zu sehen( Testseite Egal wo ) , wird das schwer.
Könnte sein das irgendwelche Pfade nicht stimmen.
Deine Bildausgabe sieht halt so aus wenn man ein Bild anklicken was im Link eingebettet ist.

Das nachzustellen geht mit mehrern Versuchen .
Man nimmt die data werte auf den Link , oder löscht das lightbox js oder jquery.
Da kommt man jetzt nur mit raten weiter.
Kannst du irgendwie nee Testseite erstellen ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Ich habe eine Weile gerätselt, aber mir scheint, ich habe den Fehler jetzt gefunden:
In main.js Zeile 301 findet man dieses:
Code:
                // Prevent clicks from inside article from bubbling.
                    $this.on('click', function(event) {
                        event.stopPropagation();
                    });
Das article, das dort erwähnt wird, ist das Unterfenster Content, in dem sich die Bilder befinden. Dort wird das Bubbling gestoppt, d. h. Clicks gelangen nicht mehr an das body-Element. Dort registriert jedoch die Lightbox ihren Eventlistener, Zeile 88:
Code:
  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  // that contain 'lightbox'. When these are clicked, start lightbox.
  Lightbox.prototype.enable = function() {
    var self = this;
    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      self.start($(event.currentTarget));
      return false;
    });
  };
Behebung wahrscheinlich möglich, indem man die a-Elemente vom stopPropagation in main.js ausnimmt.
Oder indem man die Eventlistener von Lightbox direkt am a-Element registriert.
Aber vorher sollten wir erst Mal klären, was das für ein main.js ist. Ich vermute, es gehört zu deinem Template? Ist das ein Template von Dreamweaver oder ein fremdes? Ist es überhaupt das, was Du für deine Seite endgültig verwenden willst?
 
Zuletzt bearbeitet:
  • Like
Reaktionen: nlsn

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Hi Sempervivum, vielen Dank für die schnelle Hilfe!
Das Template ist ein Fremdtemplate und hat mit Dreamweaver erstmal nichts zu tun. Ja genau das Template wollte ich für meine Seite verwenden. Das main js gehört zum Template.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Dann schlage ich vor, dass wir das in in lightbox.js regeln. Versuche dies: In lightbox.js ab Zeile 84 findest Du dieses:
Code:
  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  // that contain 'lightbox'. When these are clicked, start lightbox.
  Lightbox.prototype.enable = function() {
    var self = this;
    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      self.start($(event.currentTarget));
      return false;
    });
  };
Ändere das zu diesem:
Code:
  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  // that contain 'lightbox'. When these are clicked, start lightbox.
  // Modification: Add eventlisteners directly due to issues with main.js
  Lightbox.prototype.enable = function() {
    var self = this;
    $('a[data-lightbox]').on('click', function(event) {
      self.start($(event.currentTarget));
      return false;
    });
  };
Konnte ich nicht so auf die Schnelle testen, wenn es nicht funktionieren sollte, sehen wir weiter.
 
  • Like
Reaktionen: nlsn

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Super, ich war mir nicht sicher wegen currentTarget vs. target, aber wenn es funktioniert ist es ja richtig.
 
  • Like
Reaktionen: nlsn

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Mir ist doch noch was aufgefallen: Wenn ich jetzt neben den article also auf den background klicke kehre ich immer wieder auf die Startseite zurück. Kann man das so verlinken, dass ich immer wieder auf den vorhergehenden article zurückkehre, egal wo ich hinklicke?

Außerdem werden die Navigationspfeile und das close button nicht angezeigt..
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Dieses Template wirft ja einige Nüsse zum Knacken auf :D
Versuche dies: In main.js findest Du ab Zeile 309 dieses:
Code:
            $body.on('click', function(event) {

                // Article visible? Hide.
                    if ($body.hasClass('is-article-visible'))
                        $main._hide(true);

            });
Erweitere es so:
Code:
            $body.on('click', function(event) {

                // Article visible? Hide.
                    if ($body.hasClass('is-article-visible') && $('#lightboxOverlay').css('display') == 'none' )
                        $main._hide(true);

            });
 
  • Like
Reaktionen: nlsn

nlsn

Neues Mitglied
28 Januar 2020
12
0
1
26
Das hat schonmal funktioniert! Vielen Dank!

Leider werden die Navigationspfeile und das close Button nicht angezeigt..
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Entweder ich übersehe etwas oder die Anleitungen, sowohl direkt als auch bei Selfhtml, schweigen sich über die Grafiken aus.
Ich finde im CSS z. B. dieses:
background:url(/images/next.png)
D. h. Du müsstest die Grafiken in das Verzeichnis http://www.test-75646.alfa3044.alfahosting-server.de/images
legen. Es handelt sich um die Grafiken
prev.png nex.png loading.png overlay.png close.png
und Du müsstest sie im dist-Verzeichnis finden.
 
Werbung: