Ninjimage

Schwarzgurt Bildmanagement

Ninja Shadowbox

Erstellt von: Uwe Walter

PHP Code Lizenz: GNU/GPL v2

JS Code Lizenz: GNU/GPL v2

CSS und Bilder: Copyright NinjaForge, 2008 - 2009

Herausgeber/Copyright: Ninja Media Group, © Uwe Walter - NinjaForge

Support: Falls Sie Support für diese Erweiterung benötigen, besuchen Sie bitte die NinjaForge Foren.

Sie mögen diese Erweiterung? Dann bewerten Sie sie bitte auf Joomla.org

Beschreibung:

Sie haben es satt, ständig an Ihrem Template herumdoktern zu müssen, nur weil es in eine andere Saison geht und Sie andere Bilder auf Ihrer Seite anzeigen lassen möchten? Sie haben ein neues Logo und wollen es mal eben schnell austauschen? Dann ist dieses Modul für Sie genau richtig!

Ninjimage ist eine Verschmelzung und Portierung der Joomla!™ 1.0.x Module Ezee Logo, Ezee Image und Ezee Dragger. Aber nicht nur das! Wir haben es um ein Feature erweitert, dass es Ihnen jetzt auch die Anzeige von beweglichen Modulen ermöglicht.

Sie können frei wählen, ob die Elemente absolut oder relativ positioniert werden. Sie können jedoch auch festlegen, ob Elemente auf der Seite fest verankert oder frei beweglich sein sollen.

Last but not least muss auch das verbesserte Stylingpotential Erwänung finden. Sie haben zum einen die Möglichkeit, Ihre Elemente individuell direkt über Ihre Teplate-Style zu formatieren, können das Styling jedoch auch Ninjimage überlassen. Setzen Sie Faben, Ränder oder Schriftgröß ganz nach Belieben.

Have a Lot of Fun.


Bedienungsanleitung

Basis Setup

  • Installieren Sie das Modul.
  • Wählen Sie den Anzeigemodus (Bild-Typ).
  • Wählen Sie zwischen Ninjimage oder individuellem Styling.
  • Setzen Sie je nach Typ (Bild/Modul/Styling) die erforderlichen Parameter.
  • Veröffentlichen Sie das Modul.

Tipps und fortgeschrittene Anwendung

Jeder Parameter bringt einen so genannten Tooltip in Form einer Sprechblase mit, der sichtbar wird sobald Sie mit der Maus über sein Label fahren. Sofern für Sie nicht sofort ersichtlich ist, was die jeweilige Option bewirkt, geben Ihnen diese Tooltips gute Hinweise.

Basic Image Parameters
Diese Einstellungen sind für die direkte HTML Erzeugung von Bildern vorgesehen und werden nur bei den Typen "Bild einfach" und "Bild beweglich" ausgewertet.

Sie bestimmen hierüber

  1. den Alternativ- und Titeltext des Bildes, welche sichtbar werden, wenn der Beuscher Ihrer Seite beispielsweise das Laden von Bildern ausgeschaltet hat, oder aber mit der Maus über das Bild fährt.
  2. die Breite und Höhe des Bildes. Diese Werte sollten unbedingt angegeben werden, weil es Browser gibt die ansonsten den nötigen Platz für das Bild nicht reservieren, wenn es aus irgend einem Grund nicht geladen wird. Dies kann unter Umständen zur Zerlegung des Layouts führen.
  3. den Speicherort des anzuzeigenden Bildes.
  4. ob Sie den PNG Fix verwenden möchten. Dies ist dann sinnvoll, wenn Sie PNG Grafiken mit transparenten Hintergründen oder verschiedenen Ebenen verwenden möchten. Der Internet Explorer vor der Version 7 kann mit dieen Formaten nicht umgehen und zeigt im schlimmsten Fall nur ein graues Bild an.
  5. ob Sie ein einfaches Bild oder einen Bilderlink anzeigen lassen möchten. "Default Homepage" wird beispielsweise verwendet, wenn Sie über das Modul Ihr Seiten-Logo anzeigen lassen möchten, das auf einer Webseite meist ganz oben auf der linken Seite platziert wird. Der Bilderlink verweit somit immer auf Ihre Startseite. Dies hat hat sich über die Jahre so eingebürgert, ist hinreichend bakannt und deshalb sollte mit Seiten Logos auch auch so verfahren werden.
  6. ob Sie die Seite, auf die ein Bildlink verweist, im selben Tab, bzw. Fenster anzeigen lassen möchten oder beim Klick lieber ein neues Fenster geöffnet werden soll.
Module Parameters
Diese Einstellungen sind für das Laden eines Modules vorgesehen und werden nur beim Typ "Modul beweglich" ausgewertet.

Wenn Sie von der Joomla!™ Menüführung aus zu den Modulen navigieren, dann bekommen Sie zunächst eine Liste aller vorhandenen Module in tabellarischer Form angezeigt. Auf dieser Seite finden Sie ganz rechts in der letzten Spalte eine numerische ID, die Sie in dem Feld "Modul Id" eintragen können.

