Forgot?

NinjImage

Ninjimage is a merge and convert of the Joomla! 1.0.x modules Ezee Logo, Ezee Image and Ezee Dragger. But not only this! We improved it by a feature that enables you to display draggable modules on your site.

You can freely choose, whether the elements are positioned absolute or relative. But you can also configure, whether your elements are fixed on the page or free movable.

And last but not least, we have to mention the improved styling potential! On the one hand you have the possibility to individually style the elements by your template's CSS styling, but on the other hand you're also able to let Ninjimage do the job. Configure colors, borders or font sizes just as you need.

Documentation

Basc Setup

  • Install the module.
  • Select the display type (Image Type).
  • Choose between Ninjimage or individual styling.
  • Set the necessary parameters according to the display type
    (image/module/styling).
  • Publish the module.

Tips and Advanced Usage

Any parameter comes with a so called tooltip, visible as a speech bubble as you hover its label with your mouse. Unless the effect of a particular parameter is obvious, the tooltips can give good hints.

Basic Image Parameters
These settings are designed for the HTML code creation of images and are only evaluated if the Image Type is set to "Basic Image" or "Draggable Image".

Configure in this section

  1. the alternate and title text of the image that wil be visible to your visitors that for instance have disabled the loading of images or do hover the image with their mouse.
  2. the width and height of the image. These values should urgently be set, because there are web browsers that don't allocate space if the image could not be loaded for any reason. Under certain circumstances this could result in trashing your design.
  3. the File Location Relation, respectively File Name and Details, that determines where to search the image.
  4. if you wish to use the PNG fix for IE. This might be useful when you want do display an image of the PNG format that contains layers or transparency. Internet Explorer prior to version 7 can't handle this format and for the worst case does only display a grey square.
  5. if you want to display a static image or an image link. "Default Homepage" for instance is used to link a site logo to your home page, which usually is displayed at the top left of a web site. This behavior had become well known over the years, hence it is recommended for a good site accessibility.
  6. if a link click should open a new window/tab or not.


Module Parameters
These settings are designed for the loading of a module and are only evaluated when the Image Type is set to "Draggable Module".

When you navigate from the Joomla! admin menu to your modules, then the first view is a tabullary listing of your installed modules. At this page, the last colum on the right side shows a numerical ID. This is the number you have to enter into the field "Module ID".

Over this ID Ninjimage determines, which data to load.

Styling Parameters (system/custom)
You will find them at the "Advanced Parameters" and they are used for the CSS (Cascading Style Sheets) based formatting of your elements. Ninjimage encloses elements by default with a so called DIV container that can be customized to fit the design of your site.

Configure in this section

  1. if you wish to do the CSS Styling individually over your template's stylesheet definitions. In this case, please enter your Custom DIV Id.
  2. whether you want to load the Ninjimage stylesheets or not.
  3. if you want the image or module to style in a nested DIV container with two or four additional containers.

    This is usually a technique for styling an element with rounded corners. With two more containers you can display background images, one per DIV (top/bottom). With four more containers you can also dispaly background images, one per container, respectively corner.


Ninjimage DIV Container
These settings are designed for the CSS Styling through Ninjimage itself and are only evaluated, if Ninjimage should include the CSS stylesheet definitions.

Configure in this section

  1. if you wish to position your image/module absolute or relative.

    With relative positioning your element is displayed exactly at the module position that is assigned to Ninjimage.

    With absolute positioning your element is completely undocked from the DOM tree, hence it has no more effect on other elements and can freely be placed on the page. But it is also possible that it does overlay other elements, which then get fully or partially invisible.
  2. on which level, respectively layer (z-index) you want to display your image/module. Shall it overlay other elements or be overlayd by others. The Z Index is only evaluated, if the element is positioned absolute.
  3. the width and height of the enclosing DIV container.
  4. the distance (margin) to other elements on relative positioning, respectively to the border of the browser window on absolute positioning.

    With relative positioning, the entered values define the distance to surrounding elements and can perhaps affect their position.

    With absolute positioning, the entered values define the elements position on the page. In this case you should not set opposed values! Choose two not opposed reference edges to position the element.
  5. the distance of your image/module to the border of the enclosing DIV container, the so called padding.
  6. if the enclosing container should have a visible border or not. If so, then configure its color, width or style too.


Custom Header Parameters
You can also display an additional header within the enclosing DIV container. This setting is not dependend on the styling parameters.

Configure in this section

  1. whether you want to display an additional header or not and if so, configure its size.
  2. the header text that should be displayed.
  3. of which color the header should be. This value is only evaluated, if the Ninjimage CSS is included.


JavaScript Parameters
These settings define, if Ninjimage itself loads the necessary scripts for handling draggable elements.

When you, for instance do only display a logo on your site, you have no need for these scripts.

Another reason could be, that you load your own scripts, that can handle the draggables.

Configure in this section

  1. whether the jQuery framework and UI (Draggables) should be loaded or not.
  2. whether the Ninjimage script that handles the draggables should be loaded or not.


Changelog

Version: 1.0.0 Date: January 2009 State: Initial Release

  • Fixated or free movable image / logo
  • Free movable module
  • Static image or image link with target window configuration
  • jQuery support (compatibility mode)
  • jQuery UI support (Draggables)
  • Any number of module copies through an automated instance detection.
  • Dynamic CSS script creation.
  • W3C compliant CSS and XHTML source code
  • Available languages English, German

Frequently Asked Questions

My image is not displaying. What can I do?

Please ensure that you have configured valid path and image information.
Select as File Location Relation "Images Directory", if you uploaded your image via the Media Manager and "Template Directory" when the image is part of your default template. In these two cases you have to enter a relative path/image-name.png value at the File Name and Details field.

When you've created another folder for your images, then please select "Other/URL" and enter a relative path/image.png at the File Name and Details field, starting at the root of your Joomla! installation. And when you want to load the image from an external source, please enter the complete URL (http://example.com/path/image.png).

My image link should open a new window/tab.

Please select "New Window" as URL target. Thus an target="_blank" attribute will be set.

My image should not have any margins.

Please set the margin values to zero. In this case they are not evaluated.

The margins do not have any effect. What's up there?

The margins do affect elements according to their positioning type. With relative positioning the element will be left docked to the so called DOM tree and can be displaced by the margins. Under certain circumstances this can affect surrounding HTML elements.

With absolute positioning the element will be undocked from the DOM tree and the margins are distances to the border of the browser window. With this positioning type you have to choose two reference edges from where your image/module is positioned. They must not be opposed! The two unneeded values you can simply set to zero for not being evaluated.

My module is not displayed, What can I do?

At the overview of your installed modules (Extensions > Module Manager) you can see a tabular list. The last column on the right side shows the numerical ID of your modules. This number you have to enter at the field "Module ID", so that Ninjimage is able to load it.

My module is double displayed on the page.

Ninjimage loads the module information directly from the database. Hence it is not necessary to activate the related module and should be left deactivated.

I can look through the header.

By default the background color of the enclosing container is set to transparent. If you don't like that, please enter a hexadecimal RGB value started by a hash mark in the field "Background Color".

My draggable image/module is not movable.

In order to move elements on a web page it is necessary to load the jQuery framework and the NinjImage script. However this is disabled by default, because for fixed elements there is no need to load them. Simply select "Include" at the JavaScript Parameters for both, the framework and the Ninjimage script.

Scripts are loaded, anyhow my image/module is not draggable.

There are known incompatibilities between different JavaScript frameworks. Please ensure that this is not the case or visit our forums, because one of our experts will have to throw an eye onto your page. It's very difficult to give tips for this kind of problems without knowing the environment.

I have dragging problems with Opera and Internet Explorer.

Draggable elements should be whenever possible positioned absolute. Unfortunately the software developer's different interpretation of well known web standards are causing problems again and again. The Firefox developers for instance follow W3C standards and even this is the reason, why this browser has the smallest potential for unpredictable errors.

Home Extensions NinjImage