“HTML5 Fluid Responsive Slider” Documentation by FWDedign - v1.0


HTML5 Fluid Responsive Slider

Created: 25/10/2012
By:© FWD (FLASH WEB DESIGN)
Email: contact@webdesign-flash.ro

Thank you for purchasing our component. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!


Table of Contents

  1. Important notes read this before anything else.
  2. How to install the gallery into your html page.
  3. Gallery configuration.
  4. Adding / removing images, thumbs and description windows.
  5. Setting up the description windows.
  6. Embedding the gallery in wordpress.
  7. Sources and Credits

A) Important notes make sure you read this! - top

When you edit the xml file every time a simple change is made make sure you test the script, this is important because if you edit multiple tags and a formatting mistake is made it will be really hard to find the mistake because of the nature of html if the xml file has a parsing error it is impossible to find the error with code so please make sure you test!.

For those who do not know what a xml file is do not be alarmed you don't event know to need what it is to configure it and use the script, but basically it is a text file with string tags just like a html page, each tag is used internally by the script for configuration.

The server is character case sensitive so always use lower case characters in the xml settings!

In the head section of your html page under or above the title tag add the below code, this code will prevent scaling on mobile tablets, you need to know that the gallery runs much better with this feature enabled and it looks crisp, if this feature is not enabled after scaling rendering problems my occur, keep in mind that this gallery is not a simple html page is a complex script with a lot of math in it!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Do not delete any xml tags except the one which are allowed, this is explained below for each section of the script.

Do not rename any xml tag, only change their content.

All skins and coresponding xml files can be found in the load folder.

Testing the script local on your computer can only be made with firefox and safari(pelase note that it is possible not to work with safari it depends on the browser version), the other browsers dose not allow to load xml files with code local and security errors will be showed. Please note that this happens only if you try to open the script local on your computer, if you test it online then it dose not matter which browser is used.

Make sure you do not delete any graphics from the load folder, even if you do not need some of the graphics you still need all of them.

Make sure that you don't leave any empty space(s) inside this tags and always use lower case characters, for example:


B) How to install the gallery into your html page. - top

Instantiate gallery function parameters reference:

Below are the parameters accepted by the gallery init function, do not be alarmed it is really easy to understand them, below is a reference to all of them.

Global step, this must be done for all embedding style:

  1. The gallery is using a global css file which is used to style the image description window, this css file must be added to the html page head tag, example in the image below. You can find the code from the below image in the example.html file, open it with a text editor and you can copy and paste the code.

Install the gallery with a fixed size:

  1. Please note that the fixed size embedding style means that the gallery will resize based on the div into which it is embedded, if that div is resized on run time with css or javascript the gallery will adapt so basically the gallery is always fluid adapting to the parent(this div into which the gallery is embedded) width and height.
  2. Copy/upload the load and java folders in the same folder with your .html file, the load folder contains the images, graphics and xml file and the java folder contains the javascript files used by the gallery.
  3. Open the .html file and in the head section import the .js files used for this script, of course you can have other imports and tags in the head section but the noted .js files are needed for the gallery to work, example below.
  4. Create a div which is used as a container for the gallery, this div must be included in the body section, this div needs an id, the id can be labeled as you wish but make sure that it is unique, also make sure that you set the width and height for this div tag, the gallery will adapt based on the width and height of the div which you created for it (please note that if this div it is resized on run time with css or javascript the gallery will adapt based on the new size, so basically you can create a fluid layout), you can see an visual example in the first image below. In the head section add the code from the below second image to instantiate the gallery. In the download files you will see a html file "example.html" , open the file with a text editor and you will find all the code this way you can just copy and paste it.

Install the gallery full screen:

  1. Copy/upload the load and java folders in the same folder with your .html file, the load folder contains the images, graphics and xml file and the java folder contains the javascript files used by the gallery.
  2. Open the .html file and in the head section import the .js files used for this script, of course you can have other imports and tags in the head section but the noted .js files are needed for the gallery to work, example below.
  3. In the head section add the code from the below image. In the download files you will see a html file "exampleFullScreen.html" , open the file with a text editor and you will find all the code this way you can just copy and paste it. This type of embedding is made to always fill the browser so there is no point to have anything else in the html page.

Install the gallery with fluid width:

  1. Follow the steps from "Install the gallery with a fixed size" , the only difference is in the constructor function, you can see what needs to be modified in the below image, you need a third parameter set as true. In the download files you will see a html file "exampleFluidWidth.html", open the file with a text editor and you will find all the code this way you can just copy and paste it. The zIndex from the below image is used to push the gallery over all other html elements in your page, you can set it lower or higher based on your html page configuration, please note that the zIndex css property is needed only if you are using the gallery with a fluid width embed style.

C) gallery configuration - top

To configure the gallery first you need to open the xml file with a text editor, below each tag from the xml file is explained.

HTML5 Fluid Responsive Slider.

D) Adding / removing images, thumbs and description windows. - top

First you need to know that if you are using .png files the maximum size allowed is 3mb and for .jpg files is 5mb, this is important in order for this gallery to function correctly on mobile.

Please note that this slider is programmed to work on mobile devices too but you need to be careful about the number the total number of images which you will use, a mobile device has limited memory and if there are too many images the browser will just crash because the device is running out of memory. In our test it works fine with a maximum number of 50 images so keep this in mind.

The large images (the images used on the PC and desktop) width must be around 800 - 1000px in height, the widht dose not matter.

The images used for mobile always set the height to 700px and the width leave it to the image editing program it will set it automatically.

The below image represents the <image> tag which is used to add a new image, thumb and description window for that image, the total number of <image> tags represents the total number of images, each tag has it's own settings which are explained below. So if you want to add a new image just copy and paste an <image> tag and configure it, if you don't need it anymore delete the <image> tag.

E) Setting up the description windows - top

If you don't need the description window then disable it by setting the <show_info_button>no</show_info_button> to no, there is not much to tell about this, just add your text and configure it with css, you can see an example in the config.xml file, the css classes used can be found in the global.css file.

E) Embedding the gallery in wordpress. - top

We have tested and worked on the latest version of wordrpress (version 3.4), if you don't have the latest version then please install it, on an older version the embedding might not work.

Make sure you read the the other sections in the help file, it is important to familiarize your self with the xml tags and what needs to be configured inside the xml file.

You need a ftp program to connect to your ftp server and upload the gallery files, I use filezila is a free ftp program.

Connect to your server and open the folder in which wordpress is located, in my case it is "wp", in that folder upload the load folder and the java folder, of course before you upload configure the xml file, make sure that in the xml file you are using absolute paths for the graphics buttons and images, example below:

http://www.webdesign-flash.ro/wp/load/config.xml - This is an absolute path and this is how it must be done, of course replace http://www.webdesign-flash.ro/ with your domain name and wp with your wordpress folder name.

load/config.xml - This is a relative path, make sure you are not using this because it will not work!

The image below represent a graphical representation of the text which must be used for embedding the gallery.

To embed the gallery into wordpress first login as an administrator, from the menu open pages, add your page title and select the HTML tab not the VISUAL tab, after you do this copy and paste the text from the above image inside the HTML tab, this text can be found in the wp_embed.txt file, replace http://www.webdesign-flash.ro/wp/ with your domain name and your wordpress folder label then save the changes.

To modify the gallery width and height inline css is used as you can see in the above image the gallery width is 900px and the gallery height is 550px , if you want a different size just modify this numbers.

If you want the gallery with a fluid width then set the third parameter to true.

You can add a .css file for the description window, please note that the wordpress has it's own set of css rules this is based on the theme, each theme is different, some times this css rules might have higher precedence over the one you declare so if this is the case you must use inline css for the description window.

F) Credits. - top

This component was made by Tibi form FWD (FWDesign) FLASH WEB DESIGN, for more information and support contact us at contact@webdesign-flash.ro

Once again, thank you so much for purchasing this component. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

FWDesign

Go To Table of Contents