{"id":1577,"date":"2009-07-15T12:00:56","date_gmt":"2009-07-15T10:00:56","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=1577"},"modified":"2009-07-15T12:00:56","modified_gmt":"2009-07-15T10:00:56","slug":"in-typolight-die-lightbox-mit-einer-lupe-versehen","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2009\/07\/in-typolight-die-lightbox-mit-einer-lupe-versehen\/","title":{"rendered":"In Typolight die Lightbox mit einer Lupe versehen"},"content":{"rendered":"

Was eine Lightbox ist, muss sicherlich nicht erkl\u00e4rt werden. In Typolight ist der TinyMCE Editor so konfiguriert, dass man via Button Bilder mit Lightbox-Effekt einf\u00fcgen kann. Aber das ist nicht der einzige Weg:\u00a0 Bilder in einem Artikel k\u00f6nnen au\u00dferdem als eigenst\u00e4ndiges Element (Elementtyp Bild) hinzigef\u00fcgt werden oder als Bild im Elementtyp Text. Bei beiden M\u00f6glichkeiten wurde auch hier wieder an alles gedacht: Via Checkbox kann man bestimmen, ob der Lightbox Effekt hinzugef\u00fcgt werden soll oder nicht.<\/p>\n

Wenn aber nun jemand eine Webseite betritt, k\u00f6nnen zun\u00e4chst einmal normale Bilder und Bilder mit Lightbox-Effekt nicht unterschieden werden. Der User muss schon mehr oder weniger zuf\u00e4llig \u00fcber ein Bild hovern um zu erkennen, dass man es anklicken kann. Insofern fand ich es sinnvoll, Bildern mit Lightbox-Vergr\u00f6\u00dferung eine Mini-Icon in Form einer Lupe hinzuzugeben. Damit wird klar gemacht, dass man das Bild anklicken und vergr\u00f6\u00dfern kann.<\/p>\n

M\u00f6glichkeiten eine solche Lupe ohne viel Aufwand mit reinem CSS zu erzeugen gibt es viele. So z.B. k\u00f6nnte man die Lupe als Hintergrundbild einf\u00fcgen oder – wenn man auf den IE6 nicht so viel Wert legt \u00fcber den Attributselektor<\/a> rel=“Lightbox“ gezielt die Links mit Lightbox ausw\u00e4hlen. Hat aber den Nachteil, dass die Lupe zwar angezeigt wird, selbst aber nicht anklickbar ist. Und das ist aus meiner Sicht nicht ok, denn eigentlich bedeutet das icon ja: „hier klicken, dann wird’s vergr\u00f6\u00dfert“ und w\u00fcrde wohl auch als erstes angeklickt.<\/p>\n

Es ist jedoch relativ einfach in Typolight auch als Nicht-Profi-Programmierer \u00fcber die Templates in den code einzusteigen und der Ausgabe des Lightbox-Links ein image-Tag f\u00fcr die Lupe hinzuzuf\u00fcgen. Typolight hat erfreulicherweise an alles gedacht. Sicherlich ist es auch z.B. in WordPress m\u00f6glich die Templates online zu bearbeiten, aber Typight geht hier noch einen intelligenten Schritt weiter: \u00dcber den Men\u00fcpunkt „Templates“ im Backend kann man das Template, welches man \u00e4ndern m\u00f6chte, ausw\u00e4hlen. Typolight erzeugt dann automatisch eine Kopie davon und legt diese im Ordner „templates“ an. Ist zu einem Template eine Kopie vorhanden, wird diese verwendet, wenn nicht, verwendet TL die Originaldatei. Der Clou an der Sache ist, dass alle Dateien, die sich im Ordner „templates“ befinden bei einem update nicht \u00fcberschrieben werden. Insgesamt ist diese Organisation und die Bearbeitungsm\u00f6glichkeit f\u00fcr Webdesigner, die mit diesem System arbeiten und selbstst\u00e4ndige gestalten m\u00f6chten schon mehr als ideal.<\/p>\n

Aber zur\u00fcck zur Lupe.
\nAuch als Noitz an mich selber beschreibe ich jetzt kurz wie man der Lightbox eine Lupe hinzuf\u00fcgt.<\/p>\n

Zuerst ein Icon erstellen. Wer mag, kann auch meines nehmen:
\n\"lupe\"<\/a><\/p>\n

Das Bild via ftp auf den Server hochladen. Ich lege meine Bilder im Ordner „dateien“ ab, nicht verwirren lassen – eigentlich hei\u00dft dieser Ordner tl_files. Da ich aber in den urls „tl_files“ nicht drin stehen haben m\u00f6chte, ist es in allen meiner TL-Installationen so, dass ich mir beim Setup einen Ordner mit der Bezeichnung „dateien“ anlege.
\nNun muss man wissen, welches template ge\u00e4ndert werden muss.
\nEine Erweiterung, die einem dabei hilft, das entsprechende template zu finden hei\u00dft templateinfo und kann \u00fcber das repository installiert werden.<\/a><\/p>\n

Ich beschreibe hier den Weg, wenn man das Bild NICHT als eigenst\u00e4ndiges Element, sondern als „Anhang“ an das Element Text einf\u00fcgt.
\nAlso: BE => Artikel => Artikel ausw\u00e4hlen => Neues Element hinzuf\u00fcgen => Elementtyp Text.
\nGanz unten dann Checkbox „Ein Bild hinzuf\u00fcgen“ => Bild ausw\u00e4hlen und Checkbox „Gro\u00dfansicht“ aktivieren.
\nIm BE unter dem Men\u00fcpunkt „templates“ das template „ce_text_image_full_size<\/strong>“ ausw\u00e4hlen und \u00fcber TL als Kopie im Ordner templates anlegen lassen.
\nDann die Innereien des templates \u00f6ffnen und das image-Tag an zwei Stellen wie folgt einf\u00fcgen:<\/p>\n

\n
margin): ?> style=\"margin; ?>\">\n\n\"lupe\"\n\"\"imgSize; ?> alt=\"alt; ?>\" \/><\/a>\ncaption): ?>\n
caption; ?><\/div>\n<\/div><\/pre>\n
Jetzt noch im css das Bild auf position: relative; setzen und die Lupe \u00fcber die id absolut darin positionieren.
\nFertig.<\/p>\n
Zum Schluss noch meinen Dank an die Community<\/a>, die mir bei der L\u00f6sung des Problems gerne und gut geholfen hat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Es ist relativ einfach in Typolight auch als Nicht-Profi-Programmierer \u00fcber die Templates in den code einzusteigen und eigene \u00c4nderungen vorzunehemen. Wie man das macht, erkl\u00e4rt dieser Artikel anhand des Bildes einer Lupe, die einem Lightbox-Bild hinzugef\u00fcgt werden soll.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[229,360,398,399,400,93,14,143],"yst_prominent_words":[],"class_list":["post-1577","post","type-post","status-publish","format-standard","hentry","category-contao","tag-templates","tag-typolight","tag-attributselektoren","tag-lupe","tag-magnifier","tag-contao","tag-webdesign-2","tag-css-xhtml"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1577"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1577\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1577"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}