The Ultimate Xara Slideshow

[siran]

And a small free goodie hack. Add the following just before the last line ( </script> ) to disable keyboard navigation:

// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();

You can omit the comment ( first line, starting with // ) off course.

[Initiostar]

@ Siran & @ Acorn

Ref. Animated Supersite

Great thoughts and code snippets: With your thoughts and code, I can create a scrolling supersite that can use ANY of the available transitions and adjust timing. I can now also disable the navigation popup and its associated keyboard arrow actions: I added some comments for my benefit, one of which is not to hit the webpage preview button because it locks up.

<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>

In design terms, from a main website, I can use a link to a supersite (with the same consistent styling and published under the same domain name), have a return link, or replicate the main site NavBar. I can also have the supersite in a placeholder on the main site, but now with integral scrolling.

What would be an added bonus is Pause and Play buttons that would operate on Click/Touch buttons. The scrolling supersite can then have a video feel to it too.

Scrolling Animated Pop-ups

I can create any number of animated pop-ups and get them to behalf as a manual slider (the necessary workaround is to do all the animation on the MouseOff layer first, copy and past to the pop-up layer, else Xara objects and says its not possible!). That's animation within the pop-up itself and animation of the way the pop-up rolls in.

Thanks to Acorn, I understand how to link to the generated reference for a pop-up via "xr_cpu(n)". Extraordinarily useful when you want a dual function such as "close pop-up, go to page top or anywhere else for that matter".

Thinking out of the box on animated pop-ups scrolling, can I simply create a function that would do the same as has been achieved for pages in a supersite, but achieves scrolling through the layers? Rationale is that my manual slider for animated pop-ups can use standard Xara functionality for next, pervious, start and end. already has two phases of animation, it just needs to scroll through with user defined timing, ideally with the same play and pause buttons?

That's my Friday morning done! time for lockdown takeaway cappuccino!

Some great thinking from you both, many thanks,

Gary

[Acorn]

@ Siran & @ Acorn

Ref. Animated Supersite

Great thoughts and code snippets: With your thoughts and code, I can create a scrolling supersite that can use ANY of the available transitions and adjust timing. I can now also disable the navigation popup and its associated keyboard arrow actions: I added some comments for my benefit, one of which is not to hit the webpage preview button because it locks up.

<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>

In design terms, from a main website, I can use a link to a supersite (with the same consistent styling and published under the same domain name), have a return link, or replicate the main site NavBar. I can also have the supersite in a placeholder on the main site, but now with integral scrolling.

What would be an added bonus is Pause and Play buttons that would operate on Click/Touch buttons. The scrolling supersite can then have a video feel to it too.

Scrolling Animated Pop-ups

I can create any number of animated pop-ups and get them to behalf as a manual slider (the necessary workaround is to do all the animation on the MouseOff layer first, copy and past to the pop-up layer, else Xara objects and says its not possible!). That's animation within the pop-up itself and animation of the way the pop-up rolls in.

Thanks to Acorn, I understand how to link to the generated reference for a pop-up via "xr_cpu(n)". Extraordinarily useful when you want a dual function such as "close pop-up, go to page top or anywhere else for that matter".

Thinking out of the box on animated pop-ups scrolling, can I simply create a function that would do the same as has been achieved for pages in a supersite, but achieves scrolling through the layers? Rationale is that my manual slider for animated pop-ups can use standard Xara functionality for next, pervious, start and end. already has two phases of animation, it just needs to scroll through with user defined timing, ideally with the same play and pause buttons?

That's my Friday morning done! time for lockdown takeaway cappuccino!

Some great thinking from you both, many thanks,

Gary

Gary, I guess I was second-guessing your next ask:
Xara - Cubic Vertical Tx Supersite demo v1dot1.xar

I cheated with it being a Restart as I mangled up my Resume code somewhere...

For a single page Preview, I just hit the Esc key and chastise myself!

I have stuck with my code approach so as not to confuse others mid-stream and possibly mangle siran's one-liner in the process.
It is more a case of, it can be done, here you go, others clean up afterwards.

Acorn

Update:
Altered to siran's coding;

<script>
var presentation = setInterval(runPres, 3000);
function runPres() { xr_spapp((xr_curp+1)%xr_spapn); }
function stopPres() { clearInterval(presentation); }
</script>

[Acorn]

Gary, interesting what we have achieved with three little bits of code, leveraging Xara designs ever upwards.

Thank you for your support.

Acorn

[Acorn]

"Added bonus": play controls.

Xara - Cubic Vertical Tx Supersite demo v1dot4.xar

Acorn

[Initiostar]

Gary, interesting what we have achieved with three little bits of code, leveraging Xara designs ever upwards.

Thank you for your support.

Acorn

I parked our scrolling animated supersite success and returned to your original idea, but I'd still like to create play and pause buttons at some time.

On the animated slider, I used your code in a demo alongside my animated manual slider, together with some other popup ideas (thanks to Xara additional notes on popups https://help.xara.com/article/26-und...d-web-features and your help with xr-xpu(n))

I uploaded some examples to my server; the popup list works well whereby you can randomly move up and down a list and the correct popup slides in (closing any that are open on the way).

Here's my take https://initiostar.co.uk/demo/popup/.

The bit I'd like to persuade you and Siran to help with, is how get the manual popup 'scrolling with a pause and play button', because those controls can sit alongside standard links for start, next, previous and end.

Very productive all around and many thanks to you both,

Gary

[Gypsyjoe]

Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.

[Initiostar]

Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.

Attached is the earlier animated supersite using the vertical box transition, but you can switch to any of the transitions. The code is placed in the website Head and Page 1 shows you this. Acorn has a later version too; just scroll back to his latest post.

Copy the code using a text editor for the supersite or simply use this template. You need to thank Siran and Acorn for this masterpiece.

<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<! do not show navigation panel code line -->
<! preview website only not webpage -->
<script>
//scrolling supersite
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);
// disable keyboard navigation
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>

You can place Acorn's code in the Page Head, or simply copy the widget and place it on your own page. The code is in the yellow placeholder and makes it easy to use; just copy and paste on the page. Scroll back through the thread, it's very well explained by Acorn.

Have fun

Gary

[Acorn]

Well Guys I downloaded your downloads and tried playing with them, I wish I were in your league, but have to admit with your simple code you have lost me. I looked in the head and the body for the pages, but do not see where you are putting the code in. I like the way Acorns is using different transitions with navigation buttons, but am totally lost. I want to thank you for giving me something to play with, maybe within the next millennium I will understand some of what you do.

First off, we have been juggling with quite a few balls at once.

For v1.4 I took siran's one-liner and added the means to pause and restart. i put this in its own Layer (Code) but it could have stayed on the MouseOff layer.
The different page transitions are pure Xara. Each page can have its own effect set though Web Properties > Page > Page transition > Transition effect & time.
I created the coloured Navigation Controls from a Text Line of Font Awesome symbols.
In the Text tool, it was then a case of adding the following Links:

• Restart:: index.htm
• Go Back (one page):: javascript: xr_prevp(); --will only go back to the first page
• Pause & Play:: javascript: togglePause(); -- this is some code in the Yellow/Red Placeholder Head Code. I didn't bother with a Pause/Play toggle in the end so the Pause Layer is redundant.
• Go Next (one page):: javascript: xr_nextp(); --will only go as far as the last page

To find prevp & nextp functions I added shapes with Links to Previous & Next Page, Previewed and checked the code being called on the browser status line. siran opened up the Xara JavaScript, found these and worked out what they were based on. We have different ways of working but they do seem to complement each other.

Acorn

[roly]

To all of you who have actively participated, thank you. You are all great and very generous with your advice. This has been one of the most interesting threads I have seen, even if it’s way over my head, I enjoyed it tremendously.

Take care, be well and stay healthy.

Roly