Adding a full-width slideshow to Acorn’s Ultimate Slideshow

[gcellison]

Hello and happy Monday.

Many of you remember Acorn’s popular thread from a few weeks ago:

The Ultimate Xara Slideshow


Acorn developed an excellent (“ultimate”) slideshow, almost entirely native to Xara functioning, with some crucial JavaScript that he wrote and shared. It’s based on page layers and allows almost any selection of shapes, images, text, and whatever other elements, to appear in the slides, with animations, etc. The thread took a turn toward Supersites and how the concept could be implemented for them with additional JavaScript.

As I don’t use Supersites, I was more interested in using the idea for normal websites. Specifically, I wanted to be able to use Acorn’s slideshow method with full-width images. The result would be similar to Xara’s slideshow widget but allow the flexibility of doing it yourself with whatever you want to add to the slides and however and wherever you want it to appear. Plus, you could easily make changes directly to your project. And, the exported slideshow would be stored in your own domain, not on the Xara / Magix server.

I started by setting up the project according to Acorn’s instructions. Next, I tried to make the photos stretchy, but it was a no go. For whatever reason, stretchy and web animations are not compatible in Xara. You can assign one or the other to an element, but not both. And web animations are necessary for the JavaScript to work.

So, this is my humble contribution to the development of the ultimate slideshow.

A little explanation:

1) The code works well for modern browsers. (I don’t have access to a Mac, so Safari is untested.) It is “responsive” in the same way that the Xara slideshow widget is: if the browser window is wider than the image, the image stretches to remain margin-to-margin; if the browser window is narrower than the image, it truncates the sides. This mimics the Xara widget. Also like the widget, the height of the images is fixed. Since Xara is WYSIWYG, setting the height to be responsive (i.e., to change as the width changes), while possible, would result in large white spaces below as the browser becomes narrow.

2) (Unlike the Xara widget,) the code has imperfect results in IE. The images are squeezed and stretched and look warped as the browser width changes. The is because IE does not recognize “object-fit” styling, which allows you to maintain the aspect ratio. For me, personally, this is no big deal. IE has a tiny usership, it has not been maintained by Microsoft for years, and even the latest version of WDP no longer generates all of the fallback code for IE that it used to. I choose not to make special efforts to accommodate IE. NEVERTHELESS!: Xara still uses IE for the webpage preview, so be aware that the images in the preview may look warped. Simply open the page up using a browser icon (other than IE) at the top, and you’ll get a proper view.

3) The vast part of creating the ultimate slideshow was explained in detail in the above referenced thread from Acorn. It will not be repeated here… only the new parts relating to the full-width images. The option of navigation controls is not used here, but it was developed in the original thread for those who want it.

The .web file is attached, including instructions.

ultimate-slideshow-with-full-width.web

This addition to the Acorn’s Ultimate Slideshow is preliminary. My skills are limited, and hopefully those with greater knowledge, if they’re interested, might see ways to improve it. One thing I have noticed, for example, that I do not understand: on the second slide (which is on the first slide layer), the objects which are assigned reveal animation appear already in position during the first cycle of the show. Subsequently, they are properly animated.

Thanks for reading

[Acorn]

Greg, you bypassed the Conventional Site issue by having a one-pager, which I failed to mention.
One could duplicate all the code at a Page level and ensure the images all had a proper Image Filename so there would be no duplication and wasted storage of the same image under different fielnames.
The only issue a multi-page Conventional Site then has is each page jump restarts the slideshow all over and you would get the "stutter".

The stutter is the fact that I finessed the Xara code only and did not change or remove it. The start-up image has to appear before my code kicks in...

Acorn

[gcellison]

Thanks, Acorn.

Greg, you bypassed the Conventional Site issue by having a one-pager, which I failed to mention.
One could duplicate all the code at a Page level and ensure the images all had a proper Image Filename so there would be no duplication and wasted storage of the same image under different fielnames.

Sorry not to fully grasp the issue. If I understand correctly, you're suggesting to move the html code from the Website to the Page. Does that mean that once the page is combined with additional pages, there would be issues with functioning? Or is it just for efficiency in the coding across the other pages?

The only issue a multi-page Conventional Site then has is each page jump restarts the slideshow all over and you would get the "stutter".

The stutter is the fact that I finessed the Xara code only and did not change or remove it. The start-up image has to appear before my code kicks in...

Acorn

Thanks for clearing that up. I wasn't sure if I had named something wrong or failed to meet all of the requirements for functioning.

Thanks again.