Update to the Ultimate Xara Slideshow

[Boy]

That's a gem, Acorn! I had an issue with all pages suddenly shifting upon completing a transition when the browser window was smaller than the site. This was remedied by selecting Web Properties/Export/Scale to fit width maximum and setting the value to 1440 (the page size you set).

[Acorn]

That's a gem, Acorn! I had an issue with all pages suddenly shifting upon completing a transition when the browser window was smaller than the site. This was remedied by selecting Web Properties/Export/Scale to fit width maximum and setting the value to 1440 (the page size you set).

Boy, thank you for pointing the jumping and the solution.

I was lazy and only make the slides from my normal design template.
Even using Scale to fit width is a risk if you set the browser to just show a slide with no edging, you can get a massive judder.
My fix for that is to set the Pasteboard to the page background, but, of course, for a Supersite Xara only displays the first page background across all slides.

If you are using this method as a continuous presentation in Full Screen mode, scle to Fit width need to ensure the height is just under the monitor height or the slides get cropped.

The slides should have been smaller as they should normally be presented through a Embed a website Widget on your normal website page.

Acorn

[Boy]

Even using Scale to fit width is a risk if you set the browser to just show a slide with no edging, you can get a massive judder.

Didn't see that happening, in none of the major browsers and/or when narrowing the browser window to a typical mobile viewport.

If you are using this method as a continuous presentation in Full Screen mode, scle to Fit width need to ensure the height is just under the monitor height or the slides get cropped.

The slides should have been smaller as they should normally be presented through a Embed a website Widget on your normal website page.

Yes, I saw that but the slides are indeed massive.

[Initiostar]

Thanks for the updated code Acorn - tried it on one of my demo sliders with page-by-page navigation, a mobile variant and Scale-to-fit width: https://initiostar.co.uk/demo/ultSli..._simple-slider - All good.

Simple-Slideshow_v3.xar

I have always added the additional code to disable the keyboard arrows keys; a visitor might stumble across them otherwise and of course they don't work in a mobile format. It's a hangover from the original Xara supersite bug.

<script>
//Acorn v3 Ultimate Slider - paste to website HTML (body)
function showTime() { xr_spapp( (xr_curp + 1)%xr_spapn ); } // Thanks to siran
var pageWait = 5000; // milliSeconds
var presentation = setInterval(function() { showTime() }, pageWait);
var isPaused = false;
function togglePause() {
if (isPaused) { presentation = setInterval(function() { showTime() }, pageWait); }
else { clearInterval(presentation); }
isPaused = !isPaused;
}
// disable keyboard arrow navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkey down=xr_d_old_onkeydown;};}})();
</script>

Gary

[Acorn]

@Imitostar, grateful for your endorsement and the additional code.
The mucked-up pop-up does not show in the latest versions.

Acorn

[TomTom66]

Hello,

I need some help please: I did make a test page with the sample (with file from https://initiostar.co.uk/demo/ultSli..._simple-slider). Was very happy to found this solution. All works fine so far but when in the final site (with) iframe placeholder I have the slider only in the desktop version (1200px), but NOT in the mobile version (480px). What is strange is that in the mobile version it evens shows NO page background. I have in both viariant each oine placeholder with same small code snipset. When I delete the one placeholder in the desktop variant then the slider works on mobile variant. But with both placeholders it worsk only in desktop variant and it supress all elements beside background from the mobile variant.

What goes wrong? Thanks vor any help.

TomTom.

[Initiostar]

TomTom,

The demo template (https://initiostar.co.uk/demo/zNivo/#xl_six) has a mobile variant width of 540px; it uses Scale-to-fit-Width with a minimum width of 540px. Should you want to embed this into a main website mobile variant that has a 480px width, you would need to modify the page width in the slider mobile variant to 480px.

E.g. Simple-Slideshow-Page-Template_480px.xar

You can modify any of the slider page sizes across all variants to suit your design, but as a start point, I would make the main website placeholders the same size as the incoming slider for each variant. The code remains the same.

Hopefully this gets you back on track.