{"id":521,"date":"2007-10-09T19:15:31","date_gmt":"2007-10-09T17:15:31","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2007\/10\/09\/bilder-mit-lightbox-effekt\/"},"modified":"2017-12-03T11:06:41","modified_gmt":"2017-12-03T09:06:41","slug":"bilder-mit-lightbox-effekt","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2007\/10\/bilder-mit-lightbox-effekt\/","title":{"rendered":"Bilder mit Lightbox Effekt"},"content":{"rendered":"

\"physalis2.jpg\"<\/a>Fotoquelle : Kellermeister <\/a>| photocase.com<\/cite><\/p>\n

Heute habe ich den Lightbox-Effekt in diesem weblog installiert. Das Anzeigen eines Bildes mit durchscheinendem Overlay habe ich schon eine ganze Weile bewundert und dachte immer, dass das wohl ziemlich kompliziert sein muss.<\/p>\n

Ist es aber nicht. Im Gegenteil – Lightbox ist in gem\u00fctlichen 5 Minuten installiert.
\nKlick doch mal auf das Bild von der Physalis … :-)<\/p>\n

Das Originalskript von Lokesh Dhakar<\/a> ist hier zu finden.
\nhttp:\/\/www.huddletogether.com\/projects\/lightbox\/<\/a><\/p>\n

Dieses Skript l\u00e4sst sich auf jeder Webseite einbinden.<\/p>\n

Das .zip Archiv runterladen, entpacken und die darin enthaltenen Dateien entweder im Root oder einenm Verzeichnis ablegen.
\nIm head der Datei folgende Codezeile einf\u00fcgen:
\n<script src=\"lightbox.js\" type=\"text\/javascript\"><\/script><\/code><\/p>\n

(Pfad anpassen nicht vergessen, wenn die Dateien in einen x-tra Ordner gelegt wurden.
\nMan kann die Lightbox auch \u00fcber .css noch „versch\u00f6nern“.
\nDann im head der Datei auch den Pfad zum .css stylesheet einbinden.
\n<link href=\"lightbox.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"screen\" \/><\/code><\/p>\n

Jedes Bild, bzw. jeder Link auf ein Bild, welches sich in einer vergr\u00f6\u00dferten Ansicht mit dem Overlay zeigen soll, muss dann im Quellcode das rel=“lightbox“ Attribut erhalten.<\/p>\n

Eine etwas umfangreichere Variante der Lightbox ist die Greybox<\/strong>, die ich aber noch nicht getestet habe. Hier k\u00f6nnen ganze Fotogalerien in einem Overlay weitergeschaltet werden.
\nhttp:\/\/orangoo.com\/labs\/GreyBox\/<\/a><\/p>\n

F\u00fcr Wordress geht es aber noch einfacher.<\/h3>\n

Den virtuosen Plugin-Machern sei Dank :-)
\nIm Weblog von Christian Fischer<\/a> gibt es ein Plugin<\/a>.<\/p>\n

Das Plugin wie \u00fcblich in den Plugin-Ordner von WordPress hochladen.<\/p>\n

Dann ein Bild \u00fcber die Upload Funktion einf\u00fcgen und Bild zum Editor senden.Anschlie\u00dfend in die Code-Ansicht des Editors gehen und dem a-Element das Attribut rel=“lightbox“<\/strong> hinzuf\u00fcgen.<\/p>\n

That’s it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Fotoquelle : Kellermeister | photocase.com
\nHeute habe ich den Lightbox-Effekt in diesem weblog installiert. Das Anzeigen eines Bildes mit durchscheinendem Overlay habe ich schon eine ganze Weile bewundert und dachte immer, dass das wohl ziemlich kompliziert sein muss.
\nIst es aber nicht. Im Gegenteil – Lightbox ist in gem\u00fctlichen 5 Minuten installiert.
\nKlick doch mal auf das Bild … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,150,188,241],"yst_prominent_words":[],"class_list":["post-521","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-technik","tag-skripte","tag-javascripts"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/521","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=521"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":4049,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/521\/revisions\/4049"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=521"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}