JoomlaXTC Splash Panel V3.0
The JoomlaXTC Splash Panel is a versatile module for displaying Front Page Presentations, Company Location Maps, Stunning Product Displays, Tooltips, Panoramic Displays, Slideshow, 3 Dimensional Showcases and just about anything you can dream up. Using unlimited layers of Images, Html and FX, the limits of use are really all up to your imagination!
Uploading the package element:
The Splash Panel is a Joomla 1.5 module and is installed like all Joomla Modules via the Extensions Install area of your Joomla Administrator.
You will also need to create an image folder for your image elements in the main images/ folder of your joomla install. This folder should be named splashassets for the module to read your files.
How it works:
The splash panel is based on 5 base elements:
Background
3-Background Elements
Title Element
52 Image Elements + Html + Audio + Tooltip + Pop Up effects
Foreground Image
You can layer these positions with css based z-index settings for eye catching showcases and add audio clips + Pop Up or Tool Tip Effects to each Element. Each Tool Tip/Pop Up can have it's own custom background or you can use the Tool Tip Effect as a Hover Image without any text or description. The Effects can layered in-between the Elements allowing for 3 levels of display for each element to give your presentation a 3D look and feel.
The Elements:
The Background can display a image of your choice jpg, png, gif. (Optional)
The 3 Background Images use javascript effects for smooth fades, horizontal slides, vertical slides, or panoramic image to add motion to your background.
The Title Element can be used as a title or as another element position.
Elements 1-52 can display any type of image or HTML or both with the HTML layer ontop of the image. A Mp3 clip can be assigned to each element and can be set to play a clip or the whole mp3 on mouse over. Each element can be linked to sub pages and has options for Tool Tip and Pop Up Effects .
The Foreground Image can be used as a screen to cover parts of your design for animation effects and much more.
Here is a quick example of the layers from our Dub Template:
Background Image with Balloon and Panorama Setting to give the Balloon Motion
Background Image and Title Element
Background Image, Title Element, and 9 Image Elements
The Completed panel
Background Image, Title Element, 9 Image Elements, and Foreground
Configuring the Module:
Module
Parameters:
Module Width: The Width of the Panel Display in the module position
Module Height: The Height of the Panel Display in the module position
Background image: Main Background image width and height assigned by the module width and height
Global
Parameters:
Tooltip and Pop
Up Settings
Parameters:
In Opacity: The Opacity of the Tips On (use 0 to 0.9 for opacity settings)
Out Opacity: The Opacity of the Tips Off (use 0 to 0.9 for opacity settings)
In Animation Vertical: Vertical Tip Animation on fade in (use -1 for 1px up and 1 for 1px down)
Out Animation Vertical: Vertical Tip Animation on fade out (use -1 for 1px up and 1 for 1px down)
In Animation Horizontal: Horizontal Tip Animation (use -1 for 1px left and 1 for 1px right)
Out Animation Horizontal: Horizontal Tip Animation (use -1 for 1px left and 1 for 1px right)
In Duration: Duration of Opacity once Tip is fully loaded
Out Duration: Duration of Opacity once Tip is fully loaded
Fade In Opacity: The fade in effect for the tips fx (use 0 to 0.9 for opacity settings)
Fade Out Opacity: The fade out effect for the tips fx (use 0 to 0.9 for opacity settings)
Tip Pause: The time for the tip to pause before fade out (in milliseconds)
Tooltip Animation Mode: Quadratic, Linear, Cubicular, Quartetic, Quintic, Expoential, Circular, Sineousidal, Back then Forth, Bounce, Elastic Curve
Tooltip Ease Mode: Ease In, Ease Out, Ease In Ease Out
FLV Player
Parameters:
FLV Player: On or Off
FLV Width: Overall width for the player
FLV Height: Overall Height for the player
FLV X Position: Horizontal Position of player
FLV Y Position: The Vertical Position of player
FLV Z Index: Layer to display the Player on (0-1000000000......)
FLV Autoplay: On or Off
FLV Autoloop: On or Off
FLV Aspect Ratio:On or Off
FLV Seek: Show seekbar On or Off
FLV Show Controls: On or Off
FLV Watermark: Show watermark On or Off
Watermark Url:
Start Image: Start Image
FLV Video File: FLV File to play from your images/splashassets folder
Audio Player
Parameters:
MP3 Player: On or Off
Width: Overall width for the player
Height: Overall Height for the player
MP3 Player X Position: Horizontal Position of player
MP3 Player Y Position: The Vertical Position of player
MP3 Z Index: Layer to display the Player (0-1000000000......)
MP3 Track: MP3 to player from your images/splashassets folder
Skin: Mp3 skin file from your images/splashassets folder
Volume:Default Volume Level (Settings 1-100)
MP3 Autoplay: On or Off
MP3 Autoloop: On or Off
MP3 Show Stop Button: On or Off
MP3 Show Info Button: On or Off
MP3 Show Volume Button: On or Off
MP3 Show Progress Bar: On or Off
MP3 Show Loading Mode: Always, Autohide, Never
Loading Color: Loading Color
Background Color 1: Background Color 1
Background Color 2: Background Color 2
Button Color: Button Color
Button Hover Color: Button Hover Color
Progress Bar Color 1: Progress Bar Color 1
Progress Bar Color 2: Progress Bar Color 2
Progress Bar Hover Color: Progress Bar Hover Color
Text Color: Text Color
Background Color: Text Color
Progress Bar Width: Width of the Progress Bar
Progress Bar Height:Height of the Progress Bar
Volume Width: Width of the Volume Bar
Volume Height: Height of the Volume Bar
Bytes Limit: Limit of bytes per mp3
Background
Layers
Parameters:
BACKGROUNDS ONE-THREE
Background Width: Width of the background
Background Height: Height of the background
Background X position: Horizontal Position of Background
Background Y Position: Vertical Position of Background
Background Z-Index: Layer to display the background on (use 0-1000000000....)
Background Effect: Disabled (Disables background element), Automatic Panoramic, Hover Panoramic (Moves on Mouse Hover), Slider Horizontal, Slider Vertical, Smooth Fade.
Animation Mode: Quadratic, Linear, Cubicular, Quartetic, Quintic, Expoential, Circular, Sineousidal, Back then Forth, Bounce, Elastic Curve
Ease Mode: Ease In, Ease Out, Ease In Ease Out
Effect Duration: Duration for Slideshow use
Effect Speed: Speed of Slideshow
Effect Orientation: Panoramic effect settings : Right to Left, Left To Right, Top To Bottom, Bottom To Top, Sine, Quad
Effect Starting X:Starting Horizontal Position in Pixels
Effect Starting Y: Starting Vertical Position in Pixels
Background Images
XPS:
In order to show images in the background elements you must add each image to the XTC Playlist System in the following format. Each image goes on its' own line with a line break for the new background layer.
Example:
background1 image
background1 image2
background1 image3
backround2 image
background2 image2
background2 image3
backround3 image
background3 image2
background3 image3
In this example each background element has 3 images to show in a slideshow fashion.
Realworld Example:
myimage1.gif
myimage2.gif
myimage3.gif
2myimage1.gif
2myimage2.gif
2myimage3.gif
3myimage1.gif
3myimage2.gif
3myimage3.gif
Foreground Element:
Foreground Image: The image selection from your images/splashassets folder
Image Width: Width of the element
Image Height: Height of the element
X Position: The Horizontal Position for the image
Y Position: The Vertical Position for the image
Elements:
Element X: Turn Element On or Off
Element Image: The image selection from your images/splashassets folder
Element Width: The Width
Element Height: The Height
Element X Position: Horizontal Position of title
Element Y Position: The Vertical Position of title
Element Z-Index:
Element Link: Weblink for image
Element Audio: Mp3 Hover Audio from your images/splashassets folder
Audio Play: Continuous (Plays Whole Clip) On Exit Stop (Only Play When Mouse is in Hover)
Element Template: HTML for element - Use this area with the Element Image to place text ontop of the image or without for your own custom layout in HTML and CSS with Joomla Content Plugin support
Element FX Style: Popup, Tips, or none
Element FX Image: The background Image for the Tips and Pop Up Effect
FX Width: The Width of the FX Image
FX Height: The Height of the FX Image
FX X Position: The Horizontal Position of the FX Image
FX Y Position: The Vertical Position of the FX Image
FX Effect Z Level: Layer to display the Effect on (use 0-1000000000....)
In Opacity: The Opacity of the Tips On (use 0 to 0.9 for opacity settings)
Out Opacity: The Opacity of the Tips Off (use 0 to 0.9 for opacity settings)
In Animation Vertical: Vertical Tip Animation on fade in (Use -1 for 1px up and 1 for 1px down)
Out Animation Vertical: Vertical Tip Animation on fade out (Use -1 for 1px up and 1 for 1px down)
In Animation Horizontal: Horizontal Tip Animation (Use -1 for 1px left and 1 for 1px right)
Out Animation Horizontal: Horizontal Tip Animation (Use -1 for 1px left and 1 for 1px right)
Effect Animation Vertical: Vertical Tip Animation (Use -1 for 1px up and 1for 1px down)
In Duration: Duration of Opacity once Tip is fully loaded
Out Duration: Duration of Opacity once Tip is fully loaded
Fade In Opacity: The fade in effect for the tips fx (use 0 to 0.9 for opacity settings)
Fade Out Opacity: The fade out effect for the tips fx (use 0 to 0.9 for opacity settings)
Pause: The time for the tip to pause before fade out (in milliseconds)
Tooltip Animation Mode: Quadratic, Linear, Cubicular, Quartetic, Quintic, Expoential, Circular, Sineousidal, Back then Forth, Bounce, Elastic Curve
Tooltip Ease Mode: Ease In, Ease Out, Ease In Ease Out
ToolTip Template: Contents of the Tip - HTML/CSS with Joomla Plugin support
PopUp Template: Contents of the Tip - HTML/CSS with Joomla Plugin support
Notes:
If you are using the latest version of Splash Panel and the Configuration is not saving this could be due to your servers RAM. Please check with your hosting company about this.
If you can not up your RAM on your server, you can resolve this issue by removing some of the element params in the template XML. There are currently 52 element positions in the Splash Panel - Removing some of them will help.
Make a backup of your mod_jxtc_splash.xml file first next open it
On or around line 732 of the mod_jxtc_splash.xml find
<param name="@spacer" type="spacer" default="Position Twenty" label="" description="" />
starting there remove everything until
<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="PARAMMODULECLASSSUFFIX" />
This will limit you to 19 elements but should solve the issue. We are working on a advanced component / module version of Splash Panel that will make it compatible with all severs and hosting and make it much easier to edit.
