To override certain functions, add the object xsthumbs to your custom script. You don’t have to override all the functions, just add the ones that you want to change/override.
The nextpagebox function is used to determine if the next page box should be displayed, based on settings in Back office. To override this function, add it to your custom script. You may want to do this e.g. because you want the box to display always, never, using different HTML and so on. The standard function looks for the last thumbnail on the page and then calculates if there’s a gap. And if there is a gap, it will display the next page box.
You can use the JSON object pagedata that exists in the HTML of all thumbnail pages in your functions.
Below is an example of the object:
.page.no is the current page
.page.count is the total number of pages
.page.slots is the number of thumbnails per page
.results.count is the number of files in the result set
.results.files is the total number of matched files
.results.pagetype is the pagetype, 1=search results
.layout.style is the current view style (e.g. grid, list, flow)
.layout.option is the current option for number of thumbnails per page, e.g. 1 for 24 per page, 2 for 48 per page and so on
.layout.fluid is either 0 or 1 if the fluid Back office setting is on
.spanning is no longer used
By adding the function onlayoutdialog, you can manipulate the HTML before the dialog is displayed. E.g. to hide certain functions when the website is used on a mobile device. The normal function will still be called. To completely override the function that displays the dialog, add the function layoutdialog as described below.
Note that instead of using the default page layout dialog, you can also use buttons/links or a drop down menu for the page layout options (grid, list, small, large, flow). This is described in the article: Custom pagination bars for thumbnail pages.
Add the function layoutdialog to override the default function that displays the layout dialog. Use the pagedata object (described above) for information about the currently selected layout options (style, option, fluid).
Below is an example that is used to override the default function that displays thumbnail video. You can copy the code and change it as per your requirements. Note that the example below doesn’t have code support MSIE before version 9. The default code however does support MSIE before version 9.
Live keyword and gallery suggestions
If you want to override the functions that display the suggestions box, then add the object xssuggestions to your client script. The object in the Infradox script library is called infradoxsuggest. For more information about the suggestions function and how to configure it, read Live keyword suggestions.
You can create a modal search dialog to replace the default search side bar. This is described in a separate article: Creating a custom search dialog.
Gallery group pages
By default, gallery group pages use infinite scrolling if there are many gallery groups. This means that the first block of groups is loaded, and when you scroll to the bottom of the page, the next block of gallery group boxes is automatically loaded and appended to the page. You can however change this to use traditional pagination by changing the gallery group’s settings in the Gallery manager.
You can also override the function that sets up hovering to display gallery info – if you have configured a gallery group to display with style 1, “large thumbnails”.
Add the object xsgallerygroup (see below) to your script, and then add your own code to the function onpaginationbar to manipulate the pagination bar.
The pagedat object (see above) has the following properties:
- totalrows: the total number of rows in the dataset (each row is a gallery group)
- parsedrows: the number of rows on the current page
- pagenr: the current page number
- rpp: rows per page
- pagecount: the total number of pages based on the total number of rows and the number of rows per page
On gallery group pages, you can also use the embedded JSON object gminfo. See the example below: