{"id":1359,"date":"2012-09-19T16:07:16","date_gmt":"2012-09-19T16:07:16","guid":{"rendered":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=1359"},"modified":"2012-09-19T18:02:33","modified_gmt":"2012-09-19T18:02:33","slug":"fancybox-mit-zeilenumbruch-im-titel","status":"publish","type":"post","link":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=1359","title":{"rendered":"Fancybox mit Zeilenumbruch im Titel"},"content":{"rendered":"
\"\"<\/a>

Ein Titel mit Umbr\u00fcchen in Fancybox und Tooltip<\/p><\/div>\n

K\u00fcrzlich habe ich etwas Zeit gehabt, meinen Website zu \u00fcberarbeiten. Dabei habe ich zwei meiner Blumenseiten mit Bildern illustriert, n\u00e4mlich den Blumenfinder<\/a> und die Liste mit den Kulturanleitungen<\/a>. F\u00fcr die Bildanzeige verwende ich JQuery 1.7<\/a> und das JQuery-Plugin fancybox 2.0.6<\/a>. Die Listen selbst werden mit ASP.Net aus einer Datenbank generiert. Da meine Bildbeschriftungen ziemlich kompliziert sind (deutscher und lateinischer Name, Autor\/in sowie URL der Quelle), h\u00e4tte ich sie gerne mit dem <br\/>-Tag umgebrochen<\/strong>. Dabei bin ich aber \u00fcber die Tatsache gestolpert, dass Fancybox den Titel aus dem Attribut title des <a>-Tags holt<\/strong>. In einem HTML-Attribut ist normalerweise kein HTML erlaubt.<\/p>\n

Wenn man <br\/> direkt in das Title-Tag schreibt, dann wird zwar der Titel in der Fancybox korrekt umgebrochen, aber der Tooltip auf dem kleinen Bild zeigt ein h\u00e4ssliches <br\/> an. Gibt man \\n statt <br\/> im Attribut title ein, dann bricht der Tooltip korrekt um, aber der Umbruch wird von der Fancybox ignoriert.<\/p>\n

F\u00fcr die L\u00f6sung ben\u00f6tigt man etwas JavaScript sowie vertiefte Kenntnisse des APIs von Fancybox. Aufpassen muss man auch beim Googeln: Als erstes st\u00f6sst man auf einen L\u00f6sungsvorschlag mit der option titleFormat. Diese L\u00f6sung bezieht sich aber auf Versionen vor 2.0 und scheint mit den aktuellen Versionen des Plugins nicht zu funktionieren.<\/p>\n

Voraussetzung ist, dass man die Bilder in 2 Versionen hat, eine kleine f\u00fcr die Thumbnails und eine grosse f\u00fcr die Anzeige in der Fancybox. Als n\u00e4chstes muss man JQuery und Fancybox herunterladen und in einem Ordner des Websites speichern (JQuery kann man auch direkt verlinken. Dann werden im Header der aspx-Seite alle Packages verlinkt, ungef\u00e4hr so:<\/p>\n

\r\n    <script type="text\/javascript" \r\n      src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7\/jquery.min.js">\r\n    <\/script>\r\n    <script type="text\/javascript" \r\n      src="\/js\/fancybox\/lib\/jquery.mousewheel-3.0.6.pack.js">\r\n    <\/script>\r\n    <!-- Add fancyBox -->\r\n    <link rel="stylesheet" type="text\/css" media="screen"\r\n       href="\/js\/fancybox\/source\/jquery.fancybox.css?v=2.0.6" \/>\r\n    <script type="text\/javascript" \r\n       src="\/js\/fancybox\/source\/jquery.fancybox.pack.js?v=2.0.6"><\/script>\r\n\r\n    <!-- Optionally add helpers - button, thumbnail and\/or media -->\r\n    <link rel="stylesheet" \r\n      href="\/js\/fancybox\/source\/helpers\/jquery.fancybox-buttons.css?v=1.0.2" \r\n      type="text\/css" media="screen" \/>\r\n    <script type="text\/javascript" \r\n      src="\/js\/fancybox\/source\/helpers\/jquery.fancybox-buttons.js?v=1.0.2">\r\n    <\/script>\r\n    <script type="text\/javascript" \r\n       src="\/js\/fancybox\/source\/helpers\/jquery.fancybox-media.js?v=1.0.0">\r\n    <\/script>\r\n\r\n    <link rel="stylesheet" \r\n      href="\/js\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.css?v=2.0.6" \r\n      type="text\/css" media="screen" \/>\r\n    <script type="text\/javascript" \r\n       src="\/js\/fancybox\/source\/helpers\/jquery.fancybox-thumbs.js?v=2.0.6">\r\n    <\/script>\r\n<\/pre>\n
Die Aufbereitung der Liste erfolgt rein deklarativ in einem GridView. In der Spalte mit den Bildern braucht man einerseits eine Bild- und zus\u00e4tzlich eine Hyperlink-Komponente, die in einem TemplateField verpackt werden. Da der Titel aus mehreren Datenbankfeldern, die gef\u00fcllt oder leer sein k\u00f6nnen, zusammengesetzt wird, ergibt sich in der aspx-Seite f\u00fcr die Spalte folgender Code:<\/p>\n
\r\n          <asp:TemplateField HeaderText="Bild" SortExpression="bildpfad">\r\n            <ItemTemplate>\r\n              <asp:HyperLink ID="HyperLink1" runat="server" CssClass="fancybox" \r\n                NavigateUrl='<%# "http:\/\/dl.dropbox.com\/u\/51556921\/imgblumeng\/" \r\n                   + Eval("bildpfad") %>' \r\n                Visible='<%#!DBNull.Value.Equals(Eval("bildpfad")) \r\n                   && !DBNull.Value.Equals(Eval("QuelleBild")) && !Eval("QuelleBild").Equals("") \r\n                   && !Eval("QuelleBild").Equals(" ") %>' \r\n                   rel="group"\r\n                   title='<%# Eval("name_l_d") + \r\n                     (DBNull.Value.Equals(Eval("AutorenBild")) ? "" : "\\n" + Eval("AutorenBild")) \r\n                     + (DBNull.Value.Equals(Eval("UrlBild")) ? "" : "\\n" + Eval("UrlBild"))%>'>\r\n                <asp:Image ID="Image1" runat="server" \r\n                  ImageUrl='<%# "http:\/\/dl.dropbox.com\/u\/51556921\/imgblumenk\/" \r\n                    + Eval("bildpfad") %>' \r\n                  Visible='<%#!DBNull.Value.Equals(Eval("QuelleBild"))%>' \r\n                  Height="80" \/>\r\n            <\/asp:HyperLink>\r\n            <\/ItemTemplate>\r\n            <HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" \/>\r\n          <\/asp:TemplateField>\r\n<\/pre>\n
Der springende Punkt sind die zwei “\\n”<\/strong> im Attribut title<\/strong> der Komponente . Damit wird der Tooltip f\u00fcr den Hyperlink korrekt umgebrochen. Nun fehlt uns noch das JavaScript, das diesen Umbruch durch das HTML-Tag <br\/> ersetzt. Der JavaScript-Befehl, um alle Umbr\u00fcche in einem String zu ersetzen lautet:<\/p>\n
\r\nmyString.replace(\/\\n\/g, "<br\/>");\r\n<\/pre>\n
Nun muss man diesen Befehl noch in die Callback-Method beforeLoad von Fancybox h\u00e4ngen (funktioniert nur ab Version 2, siehe Doku<\/a>). Wenn man noch m\u00f6chte, dass die grossen Bilder bereits angezeigt werden, wenn man mit der Maus \u00fcber die kleinen Vorschaubilder f\u00e4hrt (auf gut Neudeutsch: beim Hovern \u00fcber die Thumbnails), dann definiert man f\u00fcr die Fancybox noch eine Funktion auf dem Hover-Ereignis. Alles zusammen sieht dann so aus:<\/p>\n
\r\n  <script type="text\/javascript">\r\n    $(document).ready(function () {\r\n      $(".fancybox").fancybox({\r\n        beforeLoad: function () {\r\n          this.title = this.title.replace(\/\\n\/g, "<br\/>");\r\n        },\r\n        helpers: {\r\n          title: {\r\n            type: 'float' \r\n          },\r\n          overlay: null\r\n        }\r\n      }).hover(function () {\r\n        $(this).click();\r\n      });\r\n      ;\r\n    });\r\n  <\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Ein Titel mit Umbr\u00fcchen in Fancybox und Tooltip<\/p>\n
K\u00fcrzlich habe ich etwas Zeit gehabt, meinen Website zu \u00fcberarbeiten. Dabei habe ich zwei meiner Blumenseiten mit Bildern illustriert, n\u00e4mlich den Blumenfinder und die Liste mit den Kulturanleitungen. F\u00fcr die Bildanzeige verwende ich JQuery 1.7 und das JQuery-Plugin fancybox 2.0.6. Die Listen selbst werden mit […]<\/p>\n","protected":false},"author":1,"featured_media":1362,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[63,34,35],"tags":[156,157],"_links":{"self":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1359"}],"collection":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1359"}],"version-history":[{"count":18,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1359\/revisions"}],"predecessor-version":[{"id":1371,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1359\/revisions\/1371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/media\/1362"}],"wp:attachment":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}