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

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

N

nlsn

Neues Mitglied
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:
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>
 
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
 
@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.
 
@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:
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
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
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 ?
 
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.
 
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..
 
Das hat schonmal funktioniert! Vielen Dank!

Leider werden die Navigationspfeile und das close Button nicht angezeigt..
 
Ja die Grafiken hab ich da reinkopiert, Verlinkungen habe ich auch überprüft.. Die Grafiken werden mir bei Dreamweaver in der Vorschau (da wo die Verlinkung im Code ist gibt es eine Mini Vorschau) auch angezeigt, deshalb war ich sehr verwundert.. hab sie relativ mit im CSS verlinkt und im CSS einen Extra images Ordner erstellt, damit ich nicht durcheinander komme. Müsste so eigentlich funktionieren!

Naja ist jetzt auch nicht soo tragisch.. Man kann die Lightbox ja schließen und das durchklicken durch die Bilder funktioniert ja auch!
 
Du hast Recht, irgendwie sind die aus dem Images Ordner geflogen.. Dachte irgendwie die wären woanders verlinkt, das war dann wohl der Fehler..
Danke für den Hinweis!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben