Help is on the way!

Image Wall

The JoomlaXTC Image Wall module is the easiest way to present attractive image galleries on your website: the animation effects, layout capabilities and the option of using your own custom designs provide incredible yet easy-to-use flexibility to showcase your images.

Installation

Install the module using the regular Joomla! extension installer.

Configuration

The module can be customized using the standard Joomla! Module Manager.

Parameters are divided in two main sections: The Module Parameters section defines what images will be shown and how they should be presented. The Advanced Parameters allows you to configure the special effects and animations, if any were used. These parameters won't affect the images but can affect their display form.

To access these parameters go to the module manager and select the Image Wall Module.

Module Parameters

Use these parameters to customize the standard presentation of the module

Advanced Parameters

These parameters control the behavior of special animation effects, please read the next section for more information about content effects and how to apply them.

Adding Tile and Description Text

Each photo can have a title and description displayed with the tags {title} and {description}. In order to create a title and description simply create a .txt file with the same name as the image with _title or _description after the photo file name such as: photo1_title.txt and photo1_description.txt and then upload these to your images gallery folder!

Special effects

Besides the page transition effects, you can also include additional effects that apply to the content of each item. By adding certain CSS tags to your HTML code and organizing the layout of content, these effects allow you to build fully customizable tooltips, pop-ups and slide effects. Since all the content data tags are available on these effects as well, you can elaborate the display of your content as much as you want!

Keep in mind however, that with great power comes great responsibility: the HTML of both zones is still part of the HTML code of your page; if your HTML/CSS code has a bug, it may affect how other parts of your site look and work.

Content effects are activated by the user's mouse pointer but with subtle differences. How you can implement each effect and how they are activated is explained below:

Tooltips

A Tooltip will appear automatically when the mouse pointer hovers over a specific "trigger zone", this example code explains better how to use the necessary tags:

<div class="jxtctooltip">
This is the tooltip trigger zone
    <div class="tip">
        This is the tooltip content
    </div>
</div>

Upon display, this code will show the "This is the tooltip trigger zone" legend by itself, but if you move the mouse pointer over it, a tooltip will come up displaying the "This is the tooltip content" legend. Each zone is wrapped within a tag, you must use the CSS tags "jxtctooltip" and "tip" as shown to make the effect work.

Pop-ups

A pop-up will appear when the user clicks on the "trigger zone", the Pop-up zone has its own Close and Drag buttons. This example code shows the necessary CSS tags in use:

<div class="popuphover">
This is the pop-up trigger zone
    <div class="pop">
        This is the pop-up content
    </div>
</div>

The trigger zone is made with the contents of the div with class "popuphover", and the pop-up content is hidden in the div with class "pop", it will be shown when the user clicks on the trigger zone.

Slides

Slides are useful to display content in different layers, for example imagine a picture with a footnote that expands to show a full description. Different than Tooltips or Pop-ups, Slides do not use a trigger zone, they react to mouse pointer over their own zones. This is an example code:

<div class="slidebox">
This is the content zone
    <div class="slidepanel">
        This is the slide content zone
    </div>
</div>

Again, the container zone inside the div with CSS class "slidebox" will be shown first, and the contents of the slide on div "slidepanel" will be shown when the mouse hovers its zone.

Hover

The Hover is useful when you want to focus on specific zone of the content, for example a "clickable" zone that looks similar to other content, an image or name that want to highlight. Similar to Slides, they react to mouse pointer over their own zones and does not need a trigger zone. This is an example code:

This is the content zone
<div class="js_hover">
    The content with highlight
</div>
This is the rest of content zone

Once the mouse is over the js_hover zone the color will change automatically. As you can see this is the easier effect but provide you the power to catch the attention of your visitors.

Styling

As previously explained, the content is rendered in a grid fashion with one or more rows and columns and one or more pages, each page represents a single grid. Each cell in a grid contains the template code for one item with the placeholder tags translated to their corresponding data element such as titles, descriptions, images, etc.

In order to ease the visual styling of the grids, there are certain common CSS classes added to the HTML code for your convenience. You can put hard-coded CSS styling in the XTS template fields directly, but you may find using your template's CSS file a better option.

If you can't or don't want to alter your main CSS file, you can put any CSS code needed in the module's own file: css/wall.css. This file is located inside the module folder.

This is a brief explanation on how the HTML and classes are applied:

Each page in the module output is made with an HTML tag; the first table has CSS class firstpage, any inner pages have class centerpage and the last page has class lastpage. If there is only one page then it has class singlepage.

Each row within a table also has similar classes added to it: firstrow for the top row in the table, centerrow for any middle rows and lastrow for the bottom row of content. In the event that only a single row is used, it will have class singlerow assigned to it. These clases are repeated for as many tables (pages) are in the module output.

Likewise, columns also have similar tags: the left-most column has firstcol, the right-most column has lastcol and any middle column has centercol. Single columns have, you guessed it, singlecol. These classes are also applied on all pages shown.

Buttons also have extra CSS classes: prevbutton and nextbutton apply to the tags for each page change button. Page number buttons have tags as well: firstbutton, middlebutton, lastbutton and centerbutton.

You can have a common set of CSS styling code for these tags in your template's CSS file to maintain a consistent appearance on any modules being shown, or you can use them in combination with the module CSS class parameter to define specific styling for a particular module.

With these many options, the styling possibilities are unlimited! You are in total control of how the content will be shown in your site, just let the module handle the content gathering for you.