{"id":1012,"date":"2009-12-20T13:31:09","date_gmt":"2009-12-20T11:31:09","guid":{"rendered":"http:\/\/blog.rockpixx.com\/?p=155"},"modified":"2013-02-23T17:23:15","modified_gmt":"2013-02-23T16:23:15","slug":"jquery-nun-auch-hier-vertreten","status":"publish","type":"post","link":"http:\/\/www.rockpixx.com\/wordpress\/jquery-nun-auch-hier-vertreten\/","title":{"rendered":"jQuery: Nun auch hier vertreten"},"content":{"rendered":"

Moin,<\/p>\n

irgendwie stach es mir ja schon seit l\u00e4ngerem ins Auge: Schicke Web-Seiten, deren Funktionalit\u00e4t dank jQuery und einiger PlugIns gut aufgepeppt wurde \u2013 \u201eWeb 2.0\u201c l\u00e4sst gr\u00fc\u00dfen\u2026<\/p>\n

Ein konkreter Anlass, das auch einmal auszuprobieren, ergab sich f\u00fcr mich, als ich feststellte, dass rockpixx.com ja nun doch schon einige bekannte Namen vor den Kameras hatte, und dass es doch sch\u00f6n w\u00e4re, die Bilder davon einmal prominenter auf der Eingangsseite zu pr\u00e4sentieren.<\/p>\n

Gesucht \u2013 gesurft \u2013 gefunden: Ein sog. \u201eKarussell\u201c musste also her \u2013 aber was f\u00fcr eines? Eine Flash-L\u00f6sung mit Zugriff auf eine XML-Datei kam f\u00fcr mich nicht in Frage, da Flash ein geschlossenes System darstellt und nicht gerade suchmaschinenfreundlich ist. Au\u00dferdem hat nicht jeder Besucher im Browser Flash aktiviert. Also musste eine L\u00f6sung auf JavaScript-Basis her, die mittels PHP aus der hinter rockpixx.com stehenden MySQL-Datenbank gef\u00fcttert werden konnte. Zudem kommt auf rockpixx.com an verschiedenen Stellen sowieso schon JavaScript zum Einsatz.<\/p>\n

Und das bedeutet nun: jQuery nebst PlugIn \u201einfinitecarousel\u201c von\u00a0\u2192 http:\/\/www.catchmyfame.com<\/a> ist jetzt auf der Startseite vertreten und spielt Bilder von ausgew\u00e4hlten Gigs ab. Die Anzahl der Bilder ist unbegrenzt, sie laufen von alleine durch, lassen sich aber auch vom Benutzer selbst durchklicken. Bei Klick auf das Bild kann sogar direkt auf den Gig innerhalb der Site verwiesen werden. Und alles l\u00e4sst sich bequem aus der Datenbank speisen, ohne dass die Datenbank deswegen noch umgebaut werden m\u00fcsste. Die ersten Testl\u00e4ufe lie\u00dfen mich zufrieden grinsen\u2026<\/p>\n

Allerdings behagte mit die \u00fcber die jeweiligen Bilder eingeblendete Schrift nicht wirklich: Da nur eine Text-Farbe m\u00f6glich war, gab es Bilder, auf denen der eingeblendete Name nicht gut zu lesen war.<\/p>\n

Die erste Abhilfe, einen teiltransparenten Balken unter die Schrift zu legen, sah aber nicht gut aus, da das Bild dadurch kleiner wirkte. Die zweite m\u00f6gliche L\u00f6sung, den Text fest ins Bild einzubetten, war ebenfalls ungeeignet, da suchmaschinenunfreundlich. Zudem ist der Text ja bereits in der Datenbank vorhanden, warum ihn also nicht auch nutzen?<\/p>\n

Die L\u00f6sung fand ich in einem weiteren PlugIn f\u00fcr jQuery: \u201eFontEffect\u201c von\u00a0\u2192 http:\/\/www.iofo.it\/jquery\/fonteffect\/<\/a>. Hier lassen sich viele Schrifteffekte, die \u00fcber CSS hinausgehen (wann endlich kommt CSS3 und wann endlich kommen Browser, die das auch umsetzen k\u00f6nnen?), mittels verschiedener Parameter steuern. Der von mir ben\u00f6tigte Effekt, eine d\u00fcnne dunkle Kontur um den hellen Text zu legen, ist hier m\u00f6glich. Das einzige Problem war noch, dass sich bestimmte Vorgaben von \u201eFontEffects\u201c mit den Vorgaben von \u201einfinitecarousel\u201c nicht vertragen. Verlangt \u201eFontEffect\u201c beispielsweise den Einsatz von DIVs, so ist ausgerechnet an der Stelle, wo die Bildbeschriftung angezeigt werden soll, in \u201einfinitecarousel\u201c nur ein P-Tag gestattet \u2013 sonst nichts.<\/p>\n

Ein wenig Experimentieren ergab dann die L\u00f6sung, dass DIVs auch in Classes umcodiert werden k\u00f6nnen und beide PlugIns zufrieden sind, wenn man in der PHP-Datei zuerst \u201eFontEffect\u201c und dann erst \u201einfinitecarousel\u201c aufruft. Dann eine CSS-Definition noch einmal doppeln, damit es nicht zu unsch\u00f6nen Anzeigeeffekten kommt und fertig ist die ganze Geschichte.<\/p>\n

In meinen verschiedenen Browsern l\u00e4uft nun alles so wie es soll und das reicht mir auch. Das eindeutige Plus dieser Angelegenheit ist f\u00fcr mich, dass ich hier eine L\u00f6sung habe, die sog. \u201enon-obstructives\u201c JavaScript nutzt, Open-Source ist und unter CC-Lizenz steht. Der Rest ist PHP, HTML und CSS (und ein Texteditor \u2013 mein DreamWeaver ist in diesem Fall nicht wirklich hilfreich).<\/p>\n","protected":false},"excerpt":{"rendered":"

Moin, irgendwie stach es mir ja schon seit l\u00e4ngerem ins Auge: Schicke Web-Seiten, deren Funktionalit\u00e4t Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":9177,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"jQuery: Nun auch hier vertreten http:\/\/rockpixx.com\/wordpress\/?p=1012","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[32,108],"tags":[1831,109,189,211,1729,227],"class_list":["post-1012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sonstiges","category-updates","tag-1831","tag-intern","tag-jquery","tag-programmierung","tag-updates","tag-webseite"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2009\/12\/20091220-Screenshot.jpg","jetpack-related-posts":[{"id":1041,"url":"http:\/\/www.rockpixx.com\/wordpress\/abba-oder-musikantenstadel-das-publikum\/","url_meta":{"origin":1012,"position":0},"title":"ABBA vs. Musikantenstadel: Das Publikum","author":"admin","date":"22. Januar 2011","format":false,"excerpt":"Moin, so, gestern Abend war ich bei \u2192 \u201eABBA The Show\u201c in Kempten. Vorab: Ich mag ABBA seit 1976 sehr und kenne auch so ziemlich alles von denen mehr als gut. Und ich fand die Show gestern Abend auch recht gut. Dennoch habe ich nach sechs Songs fluchtartig die Halle\u2026","rel":"","context":"In "2011"","block_context":{"text":"2011","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/backstage\/2011\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1007,"url":"http:\/\/www.rockpixx.com\/wordpress\/deppen-in-fotoforen\/","url_meta":{"origin":1012,"position":1},"title":"Deppen in Fotoforen","author":"admin","date":"24. September 2009","format":false,"excerpt":"Moin, ich habe neue Erkenntnisse gewonnen: 1. Beleuchter verdienen mehr Geld als Fotografen. 2. Meine Bilder sind gut. 3. Ich bin ein ****** und ein schlechter Vater. Wie es dazu gekommen ist? Nun, dank des modernen Lebenshilfe-Mediums (vulgo: \u201eFotoforum im www\u201c) bin ich wieder ein wenig schlauer. Doch der Reihe\u2026","rel":"","context":"In "2009"","block_context":{"text":"2009","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/backstage\/2009\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":958,"url":"http:\/\/www.rockpixx.com\/wordpress\/ein-paar-worte-zum-thema-catering\/","url_meta":{"origin":1012,"position":2},"title":"Ein paar Worte zum Thema \u201eCatering\u201c","author":"admin","date":"17. November 2007","format":false,"excerpt":"Oft habe ich bei Konzerten die M\u00f6glichkeit gehabt, nicht nur im Graben zu stehen, sondern konnte mich als Gast der jeweiligen Bands auch ungehindert hinter der B\u00fchne bewegen. Dieser bei vielen begehrte \u201eAccess all areas\u201c-Ausweis er\u00f6ffnet seinem Tr\u00e4ger dann eine v\u00f6llig andere Welt als die, welche der normale Konzertbesucher w\u00e4hrend\u2026","rel":"","context":"In "2007"","block_context":{"text":"2007","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/backstage\/2007\/"},"img":{"alt_text":"Catering","src":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2007\/11\/20091010-0002.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2007\/11\/20091010-0002.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2007\/11\/20091010-0002.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2007\/11\/20091010-0002.jpg?resize=700%2C400 2x"},"classes":[]},{"id":1033,"url":"http:\/\/www.rockpixx.com\/wordpress\/musiker-und-deren-wunsch-nach-bildern\/","url_meta":{"origin":1012,"position":3},"title":"Musiker und deren Wunsch nach Bildern","author":"admin","date":"4. Juli 2010","format":false,"excerpt":"Moin, in Nachbetrachtung der diesj\u00e4hrigen \u201eKieler Woche\u201c m\u00f6chte ich einmal ein paar Beispiele f\u00fcr die Vorbringung von Bilderw\u00fcnschen seitens einiger Bands \/ Musiker \/ Managements \/ Veranstalter vorstellen. Ich werde hier absichtlich keinerlei Namen nennen, einige Texte sprechen f\u00fcr sich\u2026 Beispiel-1: Hallo hallo!!! Super-Fotos habt ihr gemacht. Die gefallen uns\u2026","rel":"","context":"In "2010"","block_context":{"text":"2010","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/backstage\/2010\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5658,"url":"http:\/\/www.rockpixx.com\/wordpress\/demons-eye-27-06-2009-kiel-maxbuhne\/","url_meta":{"origin":1012,"position":4},"title":"Demon’s Eye, 27.06.2009, Kiel, MAXB\u00fchne","author":"Anja","date":"27. Juni 2009","format":false,"excerpt":"Und noch eine Wiederbegegnung im Abstand von 14 Tagen: Vor zwei Wochen in M\u00fchldorf die Tributeband \u2192\u00a0\u201eDeep Purple\u201c und heute Abend auf der \u201eMAXB\u00fchne\u201c das Original \u201eDemon\u2019s Eye\u201c (oder war das umgekehrt?) Faszinierend waren etliche Dinge \u2013 f\u00fcr mich allerdings das absolute \u201eKiller-Kriterium\u201c waren die Hammond und die Leslies. So\u2026","rel":"","context":"In "Acts"","block_context":{"text":"Acts","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/acts\/"},"img":{"alt_text":"Demon's Eye, 27.06.2009, Kiel, MAXB\u00fchne","src":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20090627-04-demons-eye-Artikel.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20090627-04-demons-eye-Artikel.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20090627-04-demons-eye-Artikel.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20090627-04-demons-eye-Artikel.jpg?resize=700%2C400 2x"},"classes":[]},{"id":7424,"url":"http:\/\/www.rockpixx.com\/wordpress\/boy-george-09-12-2010-munchen-olympiahalle\/","url_meta":{"origin":1012,"position":5},"title":"Boy George, 09.12.2010, M\u00fcnchen, Olympiahalle","author":"Anja","date":"9. Dezember 2010","format":false,"excerpt":"Bevor \u201eDo you really want to hurt me\u201c als zweiter Song unter dem gr\u00fcnen Hut hervor erklang, blieb f\u00fcr die Zuschauer erst einmal Zeit, kr\u00e4ftig Luft zu holen\u2026 Wer noch aus den Achtzigern des letzten Jahrhunderts ein Bild von Boy George und eine bestimmte Stimme in seinen Erinnerungen hatte, der\u2026","rel":"","context":"In "Acts"","block_context":{"text":"Acts","link":"http:\/\/www.rockpixx.com\/wordpress\/category\/acts\/"},"img":{"alt_text":"Boy George, 09.12.2010, M\u00fcnchen, Olympiahalle","src":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20101209-02-boy-george-Artikel.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20101209-02-boy-george-Artikel.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20101209-02-boy-george-Artikel.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.rockpixx.com\/wordpress\/wp-content\/uploads\/2013\/01\/20101209-02-boy-george-Artikel.jpg?resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"publishpress_future_action":{"enabled":false,"date":"2026-05-07 07:45:53","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/posts\/1012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":0,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/media\/9177"}],"wp:attachment":[{"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rockpixx.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}