Slider Gadget Documentation
Created by Ludovic Lefebure
The carousel you need to combine text and images
This slider gadget provides a simple and aesthetic way to display news with photos.
LIVE DEMO - VIEW SPREADSHEET - SETTINGS - DOCUMENTATION
DOCUMENTATION
1. Insert the gadget in your Google Site
Go into the edit mode of the page (click on the pen in the top right corner). To insert the gadget, click on the Insert menu, then click on More gadgets...
A new window appears. Click on the menu Add gadget by URL and then copy/paste the following url: https://sites.google.com/a/revevol.eu/xml-gadgets/home/Jssor-Gadget.xml in the field and finally click on the Add button.
By clicking on the Add button, a new page appears. This is the configuration panel of the gadget.
2. Configuration
You will automatically access the configuration panel when you insert the gadget. Later, if you want to modify settings, go into edit mode (click on the pen in the top right corner), and then click on the gadget’s wheel icon.
Every change that you make has to be saved by clicking on the green “Save” button in the top right corner before you click on the “ok” button in the bottom left corner.
2.1 Data
This is where you can set up access to the data. The view contains 5 fields. Please note that 4 of them are mandatory.
Google Spreadsheet key (or url): This is the key (or url) that will be used to access your Spreadsheet.
(key in red here : https://docs.google.com/a/revevol.eu/spreadsheets/d/10bNy1rhYRqAz2VG0m6i0n-nDINtbcWL0rbO1raJ979M/)
Data's Sheet name: This is the name of the sheet that contains all your data. Do not modify it in the Spreadsheet. If you do, you will have to also modify the name that you entered in this field.
Range of data in data sheet: The range of your data in the sheet you entered in the previous field, e.g. A1:F (takes all rows between the first row and the last row and all columns between first column and the column F)
Template’s sheet: The sheet that contains the template, e.g. TemplateSheet
Template's cell: The cell that contains the template, e.g. A2 (take the cell A2). You can learn more about templates in paragraph 3.2.
Query (expert users): You can type here a valid Spreadsheet’s query in order to filter data, e.g. select * where A != “NoDisplay” (query’s documentation)
Display arrow navigation: Check the box if you want to use arrow navigation. You can use all navigations at the same time.
Select arrow's type: Select the type of arrow you would like to display. (for now, you can only choose number 01 or 02, other types of arrow will be added soon)
Display bullet navigation: Check the box if you want to use bullet navigation. You can use all navigations at the same time. (There are no other types of bullet right now)
Auto play: Check the box if you want the slider to advance on its own.
Enable drag and drop: Check the box if you want to navigate through the slider using drag and drop.
Vertical drag and drop: Check the box if you want both horizontal and vertical navigation (only drag and drop will be affected, others navigation ways are always horizontal).
Interval (in ms): The number of milliseconds between each slide (only works with Auto-play enabled), e.g. 4000.
Slide duration (in ms): The number of milliseconds the navigation’s animation will take to be performed, e.g. 500.
All data in the gadget is displayed from a Google Spreadsheet. Here you can find a Spreadsheet with the correct format to work with the slider. You can copy this Spreadsheet to provide an accurate starting point. Don’t forget to link it to your slider via the configuration panel.
In this panel you can change the way you navigate through the slider.
In this panel you can change the way you can navigate through the slider.
3. Link data to the slider
2.3 Routine
2.2 Customization
3.1 Manage Data with Google Spreadsheet
The data in your spreadsheet must be contained in a single sheet (the one you previously specified in the settings panel). The first row of data has to contain the name of each column, in order to be recognized by the template. If you want to put images, only put url links of your images. Ideal size for your images is 1000x400px. Optimize image size to get enough quality without increasing loading time. You should avoid using HYPERLINK function, the results of functions may disappear over time when the spreadsheet is closed, which will prevent the slider from accessing those results.
3.2 Use a Template
In order to be very flexible, the gadget uses templates to display each slide. Templates are short Html code that will format the displayed data.
3.2.1 Get the default template
If you are not familiar with HTML and CSS, you can go on the example Spreadsheet and copy the code. A template is already set in the sheet Template. You just have to link it to your slider in the configuration panel by typing the correct range (range A2 in the example and sheet: Template). Templates are linked to data in the data sheet by the name of the column. Therefore, the template in the example’s Spreadsheet can only recognize data which is under the same column as in the data sheet.
If you want to create your own template, you only need some basic knowledge on HTML and CSS. Each row of data will be read and will be put into a slide. Each slide is made from the template. As said in the previous chapter, data-binding is made through the column’s name of data. If you want to include a column in your template, put the name in this format : ${“MyColumnsName”}. You can also put <script><style> and <link> tags. They will be extracted and executed once the content is loaded.
You can use a query to filter data which is displayed in the slider. You can find Google documentation about Query here. Query are very useful if you want to use a single sheet to store all your data, but in the mean time you want to display only some of them in the slider. A simple way of filtering them is by creating a column named for instance “Display”, and put either “Yes” or “No” for each row of data.
3.3 Using a Query
3.2.2 Modify or create a template