Documentation | RSFlashMatic Joomla Extension

RSFlashMatic is a Joomla Module works natively in Joomla 1.5.x and Joomla 1.6.x environment. This is a Joomla extension specially developed for Joomla version 1.5.x and 1.6.x. This is a highly customizable XML Image Rotator with more than 35 XML options, including the masking size and speed. You can control the position of the elements on the screen, the number of images, as well as the colors – all from XML. You can use this module in any size you need. This is a free extension. The features are:

• Customizable width and height of the slideshow.
• Customizable background color, position, size and transparency of the Navigation/Controller Bar. You can also able to customize the background color and transparency for each and individual images based on the image color theme.
• Customizable Play, Pause, Previous and Next buttons.
• Customizable Slide Duration and Transition time.
• Customizable Image Link, Image Title and Image Caption/Description.
• Slideshow can display all images from a folder. Or if you wish you can able to set individual images also.

How To Configure and Use the Module (Steps):

1. Install this Module.
2. Now go to “Extensions” => “Module Manager”
3. Edit/Add RS-FlashMatic Module and publish it after configuring the module using the following steps listed below:
   • Module Class Suffix: A suffix to be applied to the CSS class of the Module. This allows for individual Module styling.
   • General Configuration:
     • Slideshow Width: Width of the slideshow in pixel. Default value is “600”. Basically this is the width of the images of your slideshow.
     • Slideshow Height: Height of the slideshow in pixel. Default value is “300”. Basically this is the height of the images of your slideshow.
     • Show Images Randomly: Randomize the images of slideshow or Not. Default value is “NO”.
     • Background Color: Color of the background in hex-code. Default value is “FFFFFF”. Do not enter # with this value. Say you wish to make the background color to RED. Then add “FF0000” here (not #FF0000).
     • Background Transparency: Transparency of the background. Any value from 0 to 100. 0 means no transparency, 100 means fully transparent. Default value is “100”.
     • Loader Color: Color of the Image Loader in hex-code, do not add #. Default value is “000000”.
   • Cell Configuration:In time of transition from one image to other, the image will splits into small pieces/cells. Here you can configure the behavior of those cells:
     • Cell Width: Width of Cells in pixel. Default value is “50”.
     • Cell Height: Height of Cells in pixel. Default value is “50”.
     • Cell Show Time Minimum: Minimum Show Time of Cells in seconds. Default value is “0.2”.
     • Cell Show Time Maximum: Maximum Show Time of Cells in seconds. Default value is “1.5”.
   • Cell Border Configuration:In time of transition from one image to other, the image will splits into small pieces/cells. Here you can configure the border style of those cells:
     • Blur: Blurriness of the border. Any value from 0 to 100. Default value is “50”.
     • Border Display Time: Display Time of Border in seconds. Default value is “0.5”.
     • Border Prominency: How prominent the border will display. Any value from 0 to 100. 0 means border will not display, 100 means border is fully prominent. Default value is “80”.
     • Border Color: Color of the Border in hex-code, do not add #. Default value is “000000”.
   • Navigation Bar Controller Style:Here you can control all settings of Navigation/Controller Bar:
     • Display Controller: Display the Controller or Not. Default value is “YES”.
     • Display Controller Background: Display Background of the Controller or Not. Default value is “YES”.
     • Display Previous-Next Button: Display the Previous-Next Button or Not. Default value is “YES”.
     • Display Play-Pause Button: Display the Play-Pause Button or Not. Default value is “YES”.
     • Auto Play: Start Auto Playing the Slides or Not. Default value is “YES”.
     • Navigation Button Color: Color of the Navigation Button in hex-code, do not add #. Default value is “000000”.
     • Controller Left-Right Padding: Padding/Spacing of the Controller Bar in Left and Right. Value in pixel. Default value is “10”.
     • Controller Padding from Bottom: Padding/Spacing of the Controller Bar from Bottom. Value in pixel. Default value is “10”.
     • Controller Height: Height of the Controller in pixel. Default value is “27”.
     • Distance Between Controller Buttons: Distance Between Controller Buttons in pixel. Default value is “10”.
     • Navigation Text Color: Color of the Navigation Text in hex-code, do not add #. Default value is “000000”.
     • Navigation Text Over Color: Color of the Navigation Text when you Mouse-Over, in hex-code, do not add #. Default value is “473C31”.
     • Selected Navigation Text Color: Color of the Navigation Text when Selected, in hex-code, do not add #. Default value is “FFFFFF”.
     • Background Prominency of Selected Text: How prominent the background will display of selected texts. Any value from 0 to 100. 0 means background will not display, 100 means background is fully prominent. Default value is “70”.
     • Distance Between Navigation Texts: Distance Between Controller Buttons in pixel. Default value is “7”.
   • Image Caption Display Settings:Here you can set the display style of image caption i.e. the display style of Title, Description and Read-More text:
     • Caption Box Padding from Right: Padding/Spacing of the Caption Box from Right. Value in pixel. Default value is “10”.
     • Caption Box Padding from Top: Padding/Spacing of the Caption Box from Top. Value in pixel. Default value is “10”.
     • Width of Caption Box: Width of Caption Box in pixel. Default value is “390”.
     • ‘Read More’ Button Text: Text of ‘Read More’ Button. Default value is “read more”.
     • ‘Read More’ Text Color: Color of ‘Read More’ text, in hex-code, do not add #. Default value is “FFFFFF”.
     • ‘Read More’ Text Over Color: Color of ‘Read More’ text when mouse-over, in hex-code. Do not add #. Default value is “999999”.
     • Background Prominency of ‘Read More’ Button: How prominent the background will display of ‘Read More’ button. Any value from 0 to 100. 0 means background will not display, 100 means background is fully prominent. Default value is “80”.
     • Background Color of ‘Read More’ button: Background Color of ‘Read More’ button, in hex-code. Do not add #. Default value is “473C31”.
     • ‘Read More’ Text Left-Right Padding: Padding/Spacing of the text from Left and Right of ‘Read More’ Button. Value in pixel. Default value is “50”.
     • ‘Read More’ Text Top-Bottom Padding: Padding/Spacing of the text from Top and Bottom of ‘Read More’ Button. Value in pixel. Default value is “5”.
     • Caption Box Inner Left-Right Padding: Inner Padding/Spacing of the Caption Box from Left and Right. Value in pixel. Default value is “20”.
     • Caption Box Inner Top-Bottom Padding: Inner Padding/Spacing of the Caption Box from Top and Bottom. Value in pixel. Default value is “15”.
   • Image Configuration:Choose how you wish to configure the image display. The first one (BASIC) is easy to configure. For advanced users the second option (ADVANCED) will give much more advanced configurable options.
     • BASIC SETTINGS:
       1. Image Folder: Specify the path of image folder (Example: images/stories/slideshow/). Enter the relative path as shown in example.
       2. Link to images: If you wish to redirect the visitors to a particular url after clicking the images, then please specify the url here. (Example: http://www.yoursite.com/)
       3. Open link in: Choose your option to open the link in the same window or in a new window.
       4. Navigation/Controller Bar Background Color: Enter the Background color of Navigation Bar Controller in hex-code, do not add #. Default value is “FFFFFF”.
       5. Navigation/Controller Bar Transparency: Enter the Transparency of Navigation Bar Controller. Any value from 0 to 100. 0 means not transparent, 100 means fully transparent. Default value is “40”.
       6. Slideshow Time: Enter how many seconds one image will display before moving on to the next image. Default value is “4”.
     • ADVANCED SETTINGS:
       1. Image(s) Path: Specify the relative path of all your images, within {}. Do not add absolute path. Only add relative path. Example:
          {images/stories/slideshow/image1.jpg}
          {images/stories/slideshow/image2.jpg}
          {images/stories/slideshow/image3.jpg}
       2. Image(s) Title: Specify the title of the images, within {}. Example:
          {Sample Title 1}
          {Sample Title 2}
          {Sample Title 3}
       3. Image(s) Caption/Description: Specify the caption/description of the images, within {}. Example:
          {Sample Caption 1}
          {Sample Caption 2}
          {Sample Caption 3}
       4. Link to Image(s): Specify the link of the images, within {}. Example:
          {http://www.example1.com/}
          {http://www.example2.com/}
          {http://www.example3.com/}
       5. Open link(s) in: Open the link(s) in the same window or in a new window, within {}. You have 2 options ‘_blank’ or ‘_self’. Example:
          {_self}
          {_blank}
          {_blank}
       6. Navigation/Controller Bar Background Color(s): Background color(s) of Navigation Bar Controller in hex-code, within {}, do not add #. Example:
          {FFFFFF}
          {FEFEFE}
          {D3D3D3}
       7. Navigation/Controller Bar Transparency(s): Specify the Navigation/Controller Bar Transparency, within {}. Any value from 0 to 100. 0 means not transparent, 100 means fully transparent. Example:
          {40}
          {50}
          {65}
       8. Caption Box(es) Background Color: Specify the background color of caption box(es), within {}. Example:
          {FFFFFF}
          {FEFEFE}
          {D3D3D3}
       9. Caption Box(es) Background Transparency: Specify the background transparency of caption box(es), within {}. Any value from 0 to 100. 0 means not transparent, 100 means fully transparent. Example:
          {60}
          {50}
          {45}
       10. Caption Box(es) Border Color: Specify the border color of caption box(es), within {}. Example:
           {FFFFFF}
           {FEFEFE}
           {D3D3D3}
       11. Caption Box(es) Border Prominency: Specify the border prominency of caption box(es), within {}. Any value from 0 to 100. 0 means border will not display, 100 means border will fully prominent. Example:
           {60}
           {70}
           {55}
       12. Slideshow Time(s): How many seconds image(s) will display before moving on to the next image, within {}. Example:
           {4}
           {6}
           {5}

Support: If you have any question/suggestion or if you wish to report any error please post it in our forum: SUPPORT FORUM LINK (Please do not forget to mention the extension name and the version)

Disclosure: Some of our articles may contain affiliate links; this means each time you make a purchase, we get a small commission. However, the input we produce is reliable; we always handpick and review all information before publishing it on our website. We can ensure you will always get genuine as well as valuable knowledge and resources.