21. Juli 2010 - 19:34
Wieder mal gibt es ein kleines Update auf redpanda.ch. Twitter ist in aller Munde und zu Twitter gibt es gefühlte 2 Millionen verschiedene Widgets welche man auf der eigenen...
12. Juli 2010 - 10:15
Entgegen meiner Annahme, dass das nächste Release von Drupal 7 bereits eine Beta Version ist, kam am Samstag die 6 Alpha Version von Drupal 7 zum vorschein. Die genauen...
9. Juli 2010 - 10:23
Beim heutige Thema zum Webmaster-Friday geht es darum, wann eigentlich die richtige Zeit zum Bloggen ist. Ein spannendes Thema und ich bin auf die vielen anderen Meinungen schon...

Lightbox & FCKEditor & IMCE

DruckversionSend to friendPDF Version

Nachdem ich mich heute mehrheitlich mit dem IMCE Modul beschäftigt habe, lies es mich nicht los und ich vertiefte mein Wissen noch ein wenig. Es ging darum, dass ich Bilder welche mit dem FCKEditor und dem IMCE Modul dem Blogeintrag hinzugefügt worden sind, mit einem Lightbox-Effekt verschönern wollte. Nach ein wenig Googlen musste ich feststellen, dass es noch nichts Out-Of-The-Box gibt. So musste ich mich wohl oder übel durch ein paar Foren hangeln bis ich zu einer Lösung kam. Dies möchte ich nun, für alle die es interessiert, niederschreiben wie einfach es eigentlich ist.

Lightbox2 Einstellungen:

  1. Öffne die Lightbox2 Konfiguration und wechsel zum Tab "Automatic image handling" (admin/settings/lightbox2/automatic)
  2. Öffne die "Custom class images"
    Lightbox Einstellung
    Im "Custom images trigger classes" kann nun eine eigene CSS-Klasse definiert werden. Achte darauf, dass du nur den Rich-Text-Editor eingeschaltet hast.
  3. Beim "Automatic handler..." Feld, kann jetzt noch ausgewählt werden, was passiert, wenn die Klasse verwendet wird.

FCKEditor Einstellungen:

  1. Im FCKEditor muss nun die Klasse verwendet werden. Dies kann auf zwei Arten geschehen. Entweder du gibts die Klasse jedesmal von Hand ein oder du automatisiert es.
    Manuelle Version:
    Wählt man ein Bild aus dem IMCE aus, muss man im Tab "Erweitert" das Feld "Stylesheet Klasse" mit der zuvor erstellen Klasse ausfüllen. In meinem Fall mit "myclass".
    Bild-Eigenschaften
    Möchte man diese Klasse nicht jedesmal von Hand ausfüllen, kann man eine Datei beim FCKEditor ein wenig modifizieren. Die Datei heisst: fck_image.html und liegt im Verzeichnis:  sites/all/modules/fckeditor/fckeditor/editor/dialog
    Finde dort die Stelle:
    <span fcklang="DlgGenClass">Stylesheet Classes</span><br />
    <input id="txtAttClasses" style="width: 100%" type="text" />

    und ersetzte diese mit
    <span fcklang="DlgGenClass">Stylesheet Classes</span><br />
    <input id="txtAttClasses" style="width: 100%" value="myclass" type="text" />

    Dies bewirkt, dass die Klasse "myclass" immer automatisch im oben erwähnten Feld steht.
  2. Nun einfach das Bild auswählen, die Klasse eintragen (oder ist schon eingetragen)
  3. Dieses ausgewählte Bild muss jetzt nur noch verlinkt werden. Wähle dazu das Symbol "Link einfügen/editieren" in der Menuleiste des FCKEditors aus und suche nun das Originalbild. Kurz: Verlinke das Thumbnail mit dem Originalbild.
  4. Jetzt nur noch den Eintrag/Node speichern und schon hat man einen tollen Lightbox-Effekt auf den Bildern

Ich finde dies eine tolle Variante, vorallem wenn man öfters Bilder via FCKEditor und IMCE in den Content einfügt. Dies vorallem, da die Thumbnail-Erstellung mit dem IMCE sehr einfach und schnell zu handhaben ist. Beim IMCE ist wichtig, dass dieser richtig konfiguriert ist und der User die nötigen Rechte wie zum Beispiel "Resize" hat. Dies sollte aber grundsätzlich kein Problem sein, da alles sehr gut beschrieben ist.
 

 

Your rating: Keine Average: 4.5 (2 votes)

Kommentare

BUEditor ???

hi
weißte zufällig auch ne lösung wie ich das mit dem BUeditor hinkriege?
ich machs eigentlich auch immer so das vorschaubild dann verlinkt ist und dann als neue seite in orginal größe geöffnet wird.
hab da leider noch keine möglichkeit gefunden das mit dem lightbox effekt hinzukriegen :(

lg willi

Manuell

Das müsstest du dann halt manuell im Quellcode machen.

<a title="Benachrichtung bei einem Kommentar" href="/sites/default/files/comments/subscribe1.jpg" rel="lightshow[myclass][Benachrichtung bei  einem Kommentar]" class="lightbox-processed">

         <img style="width: 250px; height: 104px; margin: 15px 5px; float: right;" src="/sites/default/files/comments/subscribe1_0.jpg" class="myclass" alt="Benachrichtung bei  einem Kommentar" title="Benachrichtung bei einem Kommentar">

</a>

Das sollte dann so machbar sein.

Viel Erfolg.
Gruss
RedPanda

Jup

jup, das hat gefunzt
THX :)

Danke;)

Ja denke diese Lösung trifft für den einen oder anderen zu, doch ist mir hier die sache noch zu umständlich das Vorschau und das zu Vergrößernde Bild seperat zu verlinken. Mal sehen ob ich das Automatisieren kann doch denke für deinen Beitrag ist mal ein danke drin

danke
Gruß aus NRW
Norman

Ebenfalls

Auch ich möchte mich bedanken, hat mir sehr bei einem Projekt weitergeholfen

Danke für deinen Kommentar.

Danke für deinen Kommentar. So etwas liest man immer gerne!

Gruss
RedPanda

Gerne ;-)

Hi Norman

Freut mich, wenn ich dir ein wenig helfen konnte, bzw. wenn es anstoss zu weiterer Entwicklung gegeben hat.

Solltest du eine schöne automatisierte Lösung finden, würde es mich sehr freuen, von dieser Lösung dann zu erfahren ;-).

Gruss
Michi

Danke für den Eintrag Michi.

Danke für den Eintrag Michi. So konnte ich nun einfach Bilder in mein Blog mit Lightbox Effekt einbinden. Zwar sieht das Lightbox Fenster noch komisch aus (liegt wohl am CSS), aber das kriege ich noch hin.

Bitteschön

War mit selbstverständlich ein Vergnügen...für dich sowieso lieber Weri!