Über diese Id weiß Ninjimage dann, welches Modul geladen werden soll.

Styling Parameters (system/custom)
Diese finden Sie in den erweiterten Parametern und werden für die CSS (Cascading Style Sheets) basierte Formatierung der Elemente verwendet. Ninjimage umschließt per Se ein Element mit einem DIV Continer, der dann an das Design Ihrer Seite angepasst werden kann.

Sie bestimmen hierüber

  1. ob Sie das CSS Styling individuell über die Stylesheet Definitionen Ihres Templates anpassen möchten. Geben Sie in dem Falle Ihre individuelle DIV Id an.
  2. ob Sie die Ninjimage Stylesheets laden wollen oder nicht.
  3. ob Sie das Bild oder Modul in einem verschachtelten DIV Container, mit zwei oder vier zusätzlichen Containern formatieren wollen.

    Dies wird in der Regel dann verwendet, wenn Ihr Layout abgerundete Ecken verwendet. Mit zwei weiteren Containern können Sie je ein Hintergrundbild für oben und unten verwenden, mit vier weiteren dann je ein eigenes Hintergrundbild für jede Ecke.
Ninjimage DIV Container
Diese Einstellungen sind für das CSS Styling durch Ninjimage selbst vorgesehen und werden nur dann ausgewertet, wenn das Laden von CSS nicht deaktiviert wurde.

Sie bestimmen hierüber

  1. ob Sie das Bild/Modul relativ oder absolut positionieren möchten.

    Bei relativer Positionierung wird das Element genau an der Modulposition angezeigt, der Ninjimage zugeordnet ist.

    Bei absoluter Positionierung kann das Element frei auf der Seite platziert werden. Es wird hierbei komplett aus dem Layout ausgehängt und hat auf andere Elemente der Seite keinen Einfluss mehr. Es kann dabei andere Elemente aber auch verdecken, sodass diese dann nicht gar nicht mehr oder nur noch zum Teil sichtbar sind.
  2. in welcher Ebene (z-index) Sie Ihr Bild/Modul anzeigen lassen möchten. Soll es andere Elemente überlagern oder eher verdeckt werden. Der Z Index wird nur dann ausgewertet, wenn das Element absolut positioniert wird.
  3. die Breite, bzw. Höhe des umschließenden DIV Containers.
  4. wie groß der Abstand (margin) zu anderen Elementen bei relativer, bzw. vom Rand bei absoluter Positionierung sein soll.

    Bei relativ positionierten Elementen wirken sich die Werte je nach Anwendung auch auf die anderen HTML Elemente aus.

    Bei absolut positionierten Elementen geben Sie hier die Position auf der Webseite an. In diesem Fall sollten Sie sich zwei nicht gegebüber liegende Bezugskanten aussuchen, von denen aus das Element dann positioniert wird.
  5. wie groß der Abstand zum Rand des umschließenden DIV Containers sein soll.
  6. ob der umschließende Container einen Rand haben soll und wenn ja, in welcher Farbe, Breite oder Stil.
Custom Header Parameters
Sie können innerhalb des umschließenden Containers auch eine zusätzliche Überschrift anzeigen lassen. Dies ist unabhängig davon, ob Sie ein individuelles CSS Styling verwenden oder nicht.

Sie bestimmen hierüber

  1. ob Sie eine Überschrift anzeigen lassen möchten und wenn ja, in welcher Größe.
  2. welcher Text als Überschrift ausgegeben weden soll.
  3. in welcher Farbe die Überschrift ausgegeben werden soll. Dieser Wert wird jedoch nur dann ausgewertet, wenn Sie das Laden der Ninjimage Stylesheets nicht deaktiviert haben.
JavaScript Parameters
Diese Einstellungen entscheiden darüber, ob Ninjimage selbst die nötigen Scripte für bewegliche Elemente bereitstellt oder nicht.

Wenn Sie beispielsweise nur ein verlinktes Logo auf Ihrer Seite ausgeben, dann brauchen Sie siese Skripte gar nicht.

Oder aber Sie haben Ihre eigenen Skripte und möchten deshalb darauf verzichten.

Sie bestimmen hierüber

  1. ob der jQuery Framework samt UI (Draggables) geladen werden soll.
  2. ob das Ninjimage Skript, über das die beweglichen Elemente gesteuert werden, geladen werden soll.

Fehlersuche FAQ

Mein Bild wird nicht angezeigt. Was kann ich tun?
Stellen Sie sicher, dass die Pfadangaben korrekt sind.

Wählen sie als Speicherort "Medienverzeichnis, wenn Sie das Bild über den Medien-Manager hochgeladen haben und "Templateverzeichnis" wenn das Bild Bestandteil Ihres aktuellen Templates ist. In diesen beiden Fällen müssen Sie im Feld "Pfad/Dateiname" eine relative Pfadangabe mit Dateinamen angeben.

