Joomla Full Page Background Slideshow

Introduction

Thank you for purchasing the Full Page Background Slideshow module!

Full Page Background Slideshow is a Joomla module that lets you add beautiful full-screen backgrounds to your site. This documentation will help you understand the requirements and usage of the Full Page Background Slideshow module. It covers installation, usage, and support.

Please read this documentation for more information on how to use Full Page Background Slideshow and its options.

Requirements

You do not need to be a web developer to install or use Full Page Background Slideshow.

Full Page Background Slideshow requires Joomla version 3.6+ and 4.x and newer. Older versions have not been tested.

Installation

To Install the Full Page Background Slideshow Module, please follow our step by step guideline::

  • Step1: Download the Full Page Background Slideshow in your local machine (Computer).
  • Step2: Login to the administrative area of your Joomla website.
  • Step3: Go to Extensions Manager from top menu: Extensions( or, Extensions Manager ) -> Manage.
  • Step4: Now find Browse(Choose File) button under Upload & Install Joomla Extension and hit the Browse button, browse to the location of downloaded Full Page Background Slideshow Module(zip file) on your local computer, and press the Upload & Install button.
  • Step5: When you install the extension successfully, go to: Extensions ( or, Extensions Manager ) >> Modules (or, Module Manager).
  • Step6: Now Config Your Module
  • Step5. After Complete configure the extensions hit Save & Close button.

Joomla Full Page Background Slideshow Module has lots of options. You will find them from the Module Settings tab.

To Basic configure the Full Page Background Slideshow, please follow our guideline:

  • Step1: Go to Extensions Manager from top menu: Extensions ( or, Extensions Manager ) -> Modules ( or, Module Manager ).
  • Step2: Find the Full Page Background Slideshow and enter.
  • Step3: Set Module Position from the drop-down list.
  • Step4: Set Module Status Published.
  • Step5: Select menu from Menu Assignment Tab.
  • Step6: Now Go to ‘Image Source’ & upload image.
  • Step7: Now explore all settings tab and configure them as your own demand. Please read option tooltip information carefully for configure.
  • Step8: Now Save and enjoy.

All Options

Description of all available options of Full Page Background Slideshow for Joomla.

In this section, labels are used to help understand the usage. When an option has a label it means that option is available for that particular type of background only.

During Module configure please read settings option tooltip information carefully to properly understand the option.

Image Source

  • Upload Image:
    This is a Joomla Native Repeat Field. So Upload Unlimited Background image with appropriate dimension. Also, you can change order or alter any image easily bay drag and drop feature.
  • Basic Settings

    • SlideShow Duration :
      Enter the display duration of each image in milliseconds (1000 ms. = 1 sec.). Default is 6000.
    • SlideShow Transition Duration :
      Enter the transition duration for the fading effect between images. Should not be more than the Image Display Duration value, you can create some nice effects by going over a little but the play/pause functionally will not function as expected. (1000 ms. = 1 sec.). Default is 2000.
    • SlideShow Effect :
      Select the animation effect to display the image with. Default is random. Available values: random, fade, panLeft, panRight, panUp, panDown, zoomIn, zoomOut.
    • slideShowEasing :
      Select the effect easing type for the image animation. Default is ease-in-out. Available values:ease, linear, ease-in, ease-out, ease-in-out.
    • Media Overlay:
      Enable or disable displaying an overlay pattern or overlay color over the media. Enter ‘No’ to disable or ‘Yes’ to enable. Default is ‘Yes’.
    • Overlay Pattern:
      Select a suitable Pattern for background. Experiment with the available patterns as some will look better on some media backgrounds than others.

      Remember that if you prefer not to use an overlay pattern but still want to use an overlay color then select ‘Transparent ‘ and in the option Overlay Color select the color code you want for the overlay.

    • Overlay Color:
      Select the color you want to use for the overlay.

      Remember that if you prefer no overlay pattern but still want to use an overlay color then select ‘transparent’ in the Overlay Pattern.

    • Overlay Color Opacity:
      Enter the Opacity you want to use for the overlay color.
    • Custom Style:
      If you need additional CSS please write here.

    Background Settings

    • Auto Play:
      Automatically play the media.

      Auto-Play has change in WebKit browsers such as Safari 11 and the new Chrome since 2018. Videos and audio media will not play automatically unless they are muted by default. This setting can also be changed on the browser by the user to not play any media at all or allow to play all media. The default is to allow only media that is muted. Anything else will need user interaction to play or hear the sound. So depending on the user’s browser settings the auto-play feature may not work at all. You can read a little more at the WebKit website.

      Full Page Background Slideshow detects when a browser has these settings on and will mute the video before playback so it can auto-play muted. If the user’s browser is set to not play media files at all then Full Page Background Slideshow will simply not start playback until the user clicks the play button. What else can you do? Well, you can also set your backgrounds to not auto-play or mute them to ensure they will play although without sound until the user clicks on the mute button.

    • Delay By:
      Enter the time in milliseconds to delay displaying the background. (1000 ms. = 1 sec.). Default is 0.
    • Loop:
      Enter NO to disable or Yes to enable loop play. Default is 1. If not looping the media, it will stop at the end or you can choose to rewind the media to the beginning without playing it again with the ‘Rewind To Start At’ option.
    • Rewind To Start At:
      If not looping the media, this module can rewind the media to the beginning without playing it again. Enter ‘NO’ to disable or ‘Yes’ to enable. Default is ‘NO’.
    • Media Start Fade In:
      Allow for the media to be faded-in once playback has start. Default is ‘NO’.
    • Media End Fade Out:
      Allow for the media to be faded-out once playback has ended. Default is ‘NO’
    • Media Link:
      Enter the URL to link the media background too.
    • Media Link Target:
      Select to open the link in a new window or the same window.

    Page Settings

    • Page Up Down:
      Page-Up-Down (PUD) allows the page to be scroll up and down to have a better view of the media.
      Enter NO to disable or Yes to enable. Default is Yes.
    • PUD Element:
      The HTML id name or class name of the element to use for the PUD option (i.e. #wrapper or .container). This element will be what gets scrolled up and down when PUD is enabled. Default is #page.
    • PUD Down:
      Enable to scroll down the PUD Element when the media playback starts. Enter NO to disable or Yes to enable. Default is NO.
    • PUD Up:
      Enable to scroll up the PUD Element when the media playback ends. Enter NO to disable or Yes to enable. Default is NO.
    • PUD Show:
      Amount of the PUD PUD Element to show in pixels when PUD is in the down position. This keeps part of the PUD Element in view such as to show the logo and/or navigation during the PUD down status, it depends on the content inside the selected PUD Element.

      Enter the value in pixels (i.e. for 145px you will enter 145). Default is 0.
    • Fade In Out:
      Fade-In-Out (FIO) lets you set an opacity (transparency) effect for a better view of the media background.
      Enter NO to disable or Yes to enable. Default is Yes.
    • FIO Element:
      The HTML id name or class name of the element to use for the FIO option (i.e. #wrapper or .container). This element will be what gets the opacity applied too when FIO is enabled. Default is #page.

      Recommended to use the same HTML element as PUD but it is not necessary. You may select any HTML element you see fit for your desire outcome.

    • FIO Opacity:
      Set the amount of opacity for the FIO Element. Acceptable values are 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1. Default is 0.5.
    • FIO Start:
      The FIO Element will fade-out when the media playback starts. Enter NO disable or Yes to enable. Default is NO
    • FIO End:
      The FIO Element will fade-in when the media playback ends. Enter NO to disable or Yes to enable. Default is Yes.
    • Page Visibility Pause:
      Allows the media to be pause when the user minimizes the browser or moves to another window tab. Enter NO to disable or Yes to enable. Default is Yes.

    Controller Settings

    • Display Controls:
      Display the play, audio, & PUD button. Enter NO to disable or Yes to enable. Default is Yes.

      Color backgrounds do not display the controls.

    • Controls Location:
      The location to place the controls on the screen. You can select to place the controls on the bottom right, bottom left, top right, or top left of the page.
    • Control Color:
      Color for the control buttons.
    • Control Color Opacity:
      Opacity for the control buttons Color.
    • Control Background Color:
      Color for the control background.
    • Control Background Color Opacity:
      Opacity for the control background Color.
    • Enable Scroll To Top Button:
      Display scroll-to-top button in the controls panel. Default is Yes.

    Responsive Settings

    • Disable On All Mobile:
      Do not allow any of your Full Page Background Slideshow to be display on any mobile device.
      Enter NO to disable or Yes to enable. Default is NO.
    • Disable On Mobile Phones Only:
      Enable this option to disable Fullscreen Video backgrounds only on mobile phones. They will continue to display on tablet devices. You can enable this option together with ‘Disable On Mobile Video Only’.
      Enter NO to disable or Yes to enable. Default is NO.

    Support

    If further help is needed you can go to our support page . We’ll do my best to help you.