Showcase PRO Manual

Showcase PRO Manual for Joomla 1.6, 1.7 and 2.5

The 40° Showcase extension (module) for Joomla!  1.6, 1.7 and 2.5 is a Mootools, JavaScript driven image slideshow and article showcase module that allows you to combine different transition types, use cool canvas transitions and present your website and services the best way possible.

So let's start with the setup procedure.
First install the component as usual from th Extension Manager in Joomla! and publish the module to your desired position.

Basic Setup

Let's start setting the module up by adjusting the basic options.
First are the global speed settings. You are abel to set a speed for the slides (duration for how many seconds they will stay) and the transition time in seconds. The default setting is 10 seconds and 2 seconds which means the slide will transition in for 2 seconds, stay for 10 seconds and transition out for 2 seconds.

Next are the Styles. Here you define the overall width and height of your Showcase, choose the style, enable or disable the title, description and navigation bar, set the opacity for the navigation bar and define the frame property for the showcase.
Opacity has to be a value between 0 and 1. With 0 meaning full transparent, 0.5 means half transparent, etc.
The frame value defines the spaces between the outer border fo the Showcase and the slide and navigation bar to be shown.
For our Demo we didn't want any frame so we set the value to 0.

Next is the z-index setting. you can adjust the base z-index to be used.

Last is the Background Image. You can select an image to be shown in the background of your Showcase.

Basic Article Setup

Now 10 article sections are available.
The start with the general options where the article is enabled or disabled.
Tthe speed defines the duration to show that particular article slide in seconds and overrides the global speed value set in the basic options if others than 0.
Then you can select an article to link to or choose to use a menu item.
Next is the select dialog for the image to be shown and the inputs for title and description.

Transition Setup

The next section within the article setup are the transitions, splitted in In Transitions and Out Transitions, giving you the possibility to use different transition types and settings for the start and end of each individual article slide in your showcase. The In and Out Transitions are basically the same, so this manual just explaines taking the In Transitions as an example.

There are six different transition types to choose from. Most are free to combine. The only limitations ar the combination of the canvas transititon types (grid and drawer) with the Zoom transition. Those you can't combine.

Each transition part starts with the Transition (sec) value which is an override for the global transition value, so you can define different transition durations for each transition. Just leave this at value 0 to use the global settings.

Fade
Fade is a simple but beautiful fade in and out transition. It has no parameters.

Slide
Slide is a transition that will slide in (or out) the image using 3 parameters. Slide option, slide transition and slide curve. the slide option defines the direction to be used from where to slide in (or to where to slide out). available ar left, right, top, bottom, left top, right top, left bottom, right bottom.
The transition is the variation of the sliding speed.
The curve animation to be used when sliding the image.
You can set up smooth slow slides, bouncing slides, vibrating slides .... give it a try and play with the settings. It's fun!

Rotate
Rotate is a transition that will rotate your image.
Available Parameters are the amount of rotations, the option (direction) and the rotation transition.
The rotation transition applies to each single rotation, meaning if you defined the amount of 2 rotations and set the transition to let's say sine ease in, it will be slow, get fast (end of 1st rotation), be slow, get fast (end of 2nd rotation)

Zoom
Zoom actually is a little bit more than a simple zoom - well, you don't expect something simple from forty degrees, do you?
First you define the transition the zoom should use. You can achieve some amazing effects using bounce or elastic.
Next are the settings for the source and destination values of each corner point of your image. This gives you the absolute freedom to do any zoom, scale and move you want to do with your image using negativ and positive values to go from small to big or big to small and so on.

Grid (Canvas)
The grid transition is a fantastic canvas effect that splits your image into several rectangles and builds them by zooming in each single rectangle in a selctable direction. It's important to mention you need to specify a working amount of rows and columns for this effect to work, so take care your width and height can be divided by your given amount of columns and rows giving an integer (full number) as a result. e.g. 45 or 52 as result is good, 65.7453 is wrong.
Parameters are easy, you simply set the amount of columns and rows and the direction the grid should be build.

Drawer (Canvas)
The Drawer effect is the second canvas transition we have.
It splits your image in stripes and draws them in using a selectable direction.
Equal to the Grid transition, the divider of height or width (depending on your settings) and the drawer width has to be a full number.
Parameters are just the width of each drawer slide and the direction to be used.


That's it.
The same applies to the Out Transitions and repeats for the next 9 article settings.
Boost your Joomla! Website with this amazing article showcase module!