negetics Horizon eyecandy for your website

  • No big Javascript Framework needed! It works without Mootools or jQuery.

  • Easy to set up! You can just build your Slides as normal Joomla Articles

  • Its a stunning Effect! Make your Site look great today.

  • Search Engine friendly! negetics "Horizon Slim" builds w3c conform HTML.

  • No Flash required! negetics "Horizon Slim" is coded with Javascript ont top of a HTML list structure

  • Negetics "Horizon Slim" add some Eye-Candy to your joomla site today!
    "Horizon Slim" is a simple to use but powerful Joomla Module. Can be used as Bannerslider - Image Slideshow - or even as a Menu

"Horizon Slim" Documentation

The documentation for negetics "Horizon Slim"

Configuration and Installation instructions to come!

Wat does it do exactly ?

"Horizon Slim" Is a Joomla Module so you can put it in at any Module position. It will pull Information out of an ordinary Joomla Article to be displayed inside an horizontal acordion style box as seen above in this page.

Basically it can be used in two ways:

  1. to slide some Images and display the alt text of them as a transparent div overlay
  2. or to display Images and HTML formatted text inside the description including Links and Videos.

With the second variation you can use negetics "Horizon Slim" as a "banner Slider", a menu, an advanced image Slideshow, as graphical enhanced Article teaser just to name a few of the possibilities.

Even negetics "Horizon Slim" works pretty stable keep in mind that it is still in the beta phase.
I will try to make upcoming updates as compatible as possible but can't gurantee that they will be 100% compatible!

How does it work ?

At first I have to warn you do not use a Wysiwyg Editor to edit Articles you want to use with "Horizon Slim"
Most of them will put container elements around your input. If you are using a Wysiwyg try to use the "edit source" function if avaiable.

negetics "Horizon Slim" will pull data out of an ordinary Joomla Article. You might want to create an extra section and categories to store your horizon data chunks.
"Horizon Slim" will parse either just for images or for divs containing one or two images and possible paragraphs.

Using "Horizon Slim" just with images

To do so just create an Article only containing some Images. like this:

  1. <img src="path/to/image.jpg" alt="text for the description box" />
  2. <img src="path/to/image.jpg" alt="text for the description box" />
  3. <img src="path/to/image.jpg" alt="text for the description box" />
  4. <img src="path/to/image.jpg" alt="text for the description box" />

create a new horizonSlim Module choose the Article and a module position to put it in. Set the parameters for horizonSlim as described further down in this Article and you are good to go.

Using "Horizon Slim" with Divs and custom HTML

To do this create an Article containing some HTML structure like this:

  1. // First open a div
  2. // mandatory !
  3. <div>
  4. // add the Background Image
  5. // mandatory !
  6.  <img src="path/to/background/image.jpg" />
  7. // add an additional Image to fade the background to
  8. // optional
  9.  <img src="path/to/fader/image.jpg" />
  10. // add a link  
  11. // this will make the hole Slide Link to the given URL
  12. // optional
  13. // add a paragraph containing your custom HTML code
  14. // optional
  15.  <p>
  16.  <h4>Custom HTML Code</h4>
  17.  <p>
  18.  you can put in here whatever you want ;)
  19.  </p>
  20.  </p>
  21. //    close the div
  22. </div>
  23. // then add some more divs
  24. <div>
  25.  <img src="path/to/background/image.jpg" />
  26.  <img src="path/to/fader/image.jpg" />
  27.  <p>
  28.  <h4>More Custom HTML Code</h4>
  29.  <p>
  30.  you can still put in here whatever you want ;)
  31.  </p>
  32.  </p>
  33. </div>
  34. <div>
  35.  <img src="path/to/background/image.jpg" />
  36.  <img src="path/to/fader/image.jpg" />
  37.  <p>
  38.  <h4>Even More Custom HTML Code</h4>
  39.  <p>
  40.  and still you can here whatever you want ;)
  41.  </p>
  42.  </p>
  43. </div>

then create a new horizonSlim Module choose the Article and a module position to put it in. Set the parameters for horizonSlim as described further down in this Article and you will have some nice Eye-catcher for your site.

"Horizon Slim" Module Parameters

"Horizon Slim" has the following module parameters:

Basic Parameters

Article ID
The ID of the Article to parse MANDATORY

Total height
The total height of the horizon block MANDATORY

Maximum Opacity
Maximum Opacity for the overlay of non active list items

Class Name
Class Name to override the lists styles - I prefer that to using the Class Name

Width of the expanded Slide
Width of the expanded Horizon Slide - needs to be smaller than the total width the Horizon Block is allowed to occupy MANDATORY

Description div parameters

Width
The Width of the Div containing the Description.

Height
The Height of the Div containing the Description.

Slides in from
The Side the div containing the description shall slide in from
Bottom/Top/Right/Left

Maximum Opacity
Maximum Opacity of the Description Layer

  Slider settings

Start Slide
The number of the first Slide to be active. Enter 'null' if you do not want a Slide to be active from the beginning. Starts counting with 1.

Hover Effect
Expand slides on mouse hover
No/Yes

Click Effect
Change active Slide on click
Yes/No

Slide Direction
The Slide direction
Right/Left

Equally sized Slides
Collapsed Slides will have equal width
No/Yes

Force Collapse
Force collapse of slides on mouse out
No/Yes

Slideshow Parameters

Auto Play
Should there be a Slideshow
No/Yes

Auto Play Speed
Auto Play Speed in milliseconds

Click stops Autoplay
Should a Click stop the Auto Play
No/Yes

Very Advanced Parameters Use only if you know what you are doing

Total Width
Total width of the horizon Block. Only needed when the block needs to be more narrow than the parent HTML Element!

Description Div Slide Speed
Description Div Slide Speed

Fade Speed
Fade Speed for the opacity Effect

Timeout Speed
Timeout Speed in milliseconds

Slide Speed
Slide Speed 1 is the fastest

Module Class Suffix

Module Class Suffix
A suffix to be applied to the CSS class of the Module. This allows for individual Module styling.

About the generated HTML Code

negetics "Horizon Slim" will produce HTML code in the following structure:

  1. <ul     id="sm67" 
  2.  class="negeticsHorizon" 
  3.  style="height:200px; width:980px;">
  4.  <li>
  5.  <div class="container first" style="height:350px; width:392px;">
  6.  <div     class="image" 
  7.  style="    background:url(/path/to/image.jpg); 
  8.  height:350px; 
  9.  width:392px;"></div>
  10.  <div     class="imageB" 
  11.  style=" background:url(/path/to/image.jpg); 
  12.  height:350px; 
  13.  width:980px;"></div>
  14.  <div style="width:392px; height:350px;" class="beschreibung">
  15.  <div class="negBeBa"></div>
  16.  <div class="negBeTe">
  17.  Your custom html code
  18.  </div>
  19.  </div>
  20.  <div style="width:392px; height:350px;" class="fade"></div>
  21.  </div>
  22.  </li>
  23.  <li>
  24.  .
  25.  .
  26.  .
  27.  </li>
  28.  .
  29.  .
  30.  .
  31. </ul>

Here is a scheme of the nested structure:

+-ul*1--class=negeticsHorizon--------------------------------------------+
|                                                                        |
| +li-+ +li-+ +li*2----------------------------------------------+ +li-+ |
| |   | |   | |                                                  | |   | |
| |   | |   | | +div*3-class=container-------------------------+ | |   | |
| |   | |   | | |                                              | | |   | |
| |   | |   | | | +div*4-class=image-------------------------+ | | |   | |
| |   | |   | | | |Background Image                          | | | |   | |
| |   | |   | | | +------------------------------------------+ | | |   | |
| |   | |   | | |                                              | | |   | |
| |   | |   | | | +div*5--class=image------------------------+ | | |   | |
| |   | |   | | | |Background Image                          | | | |   | |
| |   | |   | | | +------------------------------------------+ | | |   | |
| |   | |   | | |                                              | | |   | |
| |   | |   | | | +div*6--class=beschreibung-----------------+ | | |   | |
| |   | |   | | | |                                          | | | |   | |
| |   | |   | | | | +div*6--class=negBeBa------------------+ | | | |   | |
| |   | |   | | | | |                                      | | | | |   | |
| |   | |   | | | | +--------------------------------------+ | | | |   | |
| |   | |   | | | |                                          | | | |   | |
| |   | |   | | | | +div*6--class=negBeTe------------------+ | | | |   | |
| |   | |   | | | | |                                      | | | | |   | |
| |   | |   | | | | | DESCRIPTION TEXT/HTML                | | | | |   | |
| |   | |   | | | | |                                      | | | | |   | |
| |   | |   | | | | +--------------------------------------+ | | | |   | |
| |   | |   | | | |                                          | | | |   | |
| |   | |   | | | +------------------------------------------+ | | |   | |
| |   | |   | | |                                              | | |   | |
| |   | |   | | | +div*7--class=fade-------------------------+ | | |   | |
| |   | |   | | | |                                          | | | |   | |
| |   | |   | | | +------------------------------------------+ | | |   | |
| |   | |   | | +----------------------------------------------+ | |   | |
| |   | |   | |                                                  | |   | |
| +---+ +---+ +--------------------------------------------------+ +---+ |
|                                                                        |
+------------------------------------------------------------------------+

to get more detailed Examples on how to use negetics "Horizon Slim" take a look at the Demos

back to negetics "Horizon Slim"

We have 14 guests and 7 members online