This approach creates a separate Xara document, where the page size can be anything the designer choses to accommodate the content. Photos can be any size, are and placed on a page. This can be single or multiple photos and include a mix of text and video as required. Each “slide” is a page in its own right. In this example, we have uses 16:9, 4:3 and square formats for the photo templates. The slider is published to the main website with a file name for the first slide such as “photo-slider” anything other than index. Thereafter it is called into the main website here using a standard iframe.In this example, the slider can also be set to automatically rotate through the slides with the following code, placed in the website HTML Code(body)<script>curScrollInterval=null;function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval((function _(){xr_spapp((xr_curp+1)%xr_spapn);return _;})(),6000);}}</script>The play/stop buttons have a link “javascript:void(toggleScroll());”The alternative to having a play/stop button with fixed time intervals requires only one line of code:<script>setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},6000);</script>
Similar in concept one creates a Presentation website and embeds it into the main website. In this example the the first slide is named “presentation”, not index and as with the transitional website plug-in it is called into the main website using an iframe e.g. <iframe title="photo-slider-2" src="presentation.html" height="100%" width="100%" style="border:none;"></iframe> Automating the presentation slider, in this example is achieved by adding the following code to the Website HTML Code (head):<script>setInterval(function(){ if(typeof this.d==="undefined"){ this.d=[[30,60],[80],[30,60,40],[80],[80]];//times for each presentation step where there are steps over the background - times in milliseconds. this.c=this.d[0][0]; } if (this.c>0) this.c--; else { var p=xr_curp, s=xr_spappsls(p).indexOf("0"); if (s<0) { s=0; if (++p>=xr_spapn) p=0; } else s++; this.c=this.d[p%this.d.length][Math.min(s,this.d[p%this.d.length].length)]; if (s) xr_donext(); else xr_spapps(p,0,xr_spappsls(p).replace(/1/g,"0")); }},100);// poll ten times per second</script>
Embedded Transition Website versus Embedded Presentation