Working with the Infradox script library

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.

Adding custom functions

Most of the website pages call an initialisation function once the pages is loaded. Such initialisation functions are part of the Infradox script. By adding your own script in the code editor (the “client script” file with id #4), you can call your own functions. Note that every client facing page will always call the generic client.init() function if it exists, and it will check for the presence of specific Javascript objects on specific pages. For example, on gallery pages you can use the object xsgallery, on pages with thumbnails you can use the object xsthumbs and so on.

Available custom Javascript objects

• client
• xsthumbs
• xssidebarsearch
• xsgallerygroup
• xsgallery
• xsfoundsets
• xsorders
• xsorder
• xscart
• xspricecalculator
• xssearchdialog
• xssuggestions
• xslightboxclassic
• xsgaevents

Thumbnail pages

The thumbnail pages use the thumbpages Javascript object. You can completely override this by enabling “thumbnail pages script” in the code editor – although it is advised to not use this to prevent compatibility problems with future updates. It is also possible to use the standard script and to then override certain methods/functions without enabling the “thumbnail pages script”. This is the preferred approach and 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.

var xsthumbs = {

     onbeforeinitializepage: function() {
        // this is called at the beginning of the standard script function "initializepage" after page load (i.e. document.ready)
     },
     onafterinitializepage: function() {
        // this is called at the end of the standard script function "initializepage" after page load (i.e. document.ready)
     },

     nextpagebox: function() {
        // this is called to display a Next page thumbnail box
     },

     onlayoutdialog: function() {
        // called before the layout dialog is about to display, doesn't completely override the function
     },

     layoutdialog: function() {
        // this is called to completely override the layout dialog display function
     },

     tvideo: function(div, img) {
        // this is called to display thumbnail video when hovering
     }
}

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

"<a class='nextpagebox' href='/search?p="+(pagedata.data.page.no+1)+"'><div id='gridModeBoxNext"+pagedata.data.layout.style+"'>"+searchlocales.nextpageboxlabel+"</div></a>",

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:

var pagedata={data:{
   page:{no:1,count:1,slots:24},
   results:{count:11, files:11, pagetype:1},
   layout:{group:0, style:3, option:1, fluid:0},
   spanning:{thumbnails:false, pages:false}}
};

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

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.

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.

var xsthumbs = {

    // this is called to play a video on top of its thumbnail
    tvideo: function(div,img) {
        var o=this;
        var _volume="0.0";
        var _features=['playpause','progress','current','duration','volume'];
        var w=img.width(),h=img.height(),seed=1,rnd=Math.sin(seed++)*1000;
        var vs="<source width='"+w+"' height='"+h+"' type='video/";
        var s=img.attr("src");
        rnd=rnd-Math.floor(rnd);

        var s2=s.replace(/.jpg/i,"");
		div.append(vs+"mp4' src='"+s2+".mp4?r="+rnd+"' />");
		div.append(vs+"webm' src='"+s2+".webm?r="+rnd+"' />");
		div.append(vs+"ogg' src='"+s2+".ogv?r="+rnd+"' />");
        div.css({"width":w+"px","height":h+"px"}).attr("poster",s);

        MediaElementPlayer(div).setVolume(_volume);
        MediaElementPlayer(div,{stretching:"fill",videoWidth:200});
        MediaElementPlayer(div).play();

        if(o._mover) {
           img.hide();
           return;
        }
		
        var tp=thumbpages;
        var p=tp._vidc.find(".divthumbnailplayer:visible:first");
        if(tp.style===4) {
           p.css({"z-index":8001});
        } else {
           var ip=img.position();
           var zindex=8001;
           if(tp._fslb) zindex=10000; 
              if(typeof o._blob!== typeof undefined) if(o._blob.length) zindex++;
              p.css({"overflow":"hidden","z-index":zindex,"position":"absolute","top":(ip.top-2)+"px","left":ip.left+"px","cursor":"pointer"}).click(function(e){
                 e.preventDefault();
                 tp.videoclick(tp._vidc);
              });
              if(!tp._mini) img.hide();
         }
   }
};

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.

// override default suggestions function
var xssuggestions = {
     init: function() {
          var ixs=infradoxsuggest;
          ixs.sbindkeys($("#quicksearchtext")); // link the function to the input box with id quicksearchtext
          // if you want to link the function to additional input boxes, then call <em>sbindkeys</em> here for the inputs 
          return true;
     },

     displaybox: function(el) {
          // this is called to display the suggestions box
          var ixs=infradoxsuggest;
          if(!ixs._box.is(":visible")) {
               ixs._box.css({width:el.width()+"px"})
                    .show()
                    .position({of:el,my:"left top-1",at:"left-1 bottom"}); 
          }
     },
     
     onclick: function(inp, li) {
         // add this function to override the click handler
         alert( li.find("a").attr("href") ); // as an example, this alerts the url - you'll need to handle the rest yourself in this function
     }
};

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.

var xsgallerygroup = {
    init: function(pagedat,groupurl) {
        var o=this;
        o.pagedat=pagedat; // json object, e.g. {"totalrows":819,"parsedrows":35,"pagenr":1,"rpp":35,"pagecount":24}
        o.url=groupurl; // the base url to which you need to append the parameter ?page=
    },

    onpaginationbar: function() {
        // add this function to override the default pagination bar function
    },
    
    onhoverinit: function() {
        // add this function to override the default function that sets up hovering 
        // on group boxes if style "large thumbnails" is configured in gallery manager
    }
};

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:

var gminfo={"root":2, // id of the gallery root 
	"groupid":13, // id of the gallery group
	"galleryid":0,"glbid":0, // gallery id and thumbnail collection id
	"roottype":0, // type of gallery root as configured in gallery manager
	"coverphoto":0, // page has a cover photo
	"pagination":1, // 0 for infinite scrolling, 1 for classic pagination
	"pagelayout":1, // group display style as configured in gallery manager
	"ptitle":"stories", // title of the group
	"page":1}; // active page number

Gallery pages

Add the object xsgallery (see below) to your script to have its init() function called by the standard gallery script. You init() function is called at the end of the gallery initialisation function. The first parameter is the configuration object (to view its properties you can add an alert with JSON.stringify()), and the second parameter is a callback function that you must call once your own script has executed. For example:

var xsgallery = {
    init: function(cfg,f) {
        var o=this;
        // your code here...
        f(); // when you're done, execute the callback function
    }
};

Set searching / xsfoundsets

This is explained in the article Set searching.

Side bar search

Add object xssidebarsearch to your script if you want to override the default search function (executed when searching from within the advanced search panel/side bar).
Example implementation:

var xssidebarsearch = {
    init: function(cfg) {
        var o=this;
        o.cfg=cfg;
        console.log("init: "+JSON.stringify(cfg));
    },
    ontogglesetsearch: function(setsearch) {
        var o=this;
        console.log("switching to setsearch: "+setsearch);
    },
    onsearch: function(c,f) {
        console.log("onsearch: "+JSON.stringify(c));
        var u=c.u;
        if((c.e===1)&&($("#foundsets").length)) {

            //searching for sets, check for set search options if searching from the foundsets page
            var y=parseInt($("#yearbox option:selected").val());
            var t=parseInt($(":radio[name=evttime][checked]").val());
            var spid=[];
            $(".setsearchgroups").find("input").each(function(){
                if($(this).attr("checked")) spid.push($(this).attr("groupid"));
            });

            u+="&year="+y;
            u+="&time="+t;
            u+="&spid="+spid.join(",");
        }
        return u;
    },    
};

Price calculator

The price calculator and its data/html when being displayed – on e.g. cart pages – can be manipulated by adding the xspricecalculator object to the client Javascript. This object can have methods that are called before the calculator is displayed, after its data is loaded, when HTML is generated to display on cart and order pages and so on. For detailed information, read Price calculator for RM images.

Cart page

The xscart object is used if you want to use Price agreements/subscriptions and/or the Multiple RF licences function. The cart page uses its own script that is edited separately in the code editor (template 43 – Cart script). Example code is provided – click on Load example in the code editor.
The xscart object can have the methods: beforecart, aftercart, rfmultiorderdetail, finalisecart and savecart.

Order page

The xsorder object can be added to the client script in the code editor. You can add two methods, i.e. beforeorder and afterorder.
Example:

var xsorder = {
    beforeorder: function() {
        alert('before'); // called when the HTML is loaded and at the start of the standard infradox cart script
    },
    afterorder: function() {
        alert('after'); // called when the standard infradox cart script has finished executing
    }
};

Order history page

The xsorders object can be added to the client script in the code editor. You can add two methods, i.e. beforeorders and afterorders.
Example:

var xsorders = {
    beforeorders: function() {
        alert('before'); // called when the HTML is loaded and at the start of the standard infradox script
    },
    afterorders: function() {
        alert('after'); // called when the standard infradox script has finished executing
    }
};

Lightbox pages (classic mode)

Add the object xslightboxclassic to have your init function called after the page has initialised. For example:

var xslightboxclassic = {
    init: function(cfg) {
        alert(JSON.stringify(cfg)) // alert the cfg properties as string
    }
}

Client

The client object is loaded on every client facing HTML page (not in back office). Please read Using Javascript in your pages for further information about this object and its methods.