The Ultimate Xara Slideshow

[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

[Acorn]

Gary, I was researching a solution to the cross-browser issue that was not needed.

You stated the IFRAME was blank and also you wanted the the slider to stretch.
I checked and all seemed to work.

Have we achieved Ultimate Slider status?

Acorn

[Initiostar]

Acorn, many thanks, all works very well. The restaurant I created my slider for are very happy

Gary

[Initiostar]

Though it worthwhile to share one of the outcomes from the work done on the ultimate slider. There are two examples on this restaurant website https://theparsonage.co.uk/

Both sliders were converted to video to make them easily portable across different platforms.

Gary

[Acorn]

Though it worthwhile to share one of the outcomes from the work done on the ultimate slider. There are two examples on this restaurant website https://theparsonage.co.uk/
Both sliders were converted to video to make them easily portable across different platforms.
Gary

Gary, I like the fact the video colours are seamless with the website design - an interesting solution.

Acorn

[drbubu]

Hi guys

how can I get this nice fading transition when I use Xara animation of images?
https://www.w3schools.com/w3css/tryi...lideshow_ading

I tried and tried and my animation looks kinna not nice. Even when I play with frame duration....transition is still shitty...
Is there a way to implement this without java?