Using Xara Presentation Site for Highly Customisable Content Slideshows

[Acorn]

Approach is staged but once mastered, simple.

STAGE 1

• Create Presentation website with same size pages (portrait or landscape).
• Fill each page with full-sized image (can be any smaller size).
• Add any Xara objects or embellishment (buttons, layers, text, hyperlinks).
• For each page select one of 27 page transitions (better to stick with one).
• Save the Presentation with the first page filename of presentation (can be anything except index).
• IMPORTANT, to Preview you must now Export to a folder (your choice).
• Add the following two Placeholders:
• CSS3 - (Hide) Slide Control:

<style>
#xr_palrt {
  visibility: hidden;
  display: none;
}
</style>

• JavaScript - Slide Time:

<script type="text/javascript">
  setInterval(function () {xr_next()}, 5000);
</script>

• The time between slides is controlled by changing the milliSecond delay (here, 5000).
• Example file: Portrait Presentation.web.

STAGE 2

• On you main site page (anywhere), create a Placeholder with HTML code (body):

<iframe src="presentation.htm#xl_xr_page_presentation" width="100%" height="100%" frameborder="0" scrolling="none" name="presentation_iframe" ><p>Your browser does not support iframes.</p></iframe>

• Note, Placeholder can be any size (scaled H:V dimensions of your Presentation site).
• IMPORTANT, to Preview you must now Export to the same folder (as your choice in Stage 1).
• Example file: Portrait Presentation Control.web.

The one thing I have not managed is to make it continuous.
The last slide is a repeat of the first and has a link back to the first slide where it all cycles again.
Click each end picture at different times to fire up the Control file I made.
As you are viewing a presentation, the cursor left and right and Page up and Page down can allow you to change the

REFINEMENTS

• I would Name each image with filename=<nice_name>.
• I would make a Live Copy of each if I wanted to repeat the cycle 5- or 10-fold with very little increase in the file size.

[gwpriester]

I'll have to give this a try. Do you have an example on-line we can see to tempt us to go through all these steps?

[Boy]

Very nifty, Acorn, a nice alternative to the slide widgets. Using Live Copy to simulate a continuous slide show should work in most cases (perhaps with a button "Click to restart slideshow" on the last presentation page). Thank you for the tut and the files.

[Acorn]

I'll have to give this a try. Do you have an example on-line we can see to tempt us to go through all these steps?

Seen as I know you: https://dl.dropboxusercontent.com/u/2140902/index.htm.

Acorn

[gwpriester]

Very, very nice.

[Acorn]

Very nifty, Acorn, a nice alternative to the slide widgets. Using Live Copy to simulate a continuous slide show should work in most cases (perhaps with a button "Click to restart slideshow" on the last presentation page). Thank you for the tut and the files.

I think I've managed a continuous slideshow.

A third Placeholder- JavaScript - Refresh Time:

<script type="text/javascript">
  setInterval(function () { window.location.replace("presentation.htm"); }, 35000);
</script>

I delete the last (duplicate) slide and set the refesh time to the Slide Time times the Number of Slides (5000 x 7).

In the end it is only three lines of code/style.

Acorn

[Boy]

It works like a charm, cycling through the presentation indefinitely. That is, when I preview it in DPX but when I double-click the exported index.htm file, it only show the first picture and when the presentation time is complete, the first picture is being refreshed. Using Chrome but still under XP.

[Acorn]

It works like a charm, cycling through the presentation indefinitely. That is, when I preview it in DPX but when I double-click the exported index.htm file, it only show the first picture and when the presentation time is complete, the first picture is being refreshed. Using Chrome but still under XP.

Does my published demo work: https://dl.dropboxusercontent.com/u/2140902/index.htm?

Acorn

[Boy]

It does once and then it stops. When I click one of the pictures, the presentation starts again but only for that one size. When I click the other images and do so at different times, they each start cycling through the sequence but not synchronized so that at any one point there are four different pictures on screen until they all reach the lion picture again. Is the demo the old version?

[Acorn]

Boy, I see what you are describing. Yes it is the old version as it would confuse people by having an example that differed from the description for the design files.

The demo is the old one that stops which allows the last image to restart the show all over.
As you can click on any of the four sizes at any time, the slideshows are not longer synchronised.

Here is the updated Presentation file: Cyclic Presentation.web.

Acorn