The Ultimate Xara Slideshow

[Initiostar]

Great idea Acorn! I am busy building a product launch demo supersite using your code for the second page (which launches from the index page).

With the reveal speed and delay times, there are plenty of creative options here. I am using the vertical cube transition between pages and I think there should be some great effects.



Is there a way with a supersite to have an optional script that will auto-loop through the page transitions? I could then create a promo video of the whole animation.

Gary

[Acorn]

Great idea Acorn! I am busy building a product launch demo supersite using your code for the second page (which launches from the index page).

With the reveal speed and delay times, there are plenty of creative options here. I am using the vertical cube transition between pages and I think there should be some great effects.



Is there a way with a supersite to have an optional script that will auto-loop through the page transitions? I could then create a promo video of the whole animation.

Gary

Gary, it ought to be simple enough, never had a look though.
It would be a case of finding the right trigger code to hook into and showing and hiding DIVs.

What sort of timing delay is needed between pages?

Had a quick look and it is going to be far simpler than expected.
It would be a case of naming the pages index, slide-2, then incrementing thereafter.
All the code need do is count to the number of ClassNames for $('[class*="xr_page"]') and then iterate round first to last simply setting window.location.href = baseUrl + count; & resetting count back to 0 to get an infinite loop.

To get an idea create a simple 7 page with /index.htm, /index.htm#xl_xr_page_slide-2, /index.htm#xl_xr_page_slide-3, ... and view in a proper browser so you can simply change the last digit by hand.
Xara - Cubic Vertical Tx Supersite demo.xar

Do note, no code is in this demo, it is there to show the approach.

Acorn

[siran]

Thanks for sharing Acorn. They really look great. Didn't try the third one yet, and didn't have the time to have a look into the code.

[Egg Bramhill]

Here's my attempt. Tried it with one animated svg and it works great.

LINK

[Acorn]

Here's my attempt. Tried it with one animated svg and it works great.
LINK

Egg, thank you for including you go, especially with the SVGs.

With a few tweaks, I can imagine having a slideshow in a slide of a second slideshow as well.

Acorn

[gcellison]

Very well done, @Acorn. The first one (jQuery – Messing with Slides) is particularly nice. Like @siran, your knowledge of JS opens up a lot of possibilities. Some of the effects you used are quite cool, by the way.

I noticed (at least as it comes in to WDP) that you left the Web Image Type to “Let Xara… choose”, rather than forcing PNG (Slide5) as your instructions suggest. Is that because you were confident that it would choose PNG (which it did)?

I played around a little with the design and found that (at least) to some degree, you can make the slideshow full width. (This requires removing any web animations, as they are apparently not compatible with full width in Xara. The decorative pieces that don’t occupy the full screen also go a bit screwy… so they would have to be adjusted.) That would be a great way of avoiding the Xara Slide Show that requires an external http request. (And sometimes, it is slow to show up on the page).

(If you have thought about it,) I was wondering as well if using the slide show across variants would require distinct instances, or if it would function using the same layers (obviously, with adjusted elements) and the same script?

And a last question (thanks for your patience… I try to understand all the aspects of these things): Was there a reason that you chose to put the JavaScript in the head of the placeholder rather than the body?

Again, congratulations on a great effort.

[Acorn]

Very well done, @Acorn. The first one (jQuery – Messing with Slides) is particularly nice. Like @siran, your knowledge of JS opens up a lot of possibilities. Some of the effects you used are quite cool, by the way.

I noticed (at least as it comes in to WDP) that you left the Web Image Type to “Let Xara… choose”, rather than forcing PNG (Slide5) as your instructions suggest. Is that because you were confident that it would choose PNG (which it did)?

I played around a little with the design and found that (at least) to some degree, you can make the slideshow full width. (This requires removing any web animations, as they are apparently not compatible with full width in Xara. The decorative pieces that don’t occupy the full screen also go a bit screwy… so they would have to be adjusted.) That would be a great way of avoiding the Xara Slide Show that requires an external http request. (And sometimes, it is slow to show up on the page).

(If you have thought about it,) I was wondering as well if using the slide show across variants would require distinct instances, or if it would function using the same layers (obviously, with adjusted elements) and the same script?

And a last question (thanks for your patience… I try to understand all the aspects of these things): Was there a reason that you chose to put the JavaScript in the head of the placeholder rather than the body?

Again, congratulations on a great effort.

Slide5 PNG omission was probably an oversight! When you have transparencies, you need PNG. If you don't you get unintended consequences that can be entertaining but baffling. My generic answer is experiment.

I did try full width but thought that keeping it simple to start would be best and then I just had to sit back for feature requests. I will have another look-see.

The code should be in the Head of the page; I did try it in the Body but saw no difference. Normally i would not use a Widget and place it directly in the Website Head, avoiding a Placeholder. The Placeholder is just an easy way to make it visible and portable.

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?

[Egg Bramhill]

drbubu, the link you supplied doesn't work:
The file you asked for does not exist

[Acorn]

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?

The correct link is https://www.w3schools.com/w3css/tryi...ideshow_fading.

How have you produced your "shitty" transition?
What design file, widget or code are you using?

The W3.CSS Slideshow offering has the all the code right there.

Read up on all my CSS Threads to work out how to add it into Placeholders on your design page.
I am miffed as I went to a lot of trouble earlier last week to build something for you.

Acorn