FullScreen Background Slider

Documentation


Table of Content

  • Item Name : FullScreen Background Slider - jQuery SlideShow
  • Item Version : Version 1.5
  • Minimum Required : jQuery 1.10.2
  • Author by : Pantherius
  • Support via Email : Contact Link

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

The plugin using the latest CSS3 transitions with some jQuery to display a really unique fullscreen gallery slideshow in the background of your website.

File Structure #back to top

You will see 3 folders in the files (inside the ZIP) directory: css, js, images

Included Images

These assets are responsible for the background pattern feature. Find all included images under the files/images folder:

  • - pattern.png
  • - pattern1.png
  • - pattern2.png
  • - pattern3.png
  • - pattern4.png
  • - pattern5.png
  • - pattern6.png
  • - pattern7.png
  • - pattern8.png
  • - pattern9.png
  • - pattern10.png
  • - pattern11.png
  • - pattern12.png
  • - pattern13.png
  • - pattern14.png
  • - pattern15.png
  • - pattern16.png
  • - pattern17.png
  • - pattern18.png
  • - pattern19.png
  • - pattern20.png
Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. Find all included CSS code under files/css folder

  • - fullscreen_background_slider.css - Transition Effects for the plugin




Included JavaScript

These are the core files of the plugin to work with. Find the minified and the unminified version of the main JS files. If you decided to modify it, you have to use the unminified version. Find all included JavaScript codes under the files/js folder

  • - fsbs.min.js - Minified version of the core JavaScipt file
  • - fullscreen_background_slider.js - Original (unminified) version of the core file
  • - modernizr.custom.js - Modernizr Javascript Library to Detect Browsers' Features

Install Guide #back to top

Copy all folders (css,js, images) from the files directory to your server's document root folder, next to your index.html file.

Integration

Open your index.html file and if you already using jQuery, then locate it and copy the following lines right after the included jQuery file:

							
							
							
							
				        

If you have already included jQuery UI as well the jQuery, then you can ignore the second line above. Without jQuery and jQuery UI, you have to add the following lines:

							
							
							
							
							
				        

These lines must be included between the <head> and </head> element of your website. In some cases, you can also place the JS files at the bottom of your file before the </body> closure tag.

HTML Markup

Place the images with the following markup between the <body> and the </body> tags:

						   

If you would like to add texts for the images, then use the following structure:

						  
  • Professionalism
  • Responsibility
  • Confidence
  • Helpfulness

With the style tag, you can add inline style customization to each texts. The margin-top and margin-left attributes are the positions from the top and the left corner of the screen.

Basic Initialization

You have integrated the required files and added the HTML markup that contains your images, so you need to start the plugin now and customize the options to fit to your needs. Place the following default configuration after the included JS files in the <head> tag:

							
						

In this state of the integration, the plugin needs to work when you call your index.html in your browser. Read more about the customization options in the next sections.

Customization #back to top

Changing the Background Color

Set the background color with the background parameter (HEX color code: #fff or simply define the color, eg.: white):

							
						

Adding Pattern

If you would like to add pattern, it is possible to specify in the pattern parameter. Use pattern1, pattern2, patter3,...,pattern20 values. By default, the plugin using the pattern.png ( if the pattern parameter doesn't specified ). You can remove the pattern with false value.

							
						

Changing the Font Family

Set the font family with the fontfamily parameter (Google Fonts, see the full list here: Google Fonts):

							
						

Alternative way to set the Font Family ( Manual Setting )

Add this line to the head section of your index.html to implement the selected Google Font Family file (Frijole in this example):

							
						

Then you can add the font-family: 'Frijole',Arial; attribute to the div style tag::

						  
  • Professionalism
  • Responsibility
  • Confidence
  • Helpfulness

Customizing the Animation

The animation_time is the full playing time of the slideshow in seconds. With animation_type it is possible to specify the style of the animation. You can use the following values:

crossfade (default value), slidefade, randomslide, rotatefade, slidelefttoright, slidelefttoleft, slidelefttotop, slidelefttobottom, sliderighttoright, sliderighttoleft, sliderighttotop, sliderighttobottom, slidetoptotop, slidetoptobottom, slidetoptoleft, slidetoptoright, slidebottomtotop, slidebottomtobottom, slidebottomtoleft, slidebottomtoright, glidelefttoright, glidelefttoleft, glidelefttotop, glidelefttobottom, gliderighttoright, gliderighttoleft, gliderighttotop, gliderighttobottom, glidetoptotop, glidetoptobottom, glidetoptoleft, glidetoptoright, glidebottomtotop, glidebottomtobottom, glidebottomtoleft, glidebottomtoright

							
						

Animation Control

To add or remove play / pause button to the screen, just pass true or false in the control parameter (true by default):

							
						

Handling the Images Loaded Event

By default the images are preloaded with the plugin and you can call your own function to handle the event, when the images has been loaded. Simply pass the function with the loaded parameter:

							
						

Methods

The following methods are available currently:

  • jQuery('.fsb-slider').init() - initialize the plugin
  • jQuery('.fsb-slider').destroy() - destroy the plugin
  • jQuery('.fsb-slider').updatepattern({ pattern: 'pattern4' }) - change the pattern in real-time

F.A.Q. #back to top

With more than 4 images, the CrossFade animations looks like bad, the images are cluttered. How can I set the animation?

The plugin works with CSS3 animations, therefore you can change the animations in the fullscreen_background_slider.css Modifications are quite easy, just search for the animation name (eg.: crossfade) and you will find 5 sections with that name:

  • @-webkit-keyframes crossfade
  • @-moz-keyframes crossfade
  • @-o-keyframes crossfade
  • @-ms-keyframes crossfade
  • @keyframes crossfade

These are almost the same, just need it for the different browsers (only using different prefixes) If you found the animation you are looking for, just modify the percentage/opacity/scale values to change the effect.

Support#back to top

Support for my items includes:
  • * Answer for questions related with the plugin
  • * Answering technical questions about item’s features
  • * Assistance with reported bugs and issues
  • * Help with included 3rd party assets
Item support does not include:
  • * Customization Services
  • * Installation Services

Please remember you purchased a very affordable plugin and you don't have to pay for a full-time web design agency for the developing. Occasionally, I will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and I provide it for your convenience, so please be patient, polite and respectful.

Please visit my profile page or ask question in the plugin's the comments section

Before seeking support, please...
  • * Make sure your question is a valid Plugin Issue and not a customization request.
  • * Make sure you have read through the documentation before asking support on how to accomplish a task.
  • * Make sure you double checked the plugin's FAQs.
  • * Try disabling the other active plugins to make sure there isn't a conflict with any other plugins. If you found a conflict this way, you can let me know.
  • * If you have customized your plugin and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide me with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than I can respond to your request.
  • * Make sure to state the name of the plugin you are having issues with when requesting support via CodeCanyon.

Version History ( Changelog ) #back to top

You can find the version history ( changelog.txt ) file in the downloaded plugin ZIP file or you can check the changelog on plugin's page here.

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. With more general question relating to the plugins on CodeCanyon or with this plugin, you might consider visiting the comment section of this plugin, maybe somebody also faced with the same question.


Changelog


						-----------------------------------------------------------------------------------------
						Version 1.5
						-----------------------------------------------------------------------------------------

						- reconstructed & updated documentation

						-----------------------------------------------------------------------------------------
						Version 1.4
						-----------------------------------------------------------------------------------------

						- added option to handle the images loaded event
						- added option to set background
						- fixed minor fixed issue in Chrome
						- updated documentation

						-----------------------------------------------------------------------------------------
						Version 1.3
						-----------------------------------------------------------------------------------------

						- added animation control, now you can pause and play animations

						-----------------------------------------------------------------------------------------
						Version 1.2
						-----------------------------------------------------------------------------------------

						- added 16 new animation types
						- updated example and documentation
						
						-----------------------------------------------------------------------------------------
						Version 1.1
						-----------------------------------------------------------------------------------------

						- added text support to images
						- added option to set Google Fonts on texts
						- ability to set the position, color, font size and font family for the image texts
						- updated example and documentation

				        

Credits #back to top

Thanks for the following resources: