Lightbox fixieren

[Pit]

Hallo,

ich nutze seit Jahren die Sexy Lightbox, inzwischen natürlich einigermaßen in die Jahre gekommen und nicht mehr weiter entwickelt, aber in einem Projekt mag ich die immer noch.

Nun habe ich ein Problem in einer bestimmten situation: Ich möchte, dass die Lightbox nicht verschwindet, wenn ich neben sie klicke. Das Standardverhalten ist, dass bei klick außerhalb der Lightbox diese sich schließt.

Leider ist die Box nahezu undokumentiert und ich habe auch nur noch den .js.min-Code.

Habe ich eine Chance, meinen Wunsch zu realisieren?

Pit

[bobby]

Moin,

beautify mal den Code, dann wirst du sicher die Stelle finden... nach der Änderung kannst du den Code wieder per minify komprimieren. Einfach mal bei Google nach "beautify JS" suchen.

Gruß Bobby

[Pit]

Hi Bobby,

danke, eine gute Idee.

Ich habe das gemacht und den Quelltext zurück 😀

Leider finde ich hier nur 2 Stellen, in denen das fenster geschlossen wird. Die beziehen sich aber einmal auf Key27 (ich vermute die Escape-Taste) und einmal auf den dafür vorgesehenen Close-Button.

Sieht noch irgendwer die Stelle, die hierfür verantwortlich ist?

Ich lege den Quelltext mal in einem Fiddle ab, um das Forum nicht zuzumüllen.

Pit

[bobby]

Moin,

this.overlay.create({
                style: this.options.Skin[this.options.color],
                hideOnClick: true,
                zIndex: this.options.zIndex - 1,
                callback: $.bind(this, this.close),
                showDuration: this.options.showDuration,
                showEffect: this.options.showEffect,
                closeDuration: this.options.closeDuration,
                closeEffect: this.options.closeEffect
            });

diese Eigenschaft "hideOnClick" sollte das steuern.

Gruß Bobby

[Pit]

Hoi Bobby,

this.overlay.create({
                style: this.options.Skin[this.options.color],
                hideOnClick: true,
                zIndex: this.options.zIndex - 1,
                callback: $.bind(this, this.close),
                showDuration: this.options.showDuration,
                showEffect: this.options.showEffect,
                closeDuration: this.options.closeDuration,
                closeEffect: this.options.closeEffect
            });

diese Eigenschaft "hideOnClick" sollte das steuern.

In 3 Minuten inkl. Posting gefunden? Hut ab, ganz schön imposant. 😀

Jetzt muß ich nur noch herausfinden, wie ich da eingreife, das sieht recht kniffelig aus. Zudem komme ich da erst morgen zu, weil ich dafür heute am falschen Rechner bin.

Auf jeden Fall schonmal vielen Dank für die Hilfe. (ich hoffe, ich komme auf die Lösung ;) )

Pit

[bobby]

Moin,

wie wärs damit die option an den stellen einfach auf "false" zu setzen?

Gruß Bobby

[Pit]

Moin,

Hallo Bobby,

so... jetzt habe ich grad "umgerüstet" und kann etwas ausprobieren.

wie wärs damit die option an den stellen einfach auf "false" zu setzen?

Gute Idee, hat aber nichts gebracht.

Aber in diser Zeile hier scheint es zu liegen:

callback: $.bind(this, this.close)

Denn wenn ich hier das this.close herausnehme, dann bleibt die Box stehen. Jetzt muß ich aber noch einen Weg finden, über die Optionen einen Parameter an das Script zu geben, der dann in dieser zeile abgefragt wird und entsprechend steuert, ob die Box bei Klick neben die Box geschlossen werden soll oder nicht.

Pit

[Pit]

Guten Abend,

Aber in diser Zeile hier scheint es zu liegen:

callback: $.bind(this, this.close)

Denn wenn ich hier das this.close herausnehme, dann bleibt die Box stehen. Jetzt muß ich aber noch einen Weg finden, über die Optionen einen Parameter an das Script zu geben, der dann in dieser zeile abgefragt wird und entsprechend steuert, ob die Box bei Klick neben die Box geschlossen werden soll oder nicht.

Und hier liegt echt der Hase im Pfeffer und für mich wirds zu hoch.

Der Aufruf dieser Lightbox erfolgt darüber, dass man einem Link ein rel="box" anhängt, dann weiß SexyLightbox, dass es zum Einsatz kommt. Man kann weiterhin über Parameter im Link Höhe und Breite sowie Titel und Position (inline oder Iframe) übergeben.

Nun dachte ich mir, dass ich über den Titel steuern kann, ob ich obige Zeile manipuliere oder nicht.

Aber leider ist an dieser Stelle anscheinend der Titel vom Script noch gar nicht geparsed, kurz gesagt, er ist dem Script an dieser Stelle leider unbekannt.

Und genau hier enden meine bescheidenen JS kompetenzen.

Ich hätte allzugerne dem Script mitgeteilt, dass wenn der String "Test_XYZ" im Title-Argument (ist das der korrekte technicus terminus?) steht, dass es this.close nicht "binden" soll. Und wenn das nicht im Title steht, soll es das binden.

Wer kann mir hier weiterhelfen?

Pit

[Pit]

Hallo,

nachdem ich wirklich alles versucht habe, vor dem entsprechenden Codepart auf das Titelattribut zuzugreifen, das aber nicht gelang, habe ich versucht, auf die Options zuzugrifen. Das ging. 😀

Hierzu wäre aber nötig, 2 verschiedene Instanzen der SLB zu initialisieren.

Also mal gesucht, ob es hierzu Ansätze gibt. Über diese Suche bin ich zu einer Seite gestoßen, die die SLB inkl. Dokumentation zum Download anbietet, bzw. anbot und die es heute noch im Netz gibt (immerhin ist das Teil 10 Jahre alt und es gibt heute sicher zeitgemäßere Lightboxen)

Und siehe da: Mein Wunsch ist längst integriert, ich wußte es nur nicht. Setzt man also "modal=1" mit in den Link, wird genau das umgesetzt, wonach ich gesucht habe.

Lösung also gefunden, Dank an Bobby (und andere Mitleser und -denker, die ggf. nicht gepostet haben, aber mitgedacht hatten),

Pit

[bobby]

Moin,

Da war ich ja gar nicht so schlecht mit der Option hideOnClick.

Denn im Script ist folgende Stelle dafür verantwortlich:

this.overlay.options.hideOnClick = !i['modal'];

Gruß Bobby

[Pit]

Hi Bobby,

Da war ich ja gar nicht so schlecht mit der Option hideOnClick.

Du warst ohnehin sehr hilfreich!

Denn im Script ist folgende Stelle dafür verantwortlich:

this.overlay.options.hideOnClick = !i['modal'];

Pit Pit

[Tabellenkalk]

Hallo,

Und siehe da: Mein Wunsch ist längst integriert, ich wußte es nur nicht.

231

Gruß
Kalk

[Pit]

Und siehe da: Mein Wunsch ist längst integriert, ich wußte es nur nicht.

231

Das ist gemein...wenn auch lustig 😉 Weil: Es gab für mich zum Zeitpunkt meiner Frage und meines (mit 2 Std. kommst Du nicht hin) Ausprobierens gar keine Doku. Auf die bin ich erst im Zuge meiner Probiererei gestoßen. 😀

Pit

[Rolf B]

Hallo Pit,

LOOOL - da schreib ich mir eine Stunde lang den Wolf und du findest es derweil selbst.

Immerhin hab ich noch rausgefunden, wie mal modal=1 als Default einbaut.

Rolf

[Pit]

Hallo Pit,

LOOOL - da schreib ich mir eine Stunde lang den Wolf und du findest es derweil selbst.

Immerhin hab ich noch rausgefunden, wie mal modal=1 als Default einbaut.

Hallo Rolf,

Du wärest (mal wieder) wirklich der Retter in der Not gewesen, deshalb trotzdem Danke, Danke, Danke für Deine Mühe.

Du hast in diesem Fall aber Recht, dass sie nicht mehr nötig war, weil ich inzwischen eine alte Doku gefunden habe. Danach suche ich eigentlich schon seit Jahren, weil ich diese SLB schon seit Jahren "mitschleppe".

Übrigens verwende ich JQuery 1.9 und habe in der Konsole keine Fehler beim Aufruf einer SLB. Kann ich ggf. heute Abend nochmal genauer erruieren, aber auf den ersten Blick war das nichts…

Modal-default finde ich prima, allerdings genau so, wie es bereits implementiert ist, nämlich auf modal=0.

Trotz allem nochmal vielen lieben Dank für Deine Mühe...und auch, wenn ich das jetzt tatsächlich nicht umsetzen werde, die 10,- Euronen spende ich dem Verein trotzdem.

Pit

[Rolf B]

Hallo Pit,

1.9 oder 1.9.1? Sollte aber egal sein, ein Property wie $.browser entfernt man nicht in einer Subversion.

Wenn Du keine Fehler hat, dann lädst Du entweder eine fertig gebündelte Version von jQ 1.9.1 mit jQ Migrate, oder lädst das Migrate selbst dazu.

Rolf

[Pit]

Hallo Rolf,

1.9 oder 1.9.1? Sollte aber egal sein, ein Property wie $.browser entfernt man nicht in einer Subversion.

Ich habe mich vertan... ich nutze UI 1.9.0, aber jQuery v1.8.3 😀

Pit

[Rolf B]

Hallo Pit,

<a href="images/puente_mujer.jpg" rel="sexylightbox" title="Puente de la Mujer - Buenos Aires - Argentina">
  <img src="images/small_puente_mujer.jpg" alt="" />
</a>

Quelle: http://www.jque.re/plugins/modals-lightboxes/sexy.lightbox/

Auf dein Problem komme ich noch, erstmal diese Anmerkung: Wer solches HTML vorgibt, gehört, wie mein seliger Mathelehrer zu sagen pflegte, standrechtlich mit der Bratwurst erschossen. rel ist kein Freitextattribut. Es wird missbraucht. Aber das fixe ich nicht, im rel kann offenbar noch mehr stehen als nur das sexylightbox Tag. Angesichts der Nichtdoku des Tools bleibe ich davon.

Darüber hinaus wäre es sicherlich auch hilfreich, die Text-Info zum Bild im alt-Attribut des img unterzubringen und nicht (nur) im title des Links.

Zu deiner Lösungsidee: magic content in Textinformationen unterzubringen, der bestimmte Steueraktionen auslöst, sowas habe ich auch schon programmiert. 1990, als ich es noch nicht besser wusste, und ich obendrein keine Chance hatte, ein passendes Datenfeld dafür hinzuzufügen. In den Schnittstellen zu unseren Mainframe-Modulen findet man sowas auch immer wieder. Aber es ist falsch, falsch, falsch! Damit schüttest Du Sambal Oelek auf den gepfefferten Hasen.

Ich habe mir das Fiddle mal angeschaut. Was mir direkt auffällt: In der Console befinden sich schwere Fehler, wenn man jQuery 1.9.1 verwendet, weil das Plugin Teile von jQuery verwendet die seit jQ1.3 deprecated sind und in 1.9 gelöscht wurden. Man muss entweder ein älteres jQuery als 1.9 verwenden oder jQuery Migrate 1.0 dazu laden. Und jQuery UI braucht's auch...

Danach liefert etwas Tracing die Antwort, dass die Lösung bereits in SLB eingebaut ist: man hängt an die URL, die im href steht, ein ?modal=1 an. Dann schließt er nur mit Click auf den Close-Button.

Wenn Du die Möglichkeit haben willst, den modal-Zustand als Default vorzugeben, wäre folgendes zu tun:

• erweitern der Default-Optionen, die von der getOptions-Methode gesetzt werden, um eine Zeile modal: 0,. Zum Beispiel so:

(function($) {
    SexyLightbox = {
        getOptions: function() {
            return {
                name: 'SLB',
                modal: 0,          // <<< RolfB: Globales modal-Flag
                zIndex: 32000,
                color: 'black',

• Erweitern der overlay.show-Funktion (ca Zeile 420), so dass das modal-Flag beachtet wird

           i = $.extend({}, {
                'width': 0,
                'height': 0,
                'modal': this.options.modal ? 1 : 0,   // <<< RolfB: Globales modal-Flag
                'background': '',
                'title': b
            }, i || {});

Und dann kannst Du das einfach beim initialize der sexylightbox verwenden:

     SexyLightbox.initialize( {
      	color:'black', modal:1,
        dir: 'https://www.jque.re/plugins/modals-lightboxes/sexy.lightbox/sexyimages'
      });

modal:1 oder modal:true geht beides, dafür dient das this.options.modal ? 1 : 0 Konstrukt in der 2. Änderung). Fertig.

Bei Zufriedenheit darfst Du gern 10€ an den Self-Verein spenden 😂

Rolf