{"id":322,"date":"2011-04-24T21:17:26","date_gmt":"2011-04-24T21:17:26","guid":{"rendered":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=322"},"modified":"2012-01-19T22:20:30","modified_gmt":"2012-01-19T22:20:30","slug":"lightbox-in-atahualpa-integrieren","status":"publish","type":"post","link":"https:\/\/blog.ecotronics.ch\/wordpress\/?p=322","title":{"rendered":"Lightbox in Atahualpa integrieren"},"content":{"rendered":"

Den halben Ostersonntag habe ich nun verbraten, um eine sch\u00f6ne Bildanzeige mit Vorschaubild und gr\u00f6sserer Version in WordPress einzubinden, so wie man es in den Bildergalerien <\/strong>im Web \u00fcberall sieht. Den ersten Versuch startete ich mit dem Plugin A Gallery. Das Ergebnis war, dass gleich alle meine Seite zuoberst eine h\u00e4ssliche Fehlermeldung schmiessen. Nun habe ich es endlich geschafft, allerdings nicht mit einem Plugin, sondern zu Fuss, d.h. mit manueller Einbindung von JQuery Lightbox<\/strong>. Ein Stolperstein dabei war, dass Lightbox in das Theme Atahualpa <\/strong>integriert werden sollte.<\/p>\n

Vorgehen<\/h2>\n
    \n
  1. Die gew\u00fcnschten Bilder lokal vorbereiten<\/strong>, d.h. je eine kleine und eine grosse Version im Format jpg oder png<\/strong> erstellen<\/li>\n
  2. Die gr\u00f6ssere Bildversion f\u00fcr alle Bilder via Mediathek hochladen<\/strong> und sich dabei die Bildnummer merken<\/strong><\/li>\n
  3. JQuery Lightbox herunterladen<\/strong> und auf der lokalen Festplatte entzippen
    \nhttps:\/\/github.com\/balupton\/jquery-lightbox\/downloads<\/a>
    \nBei mir war das die Dateiv1.4.9-final.zip<\/li>\n
  4. Den gesamten entpackten Ordner<\/strong> – bei mir heisst er jquerylightbox – mit FTP auf den Webserver hochladen<\/strong> und zwar als Unterverzeichnis von \/httpdocs\/wordpress\/wp-includes\/js\/<\/li>\n
  5. In den Optionen von Atahualpa<\/strong> die folgende Einstellung suchen: Atahualpa Theme Options – Various Content Items: Add HTML\/CSS Inserts – HTML Inserts: Header<\/strong>
    \nDen folgenden Code in das Eingabefeld eingeben (nat\u00fcrlich mit der eigenen URL)
    \n<script type=”text\/javascript”
    \nsrc=”http:\/\/www.meinsite.ch\/wordpress\/wp-includes\/js\/jquerylightbox\/scripts\/jquery.lightbox.js”>
    \n<\/script><\/li>\n
  6. Im Artikel an die Stelle gehen, wo das Bild eingef\u00fcgt werden soll. Zuoberst in der Werkzeugliste auf Einf\u00fcgen Bild klicken. Auf der lokalen Festplatte die kleine Bildversion suchen und einf\u00fcgen<\/strong>. Lassen Sie das Bild in der Originalgr\u00f6sse. Im Url setzen Sie bereits die Nummer der zugeh\u00f6rigen grossen Bildversion<\/strong> ein.<\/li>\n
  7. Gehen Sie in die HTML-Ansicht<\/strong> des Artikels, suchen Sie den soeben eingef\u00fcgten Link und erg\u00e4nzen Sie das A-Tag mit folgendem lightbox-spezifischen Code
    \n<a rel=”lightbox” title=”Mein titel”<\/strong> href=…<\/li>\n<\/ol>\n

    Ein gutes Tutorial findet man \u00fcbrigens hier: http:\/\/balupton.com\/sandbox\/jquery-lightbox\/demo\/<\/a><\/p>\n

    Demo<\/h2>\n

    Hier sehen Sie eine Demo von Lightbox<\/p>\n

    \"\"<\/a>

    Klatschmohn - Papaver rhoeas<\/p><\/div>\n

     <\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Den halben Ostersonntag habe ich nun verbraten, um eine sch\u00f6ne Bildanzeige mit Vorschaubild und gr\u00f6sserer Version in WordPress einzubinden, so wie man es in den Bildergalerien im Web \u00fcberall sieht. Den ersten Versuch startete ich mit dem Plugin A Gallery. Das Ergebnis war, dass gleich alle meine Seite zuoberst eine h\u00e4ssliche Fehlermeldung schmiessen. Nun habe […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[35,3,7],"tags":[56,75,76],"_links":{"self":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/322"}],"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=322"}],"version-history":[{"count":15,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}