The Ultimate Xara Slideshow

[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

[Initiostar]

@Acorn

Following last weeks great success on the scrolling supersite, I took one of the sliders I had created using the WOW slider and replicated it with a little more animation. Here we are: https://initiostar.co.uk/demo/zeberd..._xr_page_index.

It was less effort than using WOW and the outcome (for what I wanted to achieve) will be easier to maintain.

One (hopefully) minor snag is it will not open in an iFrame. I think this might be because the scrolling code is in the HTML Website Head, just not sure what the correct string is to overcome the issue, or the best way around it. Any thoughts?

Thanks

Gary

[Acorn]

@Acorn

Following last weeks great success on the scrolling supersite, I took one of the sliders I had created using the WOW slider and replicated it with a little more animation. Here we are: https://initiostar.co.uk/demo/zeberd..._xr_page_index.

It was less effort than using WOW and the outcome (for what I wanted to achieve) will be easier to maintain.

One (hopefully) minor snag is it will not open in an iFrame. I think this might be because the scrolling code is in the HTML Website Head, just not sure what the correct string is to overcome the issue, or the best way around it. Any thoughts?

Thanks

Gary

Gary, I tried adding your excellent slider into an IFRAME of my making. It hit the following problem:

roe.js:1 Uncaught DOMException: Blocked a frame with origin "https://initiostar.co.uk" from accessing a cross-origin frame. at https://initiostar.co.uk/demo/zeberd...es/roe.js:1:78 (anonymous) @ roe.js:1
prs4.js:1 Uncaught DOMException: Blocked a frame with origin "https://initiostar.co.uk" from accessing a cross-origin frame.
at xr_prinit4 (https://initiostar.co.uk/demo/zeberd...rs4.js:1:25425)
at xr_prinit4 (https://initiostar.co.uk/demo/zeberdee/:44:2)
at xr_aeh (https://initiostar.co.uk/demo/zeberd...roe.js:1:45515)

I therefore assume you are getting similar.

I would have thought that if both slider and site were published into the same folder, it would work.
You would have to name the first slider page as, e.g., "parsonage", not index. so you end up with the images in folder parsonage_index_files/. Everything is then fully in the same domain and you could reference the slider source as a relative address (parsonage.htm).

It might be all you need do is ensure the slider src is actually a relative URL so try that first. (main_site)/ for website & (main_site)/demo/zeberdee/ for slider so use src="demo/zeberdee/".

Acorn

[Acorn]

So i created an automated slideshow using a Page Transition Supersite.
I named the first page "fred" so I then website Previewed it and checked that if had actually created fred.htm and assets under fred_htm_files/.

I created a Conventional site (one page), index with an IFRAME Placeholder with src="fred.htm" and (in the same Xara session) I Previewed the main page/website under http://localhost:8000/virt1bb6a93b/index.htm; it successfully accessed the slideshow.
Basically, it needs to run published.
There are hacks to ensure it will also run from the file:// protocol but I chased this down and found it interesting but not worth the effort (for now0.

I then Stretched it. The backgrounds stretched but the slider pages (being fixed width) didn't!
So, with great thought, I changed the slider's Web Export Options to Scale to Fit Width (max 3000px).

Bingo!

Acorn

P.S. The red bits just need fred to be the same name throughout.

[Egg Bramhill]

Sweet slideshow Gary.

[Initiostar]

@Acorn and with many thanks to you and Siran, I arrived at the same place! Then I thought let's have the slider set against a video backdrop: https://initiostar.co.uk/demo/zebmaster/

Not sure I understood your comment:

There are hacks to ensure it will also run from the file:// protocol but I chased this down and found it interesting but not worth the effort (for now)

I published the supersite on the main page with:

<iframe src="https://initiostar.co.uk/demo/zebmaster/slider.htm" name="slider_1" width="960" height="400" style="border:none" </iframe>

These are the directory paths:



The supersite appears to scrolls its pages index-a,b,c regardless of what you name the second, third, forth supersite pages. This had me thinking about why, if you hit preview page with the scrolling code in the head HTML (supersite) it freezes, but that's for another day.

I also published an amended version to Zeberdee (must spell it correctly next time) with a back home button, but with 'index' as the file name. This has always worked, but gives an option to stylise a conventional page with the supersite including menu etc.

@Egg thank you for the positives - the reason the scrolling capability is interesting, for me at least, is not only can it create a great slider but the output can be screen-captured as video, which itself can then be used as a video source component, or as a stand-alone video with the usual play and pause functions.

It's been an interesting thread and thanks to Acorn for kicking-it-off. You start to realise what can be achieved with a little imagination and help from TGers.

Gary