Wenn Sie einen eigenen Ordner für die Bilder erstellt haben, dann wählen Sie als "Speicherort" bitte "Adere/URL" und geben dann im Feld "Pfad/Dateiname" den relativen Pfad zum Bild an, ausgehend vom Wurzelverzeichnis Ihrer Joomla!™ Installation. Wenn Sie das Bild von einer externen Quelle laden, den kompletten URL zum Bild (http://domain.tld/pfad/bild.png).
Mein Bilderlink soll das Ziel in einem neuen Fenster laden.
Hierfür wählen Sie bitte unter "Fenster" den Menüpunkt "Neues Fenster" Dadurch wird das Attribut target="_blank" gesetzt.
Mein Bild soll keine äßeren Einzüge haben.
Setzen Sie die Werte für die Einzüge in diesem Falle einfach auf Null. Dann werden sie nicht ausgewertet.
Die äußeren Einzüge funktionieren nicht. Was ist da los?
Die Einzüge (margin) wirken sich je nach gewählter Positionierungsart auf das Element verschieden aus.

Bei relativer Positionierung bleibt das Element im so genannten DOM Tree fest eingebunden und lässt sich über die Einzüge "verrücken" Dies kann unter Umständen Einfluss auf die umliegenden HTML Elemente haben.

Bei der absoluten Positionierung wirken die Einzüe als Abstand vom inneren Rand des Browserfensters aus. In diesem Falle wird das Element aus dem DOM Tree ausgehängt und hat mit der Seitenstruktur selbst nichts mehr zu tun. Bei dieser Positionierungsart müssen Sie sich zwei Bezugskanten aussuchen, von denen ausgehend das Element positioniert werden soll. Diese dürfen nicht gegenüber liegen! Die nicht benötigten Werte setzen Sie dann einfach auf Null, damit sie nicht ausgewertet werden.
Mein Modul wird nicht angezeigt. Was kann ich tun?
In der Übersicht der installierten Module (Erweiterungen >> Module) wird ganz rechts in der letzten Spalt eine ID angezeigt. Das ist die Zahl, die im Feld "Modul Id" eingetragen werden muss, damit Ninjimage es laden kann.
Mein Modul wird auf der Seite doppelt angezeigt.
Ninjimage lädt die Modulinformationen direkt aus der Datenbank. Es ist somit nicht erforderlich, dass das betreffende Modul aktiviert wird und sollte auch ausgeschaltet werden.
Man kann an der Überschrift vorbei schauen.
In der Grundeinstellung ist der Hintergrund des umschließenden Containers auf transparent gesetzt.

Wenn Sie dies nicht möchten, dann geben Sie bitte im Feld "Hintergrundfarbe" einen hexadezimal notierten RGB Wert, beginnend mit einer Raute ein. Auf NinjaForge finden Sie einen HTML/CSS Farbgenerator, mit dem Sie Ihre Hintergrundfarbe durch wenige Mausklicks zusammenstellen können.
Mein Bild/Modul lässt sich nicht bewegen.
Damit Bilder oder Module bewegt werden können ist es erforderlich, dass der jQuery Framework als auch das Ninjimage Skript geladen wird. Dies ist in der Grundeinstellung jedoch deaktiviert, weil es für feststehende Elemente nicht benötigt wird. Setzen Sie daher für bewegliche Elemente die Optionen der "JavaScript Parameters" in den erweiterten Parametern auf "laden".
Skripte sind geladen, mein Bild/Modul bewegt sich trotzdem nicht.
Bei der Verwendung verschiedener JavaScript Frameworks kann es mitunter zu Kompatibilitätsproblemen kommen.

Stellen Sie bitte sicher, dass dies nicht der Fall ist. Besuchen Sie auch unsere Foren, da in der Regel einer unserer Experten einen Blick auf die Installation werfen muss. Aus dem Stehgreif können bei Problemen dieser Art keine Tipps gegeben werden.
Opera und Internet Explorer machen Probleme beim Draggen.
Bewegliche Elemente sollten immer "absolut" positioniert werden.

Leider kommt es durch die verschiedene Auslegung der Webstandards durch die Sofwareentwickler bei solchen Details immer wieder zu Problemen. Die Firefox Entwickler beispielsweise halten sich an W3C Standards. Dies ist auch der Grund, warum es mit diesem Browser die wenigsten Probleme gibt.

Changelog & Versionsinfo

Version: 1.0.0

Datum: Januar 2009

Status: Erste Veröffentlichung

  • Fixiertes oder frei bewegliches Bild oder Logo
  • Frei bewegliches Modul
  • Bild statisch oder als URL mit Zielfensterebstimmung
  • jQuery Unterstützung (im Kompatibilitätsmodus)
  • jQuery UI Unterstützung (Draggables)
  • Modul durch eigenständige Instanzerkennung beliebig oft kopierbar.
  • Dynamische CSS Skript Erzeugung.
  • W3C konformer CSS und XHTML Quellcode
  • Erhältlich in den Sprachen Englisch, Deutsch

Besuchen Sie NinjaForge Ninjoomla is a JCDA Member Get Firefox for a better internet experience Ninjas use and recommend Firebug Valid XHTML Transitional Valid CSS Creative Commons License GNU/GPL v2