Anmelden
Ich möchte für die nächsten 30 Tagen angemeldet bleiben
Deutsch
Several pages in the usergroup are available in English. Click on english to visit these pages.
Druckerfreundlich LightBox
Sortieren:
Vorheriger BeitragVorheriger Beitrag Nächster BeitragNächster Beitrag
Sie sind nicht autorisiert, um eine Antwort zu erstellen.
Autor Nachrichten
Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt. Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
24 Feb 2010 16:56
Hallo CSS-Gurus!

Ich habe ein Problem mit einer LightBox. In einem Modul möchte ich einen Link "Tell a friend", der soll ein Formular in einer Lightbox öffnen. Funzt auch, 1. Problem war, dass die Lightbox im oberen Bereich angezeigt wird, und bei längeren Seiteninhalten nicht sichtbar war. Das Problem ist mit einer Art window.scrollTo(0,0)-JavaScript behoben.

Die Lightbox (oder besser gesagt, der abgedunkelte Bereich) hat eine Höhe von 100%, und wenn die Seiteninhalte länger sind lässt sich leider nach unten scrollen, und der Bereich ist dann nicht abgedunkelt. Gibt es irgendeine Möglichkeit, im Code-Behind die genaue Seitenhöhe (NICHT FENSTERHÖHE) festzustellen, und auf dieser Basis mit (divid).Style.Add("height", x) die richtige Größe für den abgedunkelten Bereich einzustellen? In welchem Event steht das evt. zur Verfügung? Oder kann man das mit dem Stylesheet, indem man was anderes als 100% eingibt?

(Wenn ich 100000% oder sowas eingibt dann ist der abgedunkelte Bereich komplett schwarz und die opacity-Einstellungen greifen nicht mehr :-) )

Gruß aus Innsbruck
Michael
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
24 Feb 2010 17:32
Das wäre wohl document.documentElement.scrollHeight, allerdings musst du da auf die Browser-Unterschiede achten. Am sichersten fährst du vermutlich mit jQuery. Aber davon abgesehen, warum nutzt du nicht direkt eine LightBox, die damit ordentlich umgeht? Ich nehme da gerne die Lightbox von http://leandrovieira.com/projects/j...lightbox/. Habe ich auf diversen Seiten von mir im Einsatz, und binde sie entweder per eigenem Modul oder per Container ein. Klappt vorzüglich ;-)
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
01 Mrz 2010 17:55
Hallo Christoph,

danke für den Link. Leider ist der Link zum Download dort defekt, und ich finde da auch keine Kontaktadresse...

Gruß aus Innsbruck
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
02 Mrz 2010 21:06
Das ist natürlich schade, dass das defekt ist, weil ich die wirklich gut finde. Vor allem ist sie auch relativ einfach zu handhaben. Also, sollte es jemand noch haben wollen, ich habe das Archiv noch, einfach PM an mich, dann gibt's 'nen Link ;-)

Zum Einbau: Ich nutze dafür in der Regel entweder einen Container, der das dann im Code-behind alles referenziert und im document.ready() aktiviert, oder alternativ natürlich in einem Modul.

Grundsätzlich beschränkt es sich auf folgende Schritte:
- jquery einbinden
- jquery.lightbox-0.5.min.js einbinden (RegisterClientScript)
- jquery.lightbox-0.5.css einbinden (Page.Head.Controls.Add(...) // Link oder Literal, wie es einem lieber ist)
- document.ready-code ausgeben (RegisterClientScript, bspw. wie folgt [C#]:
this.Page.ClientScript.RegisterClientScriptBlock( // kenne gerade nicht die genauen Parameter dafür. Wichtig ist als Block:
String.Format(CultureInfo.InvariantCulture,
"jQuery(function($) { $('a[rel=lightbox], a.lightbox').each(function(i,el){{$(el).lightBox({{imageLoading:'{0}',imageBtnPrev:'{1}',imageBtnNext:'{2}',imageBtnClose:'{3}',imageBlank:'{4}'}})}});",
this.ResolveUrl("Images/lightbox-ico-loading.gif"),
this.ResolveUrl("Images/lightbox-btn-prev.png"),
this.ResolveUrl("Images/lightbox-btn-next.png"),
this.ResolveUrl("Images/lightbox-btn-close.png"),
this.ResolveUrl("Images/lightbox-blank.gif")));

Die Pfade zu den Bildern sind entsprechend anzupassen. Man kann es darüber auch lokalisieren, wenn man die Bilder austauscht :-) Es gibt auch noch ein paar extra Optionen, mit denen man die Texte und Interaktionskeys beeinflussen kann.

Ich mache mir den ganzen jQuery-Mist noch einfacher, indem ich einfach meine frei verfügbare JQUI-DNN-Bibliothek nutze: http://jquidnn.codeplex.com/ :-)
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
05 Mrz 2010 16:41
Hallo Christoph,

danke für die Anleitung. jQuery ist nun leider noch Neuland für mich... daher die Frage. Nachdem in den HostSettings ja ein Hinweis auf jQuery vorhanden ist gibt es da sicher irgendeinen Befehl, mit dem man jQuery ganz DNN-konform einbinden kann, oder? kannst du mir da weiterhelfen?

Gruß aus Innsbruck
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
06 Mrz 2010 09:34
Hallo Christoph,

vergiss bitte das Mail von gestern... das habe ich mittlerweile alles hinbekommen. Irgendwie ist da ein seltsamer Hund drin, denn ich bekomme - wenn ich deinen Code verwende - immer eine Fehlermeldung (input parameter of wrong type bei String.Format). Wenn ich es so mache funktioniert es aber:

StringBuilder scriptBuilder = new StringBuilder();
scriptBuilder.Append("jQuery(function($) { $('a[rel=lightbox], a.lightbox').each(function(i,el){{$(el).lightBox({{");
scriptBuilder.Append(String.Format(CultureInfo.InvariantCulture, "imageLoading:'{0}',", this.ResolveUrl("Images/lightbox-ico-loading.gif")));
scriptBuilder.Append(String.Format(CultureInfo.InvariantCulture, "imageBtnPrev:'{0}',", this.ResolveUrl("Images/lightbox-btn-prev.png")));
scriptBuilder.Append(String.Format(CultureInfo.InvariantCulture, "imageBtnNext:'{0}',", this.ResolveUrl("Images/lightbox-btn-next.png")));
scriptBuilder.Append(String.Format(CultureInfo.InvariantCulture, "imageBtnClose:'{0}',", this.ResolveUrl("Images/lightbox-btn-close.png")));
scriptBuilder.Append(String.Format(CultureInfo.InvariantCulture, "imageBlank:'{0}'}})}});", this.ResolveUrl("Images/lightbox-blank.gif")));

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jQueryTellAFriend", scriptBuilder.ToString(), true);

Und das ist wohl mehr als seltsam, ich finde in deinem Code nämlich absolut keinen Fehler...

Wie auch immer, ich brauch jetzt nochmal deine Hilfe. Zum einen scheint sich das Menü (das auch jQuery einsetzt) mit dem Einbinden der Scripts zu "raufen", da bleibt jedesmal der Debugger hängen. Zum anderen: Ich habe jetzt im Modul einen ImageButton, und wenn man da drauf klickt soll die Lightbox aufgehen und ein Formular anzeigen (und kein Bild) - und zwar nur da. Ich bin wie gesagt noch nicht so mit jQuery vertraut. Und wenn ich mir die mitgelieferte Index.htm ansehe, dann finde ich bei den Bildern gar keinen Hinweis darauf, was passieren soll, wenn die geklickt werden (ausser, dass sie auf auf das jeweils größere Foto verlinkt sind... wie kommt da das jQuery ins Spiel? Da müsste doch so wie das dasteht ein neues Fenster mit dem Bild aufgehen, und nicht die Lightbox...

Danke für die Hilfe...
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
06 Mrz 2010 11:24
Heieiei, das hättest du mir vorher sagen sollen, dass du keine reine LightBox sondern ein Dialog-System haben willst. Das ist prinzipiell auch in der jQUI-DNN-Bibliothek mit integriert. Die Komponente nennt sich dann Dialog.

JQuery wurde in DNN eingebunden, und leider könnte sich das mit anderen Arten der Einbindung beißen. Ich sollte wohl noch eine Prüfung in die jQUI-DNN-Bibliothek einbauen, ob DNN bereits durch andere Module jQuery eingebunden hat. Insbesondere macht meine Bibliothek aber auch immer direkt einen jQuery.noConflict() Aufruf, so dass es sich nicht mit anderen JS-Biblitoheken beißen sollte.

Zum Verständnis: jQuery arbeitet so, dass man Elemente per CSS-Selektor auswählt und darauf beliebige Operationen ausführt. Die Lightbox selbst dient wirklich nur der Anzeige von Bildern, und ist in so fern simpel zu benutzen, als dass man einfach eine

< a href="url/zum/grossen/bild.jpg" class="lightbox">< img src="url/zum/thumbnail.jpg" />< /a>

Struktur aufbaut, und einen Aufruf

jQuery('.lightbox').lightbox();

macht. Das bindet automatisch alle Events, etc. an die jeweiligen Links. Der Selektor .lightbox bedeutet im CSS ja nichts anderes als alle Elemente mit class="lightbox", und auf alle diese Elemente wird die Funktion lightbox() angewendet. Man kann die Elemente auch beliebig anders klassifizieren, bspw. mit rel="lightbox". Nur muss man statt dessen jQuery('[rel=lightbox]') verwenden, um die Elemente zu suchen. Das macht jQuery so ansprechend, da man wirklich wie mit CSS arbeiten kann.

Der Dialog arbeitet sehr ähnlich, aber wenn du eher ASP.NET-Entwickler bist, würde ich dir meinen Wrapper in Form der jQUI-DNN Bibliothek ans Herz legen wollen. Da gibt es ein < jqui:Dialog runat="server"> Control, dass dir den ganzen Javascript-Hookup-Kram abnimmt. Einfach das Control verwenden, das Modul installieren, und alles sollte prima von statten gehen. Du kannst dir auch im Modul-Package oder unter http://jquidnn.succell.net/ ein Demo von allen enthaltenen Controls anschauen, u.A. auch der Dialog. Dann siehst du ja, ob es dem entspricht, was du suchst :-)

UPDATE: Ich sehe gerade, dass ich für den Dialog ja gar kein Demo eingebaut habe, da ich ihn selbst noch nirgendwo verwendet habe :-| Du findest aber für die grundsätzliche Funktionalität diverse Beispiele hier: http://jqueryui.com/demos/dialog/.

Bei weiteren Fragen dazu stehe ich natürlich gerne zur Verfügung, wobei dafür wohl die Codeplex-Discussions der geeignetere Ort wären ;-)
Gruß aus Dormagen
Christoph Herold
HeroldIT
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
08 Mrz 2010 07:50
Ja, wer lesen kann ist klar im Vorteil :-)

Es gibt noch eine andere Alternative, wenn du wirklich einen Lightbox-Style haben willst. Ich habe schon mal mit der Shadowbox gearbeitet: http://shadowbox-js.com/. Die kann beliebigen Inhalt in der Lightbox anzeigen, ist aber letztlich auch nichts anderes als ein Dialog. Außerdem ist die meines Wissens kostenpflichtig. Von daher würde ich spontan erst mal den Dialog von jQuery UI testen.
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
11 Mrz 2010 07:13
Hallo Christoph,

danke für den Hinweis. Ich hab' noch was gefunden: http://fancybox.net/

Lg
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
11 Mrz 2010 07:42
Die sieht doch auch mal sehr schön aus. Die muss ich mir merken :-)
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
13 Mrz 2010 16:46
Hi Christoph nochmal,

ich hab jetzt Fancybox ausprobiert. Was die Verwendung unter ASP.Net betrifft gibt's noch einen Artikel bei 4GuysFromRolla.

Ich hab in das Ding nun ein Formular reingebastelt, mit einer Textbox und einem LinkButton, und auf der "darunterliegenden" Seite ein Label und einen Link, der das Ding öffnet. Funktioniert soweit.

Beim OnClick auf den LinkButton steht dann:

this.TestLabel.Text = this.TestBox.Text;

 - und this.TextBox.Text ist immer leer.

Der LinkButton führt definitiv ein Postback durch.

Irgendeine Idee?

Gruß aus Innsbruck
Michael



Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
13 Mrz 2010 21:44
Hi Michael!

Ich kenne mich jetzt persönlich nicht ganz mit der Funktionsweise der Fancybox aus, aber ich vermute, die werden das ähnlich handhaben wie andere Lightboxen, die ihre "Dialogkomponente" beim öffnen als letztes Child in den Body umhängen. Wenn du da dann ein input-Element (deine TextBox) drin hast, wird sich das vermutlich mit der restlichen ASP.NET Infrastruktur beißen, als dass sich das Element eben nicht mehr in der Form selbst befindet. Wenn du nun den LinkButton hast, der ja den Postback auch per Javascript auslöst, wird der vermutlich die Form suchen und diese dann submitten. Da deine Textbox da aber nicht drin ist, landet der eingetragene Wert auch nicht im Postback, ergo bleibt TextBox.Text == null. Da wirst du vermutlich auf die Einbindung eines IFrames ausweichen müssen, oder ein paar JS Tricksereien anwenden müssen.

Das ist jetzt wohlgemerkt nur eine Vermutung von mir, die mir allerdings auch sehr plausibel erscheint. Wenn du ein Beispiel irgendwo zugänglich machen kannst, gucke ich mir das gerne mal an, um die Vermutung zu bestätigen, und ggf. noch ein paar Lösungsvorschläge zu machen.
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
14 Mrz 2010 10:30
Hallo Christoph,

danke für die Hilfe. kann ich dir mit E-Mail schicken, hier kommt was von wegen "Dateityp nicht erlaubt", wenn ich versuche das Beispiel als Attachment mitzuschicken. Schreib mir deine Mailadresse bitte in die Nachrichtenzentrale...

Gruß aus Innsbruck
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
14 Mrz 2010 22:40
Jau, meine Idee war goldrichtig. Die Fancybox generiert ihren gesamten DOM-Krempel außerhalb der ASP.NET Form, weshalb da beim Postback keine Werte übermittelt werden. Ich habe jetzt einen kleinen Hack gebaut, der das wieder geradebiegt. Das muss man dann ins OnClientClick eines jeden Buttons/LinkButtons/ImageButtons einhängen, damit die Werte übermittelt werden:

this.SendButton.OnClientClick = String.Format(
CultureInfo.InvariantCulture,
"jQuery('#{0} input, #{0} textarea, #{0} select').each(function(i) {{ var $this = jQuery(this); jQuery('#{1}').append('< input type=\"hidden\" name=\"' + $this.attr('name') + '\" value=\"' + $this.val() + '\" />'); }})",
this.InlineContent.ClientID,
this.form1.ClientID);

Was hier passiert ist eigentlich recht einfach: Wenn der Button geklickt wird, gehe ich den InlineContent (das Element, das in der FancyBox angezeigt wird) durch und suche nach < input>, < textarea> und < select> Elementen. Für jedes dieser Elemente baue ich mir ein < input type="hidden" /> mit entsprechendem name und value Attribut, und hänge das wiederum in die Form ein. Das __doPostBack sorgt dann ganz normal für den Postback, der diesmal dann die Werte übermittelt, weil es ja nun Hidden-Fields mit genau den richtigen Werten gibt.

Ich hoffe, das hilft dir weiter.
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
15 Mrz 2010 05:29
Hallo Christoph,

besten Dank für die Hilfe!

Gruß aus Innsbruck
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
02 Apr 2010 10:51
Jaaaaaa, die nutzen dann die Variante mit dem IFrame und keinen Inline Content. Das geht natürlich auch. Ist halt die Frage, wie du es gerne hättest :-)
Gruß aus Dormagen
Christoph Herold
HeroldIT
Michael TobischBenutzer ist Offline
Beiträge: 768
Advanced Member


--
03 Mai 2010 19:15
Hallo Christoph,

hat alles wunderbar funktioniert mit deiner Methode... und als ich es auf dem Produktionsserver installiert habe, kam die Meldung "Der Server ist so konfiguriert, dass diese Seite nicht angezeigt werden kann" (oder so ähnlich).

Die eigenartige Url (http://xxx.xxxxxx.xxx/......../#LinkID

hat mich schließlich drauf gebracht: Bei mir auf der Entwicklungsmaschine rendert der Link mit < a href="#dnn_Link_ID_xxxxx">, und auf dem Server mit "< a href="../../DesktopModules/MyModule/#dnn_LinkID_xxxxx">

Hast du irgendeine Idee, wo man da drehen muss?

Gruß aus Innsbruck
Michael
Michael Tobisch
DNN★MVP
helferlein.com - Michael Tobisch's Site about DNN, SQL Server, ASP.Net and other related stuff dnn-Connect.org - The most vibrant community around the DNN-platform
Christoph HeroldBenutzer ist Offline
Beiträge: 623
Advanced Member


--
03 Mai 2010 21:56
Öhm, der scheint ja da irgendwo sowas wie ein ResolveUrl() o.Ä. zu machen. Kannst du mal den Code posten, wo die Url erzeugt wird? So spontan fällt mir da leider nichts zu ein.
Gruß aus Dormagen
Christoph Herold
HeroldIT
Sie sind nicht autorisiert, um eine Antwort zu erstellen.

Active Forums 4.2