Infradox XS uses a Javascript library. The library’s functions are configured with Back office settings. Many functions look for HTML elements by id’s and class names. Several functions have methods that can be overridden in your custom script.

Thumbnail pages

The thumbnail pages use the thumbpages Javascript object. You can completely override this by enabling “thumbnail pages script” in the code editor. It is however also possible to use the standard script and to then override certain methods/functions. This is described below.

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.

Function nextpagebox

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.

The default HTML that is used to display the box, can be fetched from the thumbpages javascript object, thumbpages.cfg.nextpageboxhtml – which will return something like this when on a search results page (note that is will output HTML based on the page you’re on):

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

Function onlayoutdialog

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.

Function layoutdialog

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).

Function tvideo

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.

Search dialog

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.

If you change a group’s pagination method from infinite scrolling to standard pagination, then the first block of groups is loaded and a pagination bar will show at the bottom of the page. To change how this pagination bar looks you can change the CSS. For more control you can override the pagination bar function by adding your own Javascript. Note that the default function to display the pagination bar is not called if you override it by adding your own function (described below).

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